JavaScript クラス
ES6とも呼ばれるECMAScript2015では、JavaScriptクラスが導入されました。
JavaScriptクラスは、JavaScriptオブジェクトのテンプレートです。
JavaScriptクラスの構文
classキーワードを使用してクラスを作成します。
constructor()という名前のメソッドを常に追加します。
構文
class ClassName {
constructor() { ... }
}
例
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
上記の例では、「Car」という名前のクラスを作成します。
このクラスには、「name」と「year」という2つの初期プロパティがあります。
JavaScriptクラスはオブジェクトでは無い。
それはJavaScriptオブジェクトのテンプレートです。
クラスの使用
クラスを持っている場合、そのクラスを使用してオブジェクトを作成できます。
上の例では、Carクラスを使用して2つのCarオブジェクトを作成しています。
コンストラクターメソッドは、新しいオブジェクトが作成されるときに自動的に呼び出されます。
コンストラクターメソッド
コンストラクターメソッドは特別なメソッドです。
- 正確な名前「コンストラクター」が必要です
- 新しいオブジェクトが作成されると自動的に実行されます
- オブジェクトのプロパティを初期化するために使用されます
コンストラクターメソッドを定義しない場合、JavaScriptは空のコンストラクターメソッドを追加します。
クラスメソッド
クラスメソッドは、オブジェクトメソッドと同じ構文で作成されます。
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 =
"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.";
ブラウザのサポート
次の表は、JavaScriptのクラスを完全にサポートする最初のブラウザーバージョンを示しています。
| Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
| 2016年3月 | 2015年7月 | 2016年3月 | 2015年10月 | 2016年3月 |
JavaScriptクラスについては、このチュートリアルの後半でさらに詳しく学習します。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。