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` 構文を用いる必要性は低いです。

単一のオブジェクトを生成する場合
複雑なプロトタイプ操作が必要な場合

参考資料

クラス - JavaScript | MDN

QA

Q1. `class` 構文はES5以前の環境では使えますか？: A1. いいえ、`class` 構文はES6 (ECMAScript 2015) から導入された機能です。ES5以前の環境で使用する場合は、Babelなどのトランスパイラを使用してES5互換のコードに変換する必要があります。
Q2. `class` 構文とプロトタイプベースの手法のどちらを使うべきですか？: A2. 状況によります。`class` 構文は可読性や再利用性の面で優れていますが、プロトタイプベースの手法は柔軟性が高いという特徴があります。それぞれのメリット・デメリットを理解した上で、適切な方を選択してください。
Q3. `class` 構文で定義したクラスはどのように継承できますか？: A3. `extends` キーワードを使用して継承できます。継承元のクラスをスーパークラス、継承先のクラスをサブクラスと呼びます。サブクラスはスーパークラスのプロパティやメソッドを引き継ぎ、独自の機能を追加することができます。

その他の参考記事:jquery class 削除