ES2022以降、大幅に進化したJavaScriptのclass

JavaScriptのクラスは、EcmaScript2015 (ES6)で初めて導入されて以来、進化を続けています。
特に、ES2022以降ではクラスの表現力や柔軟性が大きく向上し、よりモダンで効率的なコードが書けるようになりました。

本記事では、ES2022以降でのクラスの新機能とその活用法について解説します。

なお、ES2021以前のクラスについては、こちらの記事で解説しています。

1 クラス直下のフィールド宣言
- 1.1 従来のclassフィールド定義方法（ES2021まで）
2 ES2022でのclassフィールドの定義方法
3 静的フィールド (Static Fields)
- 3.1 特徴
4 プライベートフィールドと静的プライベートフィールド
5 静的ブロック (Static Blocks)
- 5.1 特徴
- 5.2 静的ブロックとコンストラクタとの初期化の違い
6 まとめ

クラス直下のフィールド宣言

JavaScriptでは、長らくクラスのフィールドを宣言するためにconstructorメソッド内で初期化する必要がありました。
しかし、ES2022以降では、クラス直下にフィールドを直接宣言し、初期値を設定することが可能になりました。
このセクションでは、従来の方法と新しい方法を比較し、進化したコードの簡潔さと可読性を見ていきます。

従来のclassフィールド定義方法（ES2021まで）

ES2021以前のコードでは、以下のようにconstructorを使用してフィールドを初期化していました。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const person = new Person("Alice", 30);
console.log(person.name); // "Alice"
console.log(person.age);  // 30

ES2022でのclassフィールドの定義方法

ES2022では、クラス直下でフィールドを宣言できるようになり、より簡潔なコードが書けるようになりました。

class Person {
  name = "Alice";
  age = 30;
}

const person = new Person();
console.log(person.name); // "Alice"
console.log(person.age);  // 30

静的フィールド (Static Fields)

ES2022で静的フィールドが正式に導入されました。これにより、static修飾子を使ってクラス直下で静的プロパティを簡単に宣言できるようになりました。

class Config {
  static appName = "My Application";
  static version = "1.0.0";
}

console.log(Config.appName); // "My Application"
console.log(Config.version); // "1.0.0"

特徴

クラス全体で共有されるプロパティを管理するのに最適。
明示的に初期化でき、静的なデータを簡潔に設定可能。
プライベートな静的フィールド（後述）と組み合わせることで、データの隠蔽性を確保可能。

プライベートフィールドと静的プライベートフィールド

「#」記号を使用することで、クラス内にプライベートフィールドを定義できます。また、静的フィールドでもプライベート化が可能になり、データのカプセル化が一層容易になりました。

class Counter {
  #count = 0; // プライベートフィールド

  static #instanceCount = 0; // 静的プライベートフィールド

  constructor() {
    Counter.#instanceCount++; // インスタンス数をカウント
  }

  increment() {
    this.#count++;
  }

  getCount() {
    return this.#count;
  }

  static getInstanceCount() {
    return this.#instanceCount;
  }
}

const counter1 = new Counter();
const counter2 = new Counter();

counter1.increment();

console.log(counter1.getCount()); // 1
console.log(Counter.getInstanceCount()); // 2

静的ブロック (Static Blocks)

クラスの静的な初期化処理を実装するための新しい構文が追加されました。staticブロックを使用することで、複雑な初期化ロジックを記述できます。

静的ブロックは、スタティック・イニシャライザー（Static Initializer）とも呼ばれます。

class Settings {
  static theme;
  static language;

  static {
    // 静的プロパティの初期化
    this.theme = "dark";
    this.language = "en";
  }
}

console.log(Settings.theme); // "dark"
console.log(Settings.language); // "en"

特徴

静的フィールドやプロパティを複雑な条件に基づいて初期化できる。
クラス全体の設定をより簡潔に管理可能。

静的ブロックとコンストラクタとの初期化の違い

項目	静的ブロック	コンストラクタ
用途	静的プロパティやクラス全体の初期化を行う	インスタンス固有のプロパティやデータの初期化を行う
実行タイミング	クラスが読み込まれたとき、一度だけ実行	インスタンスが生成されるたびに実行
アクセスできる対象	クラスの静的プロパティおよびメソッド	クラスのインスタンスプロパティとメソッド
構文	`static { ... }`ブロック内で記述	`constructor`メソッド内で記述
スコープ	クラス全体（静的コンテキスト）	個別のインスタンス
使用ケース	クラス全体に共通する設定や静的データの初期化	インスタンスごとに異なるデータの設定や動的な初期化
実行回数	クラスごとに1回のみ	インスタンス生成ごとに実行