JavaScript クラス

ECMAScript 2015、通称ES6、ではJavaScriptのクラスが導入されました。

JavaScriptのクラスはJavaScriptオブジェクトのテンプレートです。

JavaScriptクラスの構文

クラスを作成するには、キーワードclassを使用します。

必ずconstructor()という名前のメソッドを追加してください:

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

例

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

上記の例は”Car”という名前のクラスを作成します。

このクラスには2つの初期プロパティ、”name”と”year”があります。

JavaScriptのクラスはオブジェクトではありません。

それはJavaScriptオブジェクトのテンプレートです。

クラスの使用

クラスがあれば、そのクラスを使用してオブジェクトを作成できます:

例

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

上記の例ではCarクラスを使用して2つのCarオブジェクトを作成します。

新しいオブジェクトが作成されるときに、constructorメソッドが自動的に呼び出されます。

constructorメソッド

constructorメソッドは特別なメソッドです:

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

constructorメソッドを定義しない場合、JavaScriptは空のconstructorメソッドを追加します。

クラスメソッド

クラスメソッドはオブジェクトメソッドと同じ構文で作成されます。

クラスを作成するにはキーワードclassを使用します。

必ずconstructor()メソッドを追加します。

その後、任意の数のメソッドを追加します。

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

「age」という名前のクラスメソッドを作成し、Carの年齢を返すようにします:

例

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 =
"My car is " + myCar.age() + " years old.";

クラスメソッドにパラメータを渡すこともできます:

例

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}

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

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age(year) + " years old.";