JavaScriptの静的変数解説

JavaScriptにおける静的変数について

静的変数 (static variable) は、JavaScriptにおいて、クラスのインスタンスではなくクラス自体に属する変数です。つまり、クラスのすべてのインスタンスが同じ静的変数を共有します。

静的変数の宣言方法

JavaScriptでは、クラス内の変数を static キーワードで宣言することで静的変数とします。

class MyClass {
  static staticProperty = "This is a static property";
}

静的変数のアクセス方法

静的変数にアクセスするには、クラス名を使用してドット表記を使います。

console.log(MyClass.staticProperty); // Output: "This is a static property"

静的変数の用途

静的変数は、以下の場合に有用です:

• シングルトンパターンの実装
  静的変数を活用して、クラスのインスタンスを1つだけ生成するシングルトンパターンを実装することができます。
• ユーティリティ関数の作成
  静的関数をクラス内に定義し、クラスのインスタンスを作成せずに直接呼び出すことができます。
• クラスレベルのデータの保持
  クラス全体で共有するデータを格納するのに適しています。例えば、クラスのバージョン番号やデフォルト値を保持することができます。

注意点

• 静的変数へのアクセスは、クラス名を使用して行われるため、インスタンス変数とは異なるスコープを持ちます。
• 静的変数は、クラスのインスタンスに属するのではなく、クラス自体に属します。そのため、インスタンス間のデータの共有が可能ですが、インスタンス固有のデータは保持できません。

JavaScriptの静的変数解説: 実践的な例

静的変数の基本的な使い方

class Counter {
  static count = 0;

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

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

console.log(Counter.count); // Output: 2

• インスタンスが作成されるたびに count がインクリメントされます。
• すべての Counter インスタンスが同じ count 変数を共有します。
• Counter.count はクラスレベルの静的変数です。

静的メソッドと静的変数の連携

class Calculator {
  static PI = 3.14159;

  static calculateArea(radius) {
    return Calculator.PI * radius * radius;
  }
}

const area = Calculator.calculateArea(5);
console.log(area); // Output: 78.53975

• 静的メソッドは静的変数にアクセスできます。
• Calculator.calculateArea は静的メソッドで、円面積を計算します。
• Calculator.PI は静的変数として円周率を保持します。

シングルトンパターンの実装

class Singleton {
  static instance = null;

  static getInstance() {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance   ;
  }
}

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();

console.log(instance1 === instance2); // Out   put: true

• 常に同じインスタンスが返されるため、シングルトンパターンが実現されます。
• Singleton.getInstance は静的メソッドで、インスタンスを取得します。

静的変数の注意点

• 静的変数はクラスのすべてのインスタンスで共有されます。
• 静的変数はクラス名を使用してアクセスされます。
• 静的変数はクラスレベルのデータであり、インスタンス固有のデータではありません。

グローバル変数

• 欠点
  グローバルスコープで定義されるため、名前空間の衝突やコードの可読性が低下する可能性がある。
• 利点
  シンプルで直接的なアクセスが可能。

let globalCounter = 0;

function incrementCounter() {
  globalCounter++;
}

オブジェクトのプロパティ

• 欠点
  オブジェクトのインスタンスごとに異なる値を持つため、クラスレベルの共有データには適さない。
• 利点
  オブジェクトのメンバーとして定義されるため、名前空間の衝突を回避できる。

const counterObject = {
  count: 0
};

function incrementCounterObject() {
  counterObject.count++;
}

クロージャ

• 欠点
  理解が難しく、誤用するとコードの可読性が低下する可能性がある。
• 利点
  関数の内部で定義された変数を外部からアクセスできるため、クラスレベルの共有データを実現できる。

function createCounter() {
  let count = 0;

  return function incrementCounter() {
    count++;
    return count;
  };
}

const incrementCounter = createCounter();
console.log(incrementCounter()); // Output: 1
console.log(incrementCounter()); // Output: 2

モジュールシステム

• 欠点
  複雑なプロジェクトでは学習コストが高くなる可能性がある。
• 利点
  コードのモジュール化と名前空間の管理が可能。

// counter.js
let count = 0;

export function incrementCounter() {
  count++;
  return count;
}

// main.js
import { incrementCounter } from './counter.js';

console.log(incrementCounter()); // Output: 1
console.log(incrementCounter()); // Output: 2