静的メソッドと静的プロパティの使い方 | クラスベースのオブジェクト指向 | JavaScript 超完全入門 基本から発展までのすべて

2024.09.21
スポンサーリンク
スポンサーリンク
amazon
スマイルSALE
--:--:--
～
ad. 価格範囲を指定して商品を探せます

静的メソッドとプロパティとは？

JavaScriptのクラスでは、インスタンスではなくクラス自体に属する静的メソッドと静的プロパティを定義できます。

これらはstaticキーワードを使って定義し、インスタンスを作成しなくてもクラス名から直接アクセスできます。

例えば、計算処理や設定値など、特定のインスタンスに依存しない処理や値をまとめたい場合に便利です。

静的メソッドの定義と使い方

静的メソッドは、クラス自体に属するメソッドです。

インスタンスを作成せずに、クラス名から直接呼び出します。

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

console.log(MathOperations.add(5, 10));

// 15

この例では、MathOperationsクラスにadd()という静的メソッドを定義しています。

  1. staticを付けてメソッドを定義します。
  2. new MathOperations()のようにインスタンスを作成する必要はありません。
  3. MathOperations.add()のようにクラス名から直接呼び出します。

静的プロパティの定義と使い方

静的プロパティは、クラス自体に属するプロパティです。

クラスに関連する定数や共通設定を持たせたい場合に利用できます。

class Company {
    static companyName = "Tech Innovators";
}

console.log(Company.companyName);

// Tech Innovators

この例では、CompanyクラスにcompanyNameという静的プロパティを定義しています。

インスタンスではなく、Company.companyNameのようにクラス名からアクセスします。

静的メソッドと静的プロパティの特徴

項目 説明
静的メソッド クラスに直接属するメソッド。インスタンスを作らずに呼び出せる。
静的プロパティ クラスに直接属するプロパティ。共通の値や設定を保持できる。
アクセス方法 クラス名.メソッド名、クラス名.プロパティ名でアクセスする。
インスタンスからのアクセス 基本的にはインスタンスからではなく、クラス名からアクセスする。

静的メソッドの活用例

静的メソッドは、インスタンスごとの状態を必要としない共通処理に向いています。

例えば、温度変換のようなユーティリティ処理は静的メソッドとして定義すると分かりやすくなります。

class TemperatureConverter {
    static toCelsius(fahrenheit) {
        return (fahrenheit - 32) * 5 / 9;
    }

    static toFahrenheit(celsius) {
        return (celsius * 9 / 5) + 32;
    }
}

console.log(TemperatureConverter.toCelsius(68));
console.log(TemperatureConverter.toFahrenheit(20));

// 20
// 68

この例では、温度変換の処理をクラスにまとめています。

温度変換には個別のインスタンス情報が不要なため、静的メソッドとして定義するのに適しています。

静的プロパティの活用例

静的プロパティは、クラスに関連する共通設定や定数を管理する場合に便利です。

class GameSettings {
    static maxPlayers = 4;
    static gameName = "Super Fun Game";

    static getSettings() {
        return `Game: ${this.gameName}, Max Players: ${this.maxPlayers}`;
    }
}

console.log(GameSettings.getSettings());

// Game: Super Fun Game, Max Players: 4

この例では、ゲーム名や最大人数を静的プロパティとして保持しています。

getSettings()も静的メソッドなので、クラス名から直接呼び出せます。

インスタンスメソッドとの違い

静的メソッドはクラス自体に属し、インスタンスメソッドは作成されたインスタンスに属します。

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

    greet() {
        return `Hello, ${this.name}`;
    }

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

const user = new User("Taro");

console.log(user.greet());

const guest = User.createGuest();

console.log(guest.greet());

// Hello, Taro
// Hello, Guest

greet()は各ユーザーのnameを使うため、インスタンスメソッドです。

一方、createGuest()はクラス全体に関係する処理なので、静的メソッドとして定義しています。

静的メソッドを使うときの注意点

  • 静的メソッド内のthisはインスタンスではなくクラスを指す。
  • インスタンス固有のプロパティには直接アクセスできない。
  • インスタンスごとの状態を扱う処理には向いていない。
  • 共通処理や補助的な処理に使うと分かりやすい。

初心者が知っておきたいポイント

  • staticを付けると、クラス自体に属するメソッドやプロパティになる。
  • 静的メソッドはインスタンスを作らずに呼び出せる。
  • 静的プロパティはクラス全体で共有する値に使える。
  • インスタンスごとの値を使う処理は通常のメソッドにする。
  • ユーティリティ関数や設定値をクラスにまとめたい場合に便利である。

まとめ

  • 静的メソッドと静的プロパティは、クラス自体に属する機能である。
  • staticキーワードを使って定義する。
  • インスタンスを作成せず、クラス名から直接アクセスできる。
  • 静的メソッドはユーティリティ処理やファクトリメソッドに向いている。
  • 静的プロパティはクラスに関係する共通設定や定数を扱う場合に便利である。

スポンサーリンク