JavaScript IV

1.オブジェクトの復習

クラスを学ぼう
・このレッスンでは「クラス」というものについて学習していく
・クラスはES6から新しく導入された文法で、JavaScriptのライブラリ（React, Vue.js など）を学習する上で必須の知識になってくる

オブジェクトの復習
・クラスについて学習する前に、少し「学習コースⅡ」で学んだ「オブジェクト」について復習する
・オブジェクトは複数の値をプロパティという名前をつけて管理できるもの

オブジェクトと関数（１）
・オブジェクトの「値」の部分には、関数を用いることもできる
・プロパティの値として関数を記述する
・また、その関数を呼び出すには、「定数名.プロパティ名()」とする
・プロパティ名の後ろの()を忘れないようにする
・よく使う書き方なので、この機会に覚えておく

オブジェクトと関数（２）
・オブジェクトの「greet」プロパティに対応する値に関数（アロー関数）を用いている
・そして、「user.greet()」とすることで関数が実行され、コンソールに表示されている

2.クラスとは

オブジェクトを量産する
・Webサービスなどでは、先ほど作成したようなオブジェクトをいくつも扱っている
・例えばProgateのようなログインが必要なサービスでは、ユーザー（利用者）に関するデータ（オブジェクト）を用いている
・これらのデータは毎回ゼロから作成していたら大変
・ここからは、似たようなデータを効率よく生成する方法を学習する

オブジェクトの設計図
・効率よくオブジェクトを作成していくための方法として、最初に「設計図」を用意する方法がある
・例えばユーザーのデータをいくつも作成する場合、最初に「ユーザーを生成するための設計図」を用意し、その設計図をもとにユーザーのデータを生成していく、といったことができる

クラス
・「設計図」のことをJavaScriptでは「クラス」と呼ぶ
・「class クラス名」とすることで新しくクラスを用意できる
・なお、クラス名は基本的に大文字から始める

3.インスタンスの生成

インスタンスの生成
・オブジェクトを生成するための設計図を用意できたので、その設計図から実際にオブジェクトを生成する
・クラスからオブジェクトを生成するには、「new クラス名()」とする
・クラスから生成したオブジェクトは特別にインスタンスと呼ぶ
・また、AnimalクラスのインスタンスをAnimalインスタンスと呼ぶ

インスタンスの確認
・今回はAnimalクラスから生成したAnimalインスタンスをコンソールに出力し、インスタンスが空のオブジェクトであることを確認する
（{}の前にクラス名のAnimalも表示されますが、気にしない）

4.コンストラクタ（1）

設計図の中身を追加する
・ここまでで、設計図（クラス）を用意し、それをもとにインスタンスを生成する方法を学習してきたが、今はまだクラスに何も処理を追加していないため、白紙の設計図のような状態

コンストラクタとは
・クラスにはコンストラクタと呼ばれる機能が用意されている
・コンストラクタはインスタンスを生成するときに実行したい処理や設定を追加するための機能
・まず、クラスの中括弧 { } 内に「constructor() { }」と記述する

コンストラクタの処理
・コンストラクタの中には処理を記述することができる
・ここに書いた処理はインスタンスが生成された直後に実行される
・大切なのは、インスタンスごとに毎回実行されるということ
・2回「new Animal()」としているので、その度にコンストラクタ内の処理が実行される

5.コンストラクタ（2）

プロパティを追加する
・コンストラクタの中で、生成したインスタンスに関する情報を追加する
・コンストラクタの中で「this.プロパティ名 = 値」とすることで、生成されたインスタンスにプロパティと値を追加することができる

インスタンスとプロパティ
・インスタンスに関する説明の通り、インスタンスとはオブジェクト
・従って、コンストラクタの中で追加した値はオブジェクトと同様に「インスタンス.プロパティ名」とすることでクラスの外で使用することができる

インスタンスごとに値を変える
・コンストラクタ内の処理を追加したことで、生成されるインスタンスの初期設定をすることができたが、生成されるインスタンスはすべて「レオ」「3」のように同じ値になっている
・インスタンスごとに自由に値を変える方法を学習して行く

コンストラクタの引数（1）
・コンストラクタでは、「学習コース Ⅲ」で学んだ関数と同じように、引数を受け取ることが可能
・「constructor」の後の括弧「( )」内に引数名を記述することで、その引数をコンストラクタの処理内で使用できる

コンストラクタの引数（2）
コンストラクタに引数として値を渡すには、「new クラス名()」の括弧「( )」内に値を追加する
・文字列「"レオ"」という値が引数として渡され、コンストラクタ内では「name」として使うことができる

7.メソッド（1）

メソッドとは
・ここからクラスの重要な機能の1つである「メソッド」について学習する
・メソッドとはそのインスタンスの「動作」のようなもの
・「名前」や「年齢」などの情報はプロパティで追加したのに対して、メソッドは「挨拶をする」「値を計算する」などの処理のまとまりを表す

メソッドの定義
・メソッドはクラスの中で定義する
・「メソッド名() { }」とすることで定義できる
・メソッドは関数と似たようなもので、中括弧「{ }」の中にそのメソッドで行いたい処理を記述する

メソッドの使い方
・メソッドはそのクラスから生成したインスタンスに対して呼び出す
・具体的には「インスタンス.メソッド名()」とすることでそのメソッドを呼び出し、処理を実行できる

メソッド内で値を使う
・次に、「name」の値を用いて「名前は〇〇です」と出力するメソッドを作成する
・メソッド内でインスタンスの値を使用するには、「this」という特殊な値を用いて、「this.プロパティ名」とする

9.メソッド内でのメソッド呼び出し

メソッド内でメソッドを使う
・メソッド内で他のメソッドを呼び出すことも可能
・メソッド内で「this.メソッド名()」とすることで、同じクラスの他のメソッドを使うことができる

10.継承とは

Dogクラスを作ろう
・ここまで動物に関するデータを扱う「Animalクラス」を作成してきたが、ここからは、犬のデータに特化した「Dogクラス」を作成していく
・新しく作成するクラスが既存のクラスの一種である場合、「継承」という方法を用いることで非常に効率よく作業を進めることができる

継承とは
・「継承」とは、すでにあるクラスをもとに、新しくクラスを作成する方法
・例えば「Animalクラス」から「Dogクラス」を継承すると、「Animalクラス」の全ての機能を引き継いで、「Dogクラス」を作成することができる

継承の書き方
・継承を用いてクラスを作成するには「extends」を用いる
・「Animalクラス」を継承して「Dogクラス」を作成するには、「class Dog extends Animal」と書く
・また、継承では元となるクラスを親クラス（今回はAnimalクラス）、新しく作成するクラスを子クラス（今回はDogクラス）と呼ぶ

11.継承したクラスを使う

使えるメソッド
・「Dogクラス」は「Animalクラス」のすべての機能を引き継いでいる
・そのため、「Dogクラス」内にはまだ何もメソッドは定義されていないが、「Animalクラス」に定義されている「infoメソッド」などを使用することができる

12.メソッドの追加

独自のメソッド
・継承して作成したクラスにも、これまでと同じようにメソッドを追加することができる
・今回は犬の年齢を人間の年齢に換算する「getHumanAge」メソッドを用意する

メソッドの戻り値
・メソッドでは、関数と同じように戻り値を用いることができる
・「getHumanAge」メソッドの戻り値を、「humanAge」という定数に代入している

子クラスのメソッド
・子クラスで定義した独自のメソッドは、親クラスから呼び出すことはできない
・AnimalクラスのインスタンスからgetHumanAgeメソッドを呼び出すとエラーが発生してしまう

13.オーバーライド（1）

同名のメソッド
・継承したクラスは、親クラスのメソッドと子クラスのメソッドの両方が使用できることがわかる
・ではAnimalクラス（親クラス）にすでにあるメソッドと同じ名前のメソッドをDogクラス（子クラス）に定義すると、どちらのメソッドが呼び出されるか？

オーバーライド
・親クラスと同じ名前のメソッドを子クラスに定義すると、子クラスのメソッドが優先して使用される
・これは、子クラスのメソッドが親クラスのメソッドを上書きしていることから、オーバーライドと呼ばれる

infoメソッドの上書き
・今回は、Dogクラスのinfoメソッドで人間年齢も出力するようにする
・前のページで定義したgetHumanAgeメソッドを使って書き換える

14.オーバーライド（2）

コンストラクタのオーバーライド（1）
・メソッドと同じようにコンストラクタもオーバーライドすることができる
・例えば、子クラスにプロパティを追加したい場合などに用いる
・ただし、コンストラクタをオーバーライドする際は1行目に「super()」と記述する必要がある

コンストラクタのオーバーライド（2）
・子クラスのコンストラクタ内の「super()」では、その部分で親クラスのコンストラクタを呼び出している
・そのため、親クラスのコンストラクタが引数を受け取る場合には、「super」の後ろの丸括弧「( )」に引数を渡す必要がある
・今回は親クラスのコンストラクタを呼び出したあとに、犬の種類を表す「breed」プロパティを追加している