JSのclass構文はいつ使う？
JavaScriptでオブジェクト指向プログラミングを行う際、従来はプロトタイプベースの手法が主流でした。しかし、 ECMAScript 2015 (ES6) から導入された `class` 構文を使うことで、より馴染みやすく、可読性の高いコードでオブジェクト指向を実現できるようになりました。
class構文の基礎
`class` 構文は、オブジェクトの設計図となる「クラス」を定義するための構文です。クラスは、オブジェクトの状態を表す「プロパティ」と、オブジェクトの動作を表す「メソッド」をまとめたものです。
`class` 構文の基本的な記述方法は以下の通りです。
class クラス名 {
constructor(引数1, 引数2, ...) { // コンストラクタ
this.プロパティ名1 = 引数1;
this.プロパティ名2 = 引数2;
...
}
メソッド名1(引数1, 引数2, ...) {
// メソッドの処理
}
メソッド名2(引数1, 引数2, ...) {
// メソッドの処理
}
...
}
constructorは、クラスからオブジェクト（インスタンス）を生成する際に呼ばれる特別なメソッドです。オブジェクトの初期化を行います。thisは、生成されるインスタンス自身を参照します。
class構文を使うメリット
従来のプロトタイプベースの手法と比較して、`class` 構文には以下のメリットがあります。
| メリット | 説明 |
|---|---|
| コードの可読性向上 | 他のオブジェクト指向言語と似た構文のため、JavaScriptに不慣れな人でも理解しやすい。 |
| コードの再利用性向上 | クラスを定義することで、オブジェクトの構造や振る舞いを簡単に再利用できる。 |
| 継承の実装が容易 | `extends` キーワードを用いることで、既存のクラスを継承した新しいクラスを簡単に定義できる。 |
class構文の使用例
例えば、「人」を表すクラスを `class` 構文で定義してみましょう。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`こんにちは、私の名前は${this.name}です。${this.age}歳です。`);
}
}
const person1 = new Person("山田太郎", 20);
person1.greet(); // 出力結果: "こんにちは、私の名前は山田太郎です。20歳です。"
const person2 = new Person("鈴木花子", 25);
person2.greet(); // 出力結果: "こんにちは、私の名前は鈴木花子です。25歳です。"
上記コードでは、`Person` クラスを定義し、名前と年齢を引数に取るコンストラクタと、挨拶をする `greet` メソッドを定義しています。そして、`new` キーワードを使って `Person` クラスのインスタンスを生成し、それぞれのインスタンスに対して `greet` メソッドを呼び出しています。
いつclass構文を使うべきか？
以下の場合は、`class` 構文の使用を検討するべきです。
- 複数のオブジェクトを生成する必要がある場合
- オブジェクト指向の概念（カプセル化、継承、ポリモーフィズム）を活用したい場合
- コードの可読性や再利用性を向上させたい場合
一方、以下のような場合は、`class` 構文を用いる必要性は低いです。
- 単一のオブジェクトを生成する場合
- 複雑なプロトタイプ操作が必要な場合
参考資料
QA
- Q1. `class` 構文はES5以前の環境では使えますか？
- A1. いいえ、`class` 構文はES6 (ECMAScript 2015) から導入された機能です。ES5以前の環境で使用する場合は、Babelなどのトランスパイラを使用してES5互換のコードに変換する必要があります。
- Q2. `class` 構文とプロトタイプベースの手法のどちらを使うべきですか？
- A2. 状況によります。`class` 構文は可読性や再利用性の面で優れていますが、プロトタイプベースの手法は柔軟性が高いという特徴があります。それぞれのメリット・デメリットを理解した上で、適切な方を選択してください。
- Q3. `class` 構文で定義したクラスはどのように継承できますか？
- A3. `extends` キーワードを使用して継承できます。継承元のクラスをスーパークラス、継承先のクラスをサブクラスと呼びます。サブクラスはスーパークラスのプロパティやメソッドを引き継ぎ、独自の機能を追加することができます。
その他の参考記事:jquery class 削除