【JavaScript超入門コース】13.クラス｜クラスとは、「データ」と「処理」をまとめたもの【プログラミング初心者向け入門講座】

この動画では、JavaScriptのクラスについて説明します。文字の書き起こし、ソースコードも完全無料です。サイトでの登録なども一切不要です。概要欄の下部にサイトURLあります。 ▼目次 00:32 クラスとは 01:27 クラスの定義 03:25 クラスの使い方 04:49 引数ありのメソッド 05:44 プロパティ 06:42 コンストラクタ 09:22 クラス式 10:18 クラスの便利なところ 11:00 確認問題 ▼関連動画 【JavaScript超入門コース】01.コース紹介（   • 【JavaScript超入門コース】01.コース紹介｜初心者にわかりやすい...  ) 【JavaScript超入門コース】02.JavaScriptとは (   • 【JavaScript超入門コース】02.JavaScriptとは？｜Ja...  ) 【JavaScript超入門コース】03.環境構築(for Mac) (   • 【JavaScript超入門コース】03.環境構築 for Mac｜プログ...  ) 【JavaScript超入門コース】03.環境構築(for Windows) (   • 【JavaScript超入門コース】03.環境構築 for Windows...  ) 【JavaScript超入門コース】04.プログラムの基本構造 (   • 【JavaScript超入門コース】04.プログラムの3つの基本構造｜プロ...  ) 【JavaScript超入門コース】05.実行 (   • 【JavaScript超入門コース】05.プログラム実行方法 ｜プログラム...  ) 【JavaScript超入門コース】06.変数 (   • 【JavaScript超入門コース】06.変数 ｜変数は、例えるなら「箱」...  ) 【JavaScript超入門コース】07.データ型 (   • 【JavaScript超入門コース】07.データ型 ｜変数に入れるデータの...  ) 【JavaScript超入門コース】08.配列 (   • 【JavaScript超入門コース】08.配列｜変数を箱。配列をロッカーに...  ) 【JavaScript超入門コース】09.演算子 (   • 【JavaScript 超入門コース】09.演算子｜足し算や引き算、2つの...  ) 【JavaScript超入門コース】10.条件分岐 (   • 【JavaScript超入門コース】10.条件分岐｜条件にあてはまればAと...  ) 【JavaScript超入門コース】11.繰り返し (   • 【JavaScript超入門コース】11.繰り返し｜同じ処理を何度も実行で...  ) 【JavaScript超入門コース】12.関数 (   • 【JavaScript超入門コース】12.関数 ｜関数を料理ロボットに例え...  ) 【JavaScript超入門コース】13.クラス (   • 【JavaScript超入門コース】13.クラス｜クラスとは、「データ」と...  ) 【JavaScript超入門コース】14.実践 (   • 【JavaScript超入門コース】14.実践｜すべて理解できればJava...  ) 【JavaScript超入門コース】15.総集編（   • JavaScript超入門コース 合併版【JavaScriptの超基本的な...  ) ▼各超入門コース 合併版（約1時間） 【Python超入門コース】(   • Python超入門コース 合併版｜Pythonの超基本的な部分をたった1時...  ) 【JavaScript超入門コース】(   • JavaScript超入門コース 合併版【JavaScriptの超基本的な...  ) 【Java超入門コース】(   • Java超入門コース 合併版【Javaの超基本的な部分をたった1時間で学べ...  ) 【PHP超入門コース】(   • PHPのプログラミング初心者向けの超入門講座｜たった1時間で学べる【文字書...  ) 【Go超入門コース】(   • 【たった1時間で学べる】Go言語のプログラミング初心者向けの超入門講座【文...  ) 【Ruby超入門コース】(   • 【たった1時間で学べる】Rubyのプログラミング初心者向けの超入門講座【文...  ) 【Kotlin超入門コース】(   • 【たった1時間で学べる】Kotlinのプログラミング初心者向けの超入門講座...  ) ▼自己紹介 現在：フリーランス（マーケティング関連の人工知能開発、データ分析や業務自動化など） 前職：リクルート ▼SNS Twitter : https://twitter.com/kino_code/likes Facebook : https://www.facebook.com/%E3%82%AD%E3%83%8E%E3%82%B3%E3%83%BC%E3%83%89-105693727500005/ Website : https://kino-code.com/ ▼文字書き起こし クラスとは？ クラスにはインスタンスやコンストラクタなどの概念がでてきます。 私自身、プログラミングを勉強し始めたときに、これを理解するのに時間がかかりました。 私が何冊も書籍を読んで、こういう順番であれば理解しやすいというプロセスで説明します。 クラスを理解できた感動をみなさんにもお届けできればと思い、説明していきます。 まずクラスについて説明します。 クラスとは、「データ」と「処理」をまとめたものになります。 JavaScriptでは、「データ」のことをプロパティといい、「処理」のことをメソッドといいます。 プロパティとメソッド プロパティは、クラス内で定義された変数のことです。 プロパティは、変数と同じように、数値や文字列を代入したり、参照したりすることができます。 プロパティと変数の違いは、クラスの外にあるかクラスの中にあるかの違いです。 次にメソッドについて説明します。 前のレッスンで関数は、いろいろな「処理」をまとめて1つにしたものと説明しました。 メソッドも関数と同じで、いろいろな「処理」をまとめて1つにしたものです。 簡単にいうと、メソッドは、クラス内に定義された関数です。 まとめると、プロパティはクラス内の変数、メソッドはクラス内の関数ということになります。 クラスの定義 クラスを作ることをクラスを定義すると言います。 このレッスンでどんなクラスを定義するか説明します。 前のレッスンでは関数を定義する方法は、関数を宣言する方法と関数式で作る方法があり、それを紹介しました。 クラスを定義する方法は、関数と同様にクラス宣言とクラス式があります。 まず、クラス宣言から説明します。 クラス名はStudentとします。 次に、数学と英語の点数の平均を計算するavgというメソッドを定義します。 コードを書いていきましょう class Student { avg() { console.log((80 + 70) / 2); } } まずclassと書いて、次にクラス名を書きます。 今回はStudentというクラス名なので、Student。 クラス名の最初の文字は小文字でも定義はできますが、最初の文字を大文字するのは、JavaScriptの慣習となっています。 したがって、クラス名の最初の文字は大文字にしましょう。 波括弧を書いて改行です。 次にメソッドを定義していきます。 数学と英語の点数の平均を計算するメソッドです。 メソッドは関数と違い、functionは書きません。 したがって、メソッドの定義では最初にメソッド名を記述します。 平均を計算するので、平均という意味のaverageを省略して、avgというメソッド名にします。 次に丸括弧を記述します。引数がある場合は、丸括弧内に引数を記述します。 引数は、関数と同じで引数がなくてもよいです。 また、複数の引数を定義してもよいです 今回はメソッドに渡す引数がないので、引数は記述しません。 丸括弧の次は、波括弧。改行です。 波括弧の中に、数学が80点と、英語が70点を取れたとして、それらを足して2で割ります。 表示させるためにconsole.logでくくりましょう。 これで、メソッドを含めたクラスを定義することができました。 クラスの使い方 クラスを実際に使ってみたいと思いますが、クラスはこのままでは使うことができません。 クラスは、クラスから作られたインスタンスを変数に代入してから使います。 クラスは、インスタンスになって初めて使えるようになります。 コードを書いて、クラスの使い方をみていきましょう。 class Student { avg() { console.log((80 + 70) / 2); } } var a001 = new Student(); a001.avg(); 数学が80点、英語が70点という点数は、aという学級の出席番号001番の人がとったとします。 変数名をa001とします。 イコールを書いて、new、クラス名、丸括弧、セミコロンを書きます。 これで、クラスを使えるようになりました。 クラスを使えるような状態にすることを「インスタンス化」といいます。 インスタンスとは、実体という意味です。 なので、インスタンス化とは、実体化という意味です。 つまり、インスタンス化とは、クラスから、インスタンスという実際に使える「モノ」を作ることをいいます。 変数にインスタンスを代入して、インスタンスとして使えるようになったa001は、これからa001インスタンスと呼ぶことにします。 次にメソッドの実行方法についてです。 a001にドットをつけて、メソッド名です。 丸括弧とセミコロンも忘れないでください。 実行してみます。 平均点の75点が表示されました。 ※続きは、文字書き起こしブログで ▼文字書き起こし&ソースコードは下記ブログ https://kino-code.com/course-javascript13-function/ ▼タグ #JavaScript初心者 #プログラミング入門 #クラス