7.3 クラス構文
前項のプロトタイプベースは、コンストラクタ関数のメモリを余計に消費してしまう問題を解決しましたが、プロトタイプベースの記述は独特であり、Java などの「クラスベース」の言語に慣れた開発者にとっては、記述が複雑で直感的ではないという難点がありました。
この問題を解決するために、JavaScript にも 2015 年（ES6）よりクラス構文が導入されました。
JavaScript の内部的には、変わらずプロトタイプチェーンの仕組みで動いていますが、クラス構文の書き方は Java などの言語に近く、非常に直感的で読みやすいものになっています。これにより、開発者はプロトタイプを意識しすぎることなく、より安全な形のオブジェクト指向プログラミングができるようになりました。
現在では、このクラス構文を用いて JavaScript を記述するのが標準になっています。
書式 class：
class クラス名{
constructor (引数….){
//初期化処理をここに書く
}
メソッド 1 (引数….){}
メソッド 2 (引数….){}
…..
}
7.3.1 クラス構文を用いたプログラム
クラス構文を用いて JavaScript を記述するやり方を学んでみましょう。
ソースフォルダ：public/ch07
ファイル名：class.js
➢ class.html
前の項で作った ch07/constructor.html をコピーし、ch07 にペーストしてください。
その際に、ファイル名を class.html に変更します。
ファイル内の constructor.html や constructor.js の記述も、class.html や class.js に修正します。
➢ class.js
// class.js
// クラスを使ってユーザーの設計図を定義します
class Member {
// コンストラクタ：初期化処理を行います
constructor(name, age) {
this.name = name;
this.age = age;
}
// メソッド：prototypeを意識せず、直接クラス内に記述できます
greet() {
return `My name is ${this.name}!`;
}
}
// インスタンスの作成方法はコンストラクタ関数の時と同じです
const member1 = new Member("Alice", 25);
alert(`クラスでの実行結果: ${member1.greet()}`);
実行結果
解説
4 行目で、これまでの function キーワードの代わりに class というキーワードを用いて Member という名前の新しいクラスを定義しています。
4: class Member {
続く 6 行目で constructor というキーワードを使い、name と age で渡された引数を、引数と同じ名前のキーを持つプロパティの中に this キーワードで値を格納しています。ここでの constructor は、new された瞬間に自動で動く特別なメソッドで、Java などの他の言語で見慣れたクラスのコンストラクタと同じ挙動です。
6: constructor(name, age) {
7: this.name = name;
8: this.age = age;
9: }
11 行目では greet() という名前のメソッドをクラスの中に定義しています。
メソッドの定義も、function キーワードが不要になり非常にスッキリとした記述になっています。
11: greet() {
12: return `My name is ${this.name}!`;
13: }
クラスのインスタンスを作るときは、これまでのコンストラクタ関数と一緒です。プロパティやメソッドの利用の仕方も、これまでと変わりません。
18: const member1 = new Member("Alice", 25);
19:
20: alert(`クラスでの実行結果: ${member1.greet()}`);