本記事では、JavaScriptのクラス構文における「スタティックフィールド」と「スタティックメソッド」について解説します。 これらは、クラス全体で共有されるデータや機能を実現するための重要な仕組みです。

スタティックフィールドとは

スタティックフィールド（静的フィールド）は、クラスのインスタンスではなく、クラス自体に直接関連付けられるプロパティです。 通常のフィールドやメソッドはインスタンスごとに異なる値を保持しますが、スタティックフィールドはすべてのインスタンス間で共有されます。

例を以下に示します。

class Counter {
    static count = 0; // スタティックフィールド

    constructor() {
        Counter.count++;
    }
}

// インスタンスを作成
const a = new Counter();
const b = new Counter();

console.log(Counter.count); // 出力: 2
    

この例では、Counter.countはスタティックフィールドであり、クラス全体で共有される値です。 インスタンスを作成するたびに、このフィールドの値が増加します。

スタティックメソッドとは

スタティックメソッド（静的メソッド）は、インスタンスではなくクラス自体で呼び出されるメソッドです。 通常のメソッドと異なり、スタティックメソッド内ではインスタンスに直接アクセスすることはできません。 クラス固有の操作やユーティリティ関数を実装する際に利用されます。

例を以下に示します。

class MathUtils {
    static add(a, b) {
        return a + b;
    }

    static subtract(a, b) {
        return a - b;
    }
}

// スタティックメソッドの呼び出し
console.log(MathUtils.add(5, 3));       // 出力: 8
console.log(MathUtils.subtract(5, 3)); // 出力: 2
    

この例では、MathUtilsクラスのaddおよびsubtractメソッドはスタティックメソッドであり、 クラス名を通じて直接呼び出されています。

数学的な表現と対応

スタティックメソッドは数学的な関数と似ています。例えば、以下のような関数 \\(f(x, y) = x + y\\) を考えると、 スタティックメソッドとして表現することができます。

class MathFunction {
    static f(x, y) {
        return x + y;
    }
}

console.log(MathFunction.f(2, 3)); // 出力: 5
    

MathJaxを使用して式を表現すると、スタティックメソッドは以下のような数学的操作をエミュレートします。

\\[ f(x, y) = x + y \\]

スタティックフィールドとメソッドのユースケース

スタティックフィールドとスタティックメソッドは、以下のような状況で役立ちます。

• クラス全体で共有されるデータを保持する（例: グローバルカウンター）。
• インスタンスに依存しないユーティリティ関数を提供する。
• ファクトリメソッドを実装する。

以下はファクトリメソッドの例です。

class User {
    constructor(name) {
        this.name = name;
    }

    static createGuestUser() {
        return new User("Guest");
    }
}

const guest = User.createGuestUser();
console.log(guest.name); // 出力: Guest
    

スタティックメソッドの制約

スタティックメソッドはインスタンスに直接アクセスできません。 そのため、スタティックメソッド内でthisを使用すると予期しない結果になる可能性があります。 必要に応じてクラスのインスタンスを明示的に渡す必要があります。

まとめ

スタティックフィールドとスタティックメソッドは、JavaScriptでクラス全体に関連付けられるデータや機能を実装するための便利な手段です。 インスタンスに依存しない操作や、全体で共有される状態を管理する際に非常に有効です。