JavaScript クラス

ECMAScript 2015（通称 ES6）において、JavaScript にクラス（Classes）が導入されました。
JavaScript クラスは、オブジェクトを作成するためのテンプレート（設計図）です。

1. JavaScript クラスの構文

クラスを作成するには class キーワード（Keyword）を使用します。
また、必ず constructor() という名前のメソッドを追加します。

構文

class ClassName {
  constructor() { ... }
}

例

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

上記の例では「Car」という名前のクラスを作成しています。
このクラスは「name」と「year」という2つの初期プロパティを持っています。

2. クラスの使用

クラスを定義すると、それを使ってオブジェクトを作成（インスタンス化）できるようになります。

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

上記の例では、Car クラスを使用して2つの Car オブジェクトを作成しています。
新しいオブジェクトが作成される際、constructor メソッドが自動的に呼び出されます。

3. コンストラクタメソッド (The Constructor Method)

constructor メソッドは特殊なメソッドです：

• 名前は必ず「constructor」である必要があります。
• 新しいオブジェクトが作成されるときに自動的に実行されます。
• オブジェクトのプロパティを初期化するために使用されます。

もし constructor メソッドを定義しなかった場合、JavaScript は空のコンストラクタメソッドを自動的に追加します。

4. クラスメソッド (Class Methods)

クラスメソッドは、オブジェクトメソッドと同じ構文で作成されます。
class キーワードでクラスを作成し、constructor() メソッドを追加した後に、任意の数のメソッドを記述できます。

構文

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

車の「車齢」を返す「age」という名前のクラスメソッドを作成する例：

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    const date = new Date();
    // 現在の年から製造年を引いて車齢を算出します
    return date.getFullYear() - this.year;
  }
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"私の車は " + myCar.age() + " 歳です。";

クラスメソッドには引数（Parameters）を渡すこともできます：

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  // 引数 x を受け取るメソッド
  age(x) {
    return x - this.year;
  }
}

const date = new Date();
let year = date.getFullYear();

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"私の車は " + myCar.age(year) + " 歳です。";

5. ストリクトモード (use strict)

クラスの構文は、常に "use strict" ディレクティブ（Directive）に従って記述される必要があります。
ストリクトモード（厳格モード）のルールに従わない場合、エラーが発生します。

例

「ストリクトモード」では、変数を宣言せずに使用するとエラーになります：

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();   // これはエラーになります（未宣言）
    const date = new Date(); // これは正常に動作します
    return date.getFullYear() - this.year;
  }
}