初心者向け。JavaScriptのクラスの考え方のまとめ
983 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
JavaScriptでプログラムを作る時にクラスが必要になったのですが内容を忘れていたのでProgateで勉強し直してそれをまとめた記事にしました。
それでは解説です。
目次
クラス・インスタンスとは何
例えばプラモデルを作るとします。
プラモデルを作る時には設計図がありますが設計図の事をクラスと言います。
そして設計図を基にできたプラモデルをインスタンスと言います。
図にすると↓です。
次はクラスとインスタンスの書き方です。
クラスの書き方
クラスの書き方は↓です。
クラス名は「Puramoderu」ですが先頭の文字は大文字にします。
インスタンスの書き方は↓になります。
インスタンスの書き方
インスタンスはクラスの外に書き3行目の「new Puramoderu()」です。
ここまででクラスとインスタンスについて説明しましたが次はプロパティとメソッドについて説明します。
説明しやすいので例えをロボットに変えて説明します。
プロパティ・メソッドとは何
インスタンスができたらロボットができた事になりますがまだ名前と何ができるかが分からない状態です。
この名前の事をプロパティと言い何ができるかをメソッドと言います。
図にすると↓です。
次はプロパティとメソッドの書き方です。
プロパティの書き方
プロパティの書き方は↓です。
プロパティはクラスの中で書きます。
プロパティの設定は2行目〜4行目でしていますが3行目の「this.name = “R2D2″」でロボットの名前がR2D2になります。
プロパティ名は「name」で「this.プロパティ名 = “名称”」でプロパティを決める事ができると覚えていいです。
2行目はコンストラクタと言ってインスタンスが生成（7行目）された直後に実行される関数ですがコンストラクタの中でプロパティを使うと覚えましょう。
9行目の「robot.name」でプロパティを呼び出していますがプロパティの呼び出し方は「インスタンス名.プロパティ名」です。
今のままではプロパティを呼び出す時にnameプロパティが「R2D2」だけになって利便性が悪いです。
そこでインスタンスによってプロパティの値を変えます。
コードを↓にします。
コードの流れはこうです。
7行目の引数「アベル」と8行目の引数「レイナ」を2行目のnameに代入します。
そして2行目のnameを3行目の右辺のnameに代入します。
そして3行目の「this.name」を10行目と11行目で表示します。
次はメソッドの書き方です。
メソッドの書き方
メソッドの書き方は↓です。
メソッドの部分は 6行目〜8行目です。
メソッドの内容を表示するのは17行目で「インスタンス名.メソッド名」と書きます。
次はプロパティをメソッドで使う場合です。
プロパティをメソッドで使う
コードを↓にします。
これで24行目から「アベルの年齢は10歳です」と表示され25行目から「レイナの年齢は12歳です」と 表示されます。
16行目・17行目の引数は2つありますが2行目のコンストラクタの引数の数も同じです。
インスタンスの引数の数とコンストラクタの引数の数は同じじゃないといけないと覚えましょう。
次はメソッドの中で他のメソッドを使う場合です。
コードを↓にします。
メソッドの中で他のメソッドを使っているのは12行目です。
書き方は「this.他のメソッド名」です。
次はクラスの継承です。
クラスの継承
例えを動物を表すAnimalクラスで説明します。
Animalクラスから犬を表すDogインスタンスを作った場合必要がない情報も含みます。（Dogインスタンスは犬に関する情報しか必要ないのにAnimalクラスは色んな動物の情報を含む）
こんな場合はクラスの継承をします。
大元のクラスを親クラスと言い継承するクラスを子クラスと言いますがクラスの継承をすれば子クラスは親クラスの必要な情報を使う事ができます。
継承をするコードは↓です。
4行目・5行目ですが継承の書き方は 「class 子クラス名 extends 親クラス名{}」です。
子クラスでインスタンスを作れば親クラスのプロパティやメソッドを使う事ができます。
例えば↓です。
これで「こんにちは」、「名前はレオです」、「4歳です」と表示されます。
子クラスでの親メソッドの書き方は「子クラスのインスタンス名.親クラスのメソッド」です。
今は親クラスのメソッドを子クラスで使っていますが子クラス独自のメソッドを定義する事もできます。
子クラス独自のメソッドは15行目〜18行目です。
これで「人間年齢で28歳です」と表示されます。
次はオーバーライドです。
オーバーライドって何
親クラスと子クラスで同じ名前のメソッドを定義した場合は子クラスのメソッドが使われます。
子クラスのメソッドで親クラスのメソッドの上書きをするからオーバーライドと言います。
Progateはメソッドのオーバーライドとコンストラクタのオーバーライドの解説がありましたがネットを調べた限りこの2種類しかないみたいです。
メソッドのオーバーライド
↓です。
「info」メソッドが親クラス（11行目〜15行目）と子クラス（19行目〜26行目）にあり子クラスでinfoメソッドを使う場合は子クラスで定義したメソッドを使います。
コンストラクタのオーバーライド
↓です。
親クラスと子クラスで同じプロパティを使った場合は子クラスのプロパティの書き方が少し変わります。
親クラス（Animal）と子クラス（Dog）で共通のプロパティ「name」・「age」がありますがありますが共通のプロパティがある場合は子クラスのコンストラクタの中に10行目の様に「super(共通のプロパティ名)」と書きます。
今の共通のプロパティ名がnameとageなので「super(name,age)」となります。
子クラスのコンストラクタの引数には共通のプロパティと子クラス独自のプロパティを書きます。
子クラスのコンストラクタの部分だけ書くと↓です。
最後はクラスはどんな時に使う使うかです。
クラスはどんな時に使うか
↓のコードを見てください。
userは1から100までありますが直接書くと大変になりますよね。
そうならないようにクラスを使って書くのを楽にする為に使います。