静的メソッドの利用 | 静的メソッドとプロパティ | JavaScript 超完全入門 基本から発展までのすべて

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

静的メソッドとは？

JavaScriptのクラスには、静的メソッド（staticメソッド）を定義できます。静的メソッドは、クラスから生成したインスタンスではなく、クラス自体に属するメソッドです。

インスタンスを作成しなくてもクラス名から直接呼び出せるため、共通の計算処理、入力値の検証、インスタンス生成を補助する処理などに利用されます。

JavaScriptに標準で用意されているMath.max()やObject.keys()なども、静的メソッドの代表的な例です。

静的メソッドの定義

静的メソッドは、メソッド名の前にstaticキーワードを付けて定義します。

通常のインスタンスメソッドは生成したオブジェクトごとに利用されますが、静的メソッドはクラス全体で共通の機能を提供します。

静的メソッドの定義と利用例

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

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

console.log(Calculator.add(10, 5));      // 15
console.log(Calculator.subtract(10, 5)); // 5

このコードでは、Calculatorクラスに2つの静的メソッドを定義しています。

  1. staticを付けてメソッドを定義します。
  2. インスタンスを生成せずに、Calculator.add()のようにクラス名から呼び出します。
  3. 共通の計算処理をまとめることで、複数の場所から再利用できます。

静的メソッドはクラス自身に属するため、インスタンスから呼び出すことはできません。

const calc = new Calculator();

calc.add(10, 5);
// TypeError

このように、静的メソッドは必ずクラス名から呼び出します。

静的メソッドの利点

静的メソッドには、次のような利点があります。

  • インスタンスごとに異なる状態を持たない処理をまとめられる。
  • ユーティリティ関数をクラスに集約でき、再利用しやすくなる。
  • インスタンス生成前でも利用できる。
  • 関連する処理をクラス内へまとめられるため、コードの整理に役立つ。

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

どちらもクラス内に定義しますが、呼び出し方法や利用目的が異なります。

静的メソッド インスタンスメソッド
クラス自体に属する インスタンスに属する
クラス名から呼び出す インスタンスから呼び出す
インスタンス生成は不要 インスタンス生成が必要
共通処理や補助処理に向いている インスタンス固有の処理に向いている
thisはクラス自身を指す thisはインスタンスを指す

静的メソッドとインスタンスメソッドの例

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

    // インスタンスメソッド
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }

    // 静的メソッド
    static description() {
        console.log("This is a Person class.");
    }
}

const person = new Person("Taro");

person.greet();

Person.description();

このコードでは、それぞれ次のような違いがあります。

  1. greet()はインスタンスメソッドなので、person.greet()のように呼び出します。
  2. description()は静的メソッドなので、Person.description()のように呼び出します。
  3. 静的メソッドはインスタンスのデータを直接扱うことはできません。

ユーティリティ関数としての利用

静的メソッドは、インスタンスに依存しない共通処理をまとめる用途によく利用されます。

例えば、数値の計算、文字列の加工、日付の変換、入力値の検証などは、オブジェクトの状態を持つ必要がないため、静的メソッドとして実装すると分かりやすくなります。

JavaScript標準ライブラリのMathやObjectにも、多くの静的メソッドが用意されています。

静的メソッドを使ったユーティリティ関数の例

class MathUtil {
    static square(num) {
        return num * num;
    }

    static cube(num) {
        return num * num * num;
    }
}

console.log(MathUtil.square(3)); // 9
console.log(MathUtil.cube(3));   // 27

この例では、MathUtilクラスへ数値計算用の静的メソッドを定義しています。

インスタンスを生成する必要がないため、必要なときにすぐ利用できます。

静的メソッドから静的メソッドを呼び出す

静的メソッドの中から、同じクラスの他の静的メソッドを呼び出すこともできます。

その場合は、クラス名またはthisを利用します。

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

    static addThree(a, b, c) {
        return this.add(a, b) + c;
    }
}

console.log(Calculator.addThree(2, 3, 4)); // 9

静的メソッド内のthisは、インスタンスではなくクラス自身を表します。

静的メソッドでthisを使用する

インスタンスメソッドではthisはインスタンスを指しますが、静的メソッドではクラス自身を指します。

class Sample {
    static show() {
        console.log(this.name);
    }
}

Sample.show(); // Sample

このように、静的メソッドではクラスの情報へアクセスしたり、他の静的メソッドを呼び出したりできます。

静的メソッドを利用する際の注意点

  • 静的メソッドはインスタンスから呼び出すことはできません。
  • 静的メソッドからインスタンスプロパティ（this.nameなど）は参照できません。
  • インスタンスの状態を扱う処理は、インスタンスメソッドとして実装します。
  • 共通処理や補助処理だけを静的メソッドにすると、クラスの役割が分かりやすくなります。
  • 静的メソッドを作り過ぎると、単なる関数の集まりになってしまうため、本当にクラスへ属させるべき処理かを考えて設計することが重要です。

まとめ

  • 静的メソッドは、クラス自身に属するメソッドである。
  • staticキーワードを付けて定義する。
  • インスタンスを生成せずに、クラス名から直接呼び出せる。
  • ユーティリティ関数や共通処理の実装に適している。
  • 静的メソッド内のthisはクラス自身を表す。
  • 静的メソッドから他の静的メソッドを呼び出すこともできる。
  • インスタンスの状態を扱う処理は、インスタンスメソッドとして実装する。
  • MathやObjectなどの標準ライブラリでも、静的メソッドが広く利用されている。

スポンサーリンク