React ES6 クラス

1. クラス (Classes)

ES6 でクラス（Class）が導入されました。

クラスは一種の関数（Function）ですが、定義する際に function キーワードを使用する代わりに class キーワードを使用します。また、プロパティの割り当ては constructor() メソッド内で行われるのが特徴です。

1.1 シンプルなクラスのコンストラクタ

class Car {
  constructor(name) {
    this.brand = name;
  }
}

クラス名（この例では "Car"）のケース（大文字・小文字）に注目してください。名前の先頭を大文字で始めているのは、クラスにおける標準的な命名規則（パスカルケース）です。

これで、Car クラスを使用してオブジェクトを作成する準備が整いました。

1.2 オブジェクトの作成

Car クラスをベースに "mycar" という名前のオブジェクトを作成してみましょう。

class Car {
  constructor(name) {
    this.brand = name;
  }
}

const mycar = new Car("Ford");

       注意： コンストラクタ（constructor）関数は、オブジェクトが初期化されるときに自動的に呼び出されます。

2. クラス内のメソッド (Methods)

クラスには、独自のメソッド（Method）を追加することができます。

2.1 "present" メソッドの作成

class Car {
  constructor(name) {
    this.brand = name;
  }
  
  present() {
    return '私の車は ' + this.brand + ' です';
  }
}

const mycar = new Car("Ford");
mycar.present();

上記の例のように、オブジェクト名に続けてドット（.）とメソッド名を記述し、その後に括弧 () を付けることでメソッドを呼び出します（引数がある場合は括弧の中に記述します）。

3. クラスの継承 (Class Inheritance)

クラスの継承を作成するには、extends キーワードを使用します。
継承によって作成されたクラスは、別のクラスからすべてのメソッドを引き継ぎます。

3.1 "Car" クラスを継承した "Model" クラスの作成

class Car {
  constructor(name) {
    this.brand = name;
  }

  present() {
    return '私の車は ' + this.brand + ' です';
  }
}

class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }  
  
  show() {
      return this.present() + '、車種は ' + this.model + ' です';
  }
}

const mycar = new Model("Ford", "Mustang");
mycar.show();

super() メソッドは親クラスを参照します。
コンストラクタメソッド内で super() を呼び出すことで、親クラスのコンストラクタメソッドを実行し、親のプロパティやメソッドへのアクセスを可能にします。