JavaScriptにおける静的変数の具体的な実装方法
JavaScriptにおける静的変数
関数オブジェクトのプロパティを利用する
JavaScriptの関数はオブジェクトとして扱えます。つまり、関数にプロパティを定義することができ、そのプロパティを静的変数のように利用することができます。
function Counter() {
this.count = 0; // インスタンス変数
// 静的変数
Counter.totalCount = 0;
}
Counter.prototype.increment = function() {
this.count++;
Counter.totalCount++;
};
const counter1 = new Counter();
const counter2 = new Counter();
counter1.increment();
counter2.increment();
console.log(counter1.count); // 1
console.log(counter2.count); // 1
console.log(Counter.totalCount); // 2
この例では、Counter 関数に totalCount というプロパティを定義しています。このプロパティは、すべてのインスタンスで共有される静的変数として機能します。
クラスプロパティを利用する
ES6以降では、クラスプロパティを使って静的変数を定義することができます。
class Counter {
static totalCount = 0; // 静的変数
constructor() {
this.count = 0;
}
increment() {
this.count++;
Counter.totalCount++;
}
}
const counter1 = new Counter();
const counter2 = new Counter();
counter1.increment();
counter2.increment();
console.log(counter1.count); // 1
console.log(counter2.count); // 1
console.log(Counter.totalCount); // 2
この例では、Counter クラスに static キーワードを使って totalCount プロパティを定義しています。このプロパティは、クラス自体に属する静的変数として機能します。
上記2つの方法は、それぞれ異なる利点と欠点があります。
- 関数オブジェクトのプロパティを利用する方法
- 利点: シンプルで分かりやすい
- 欠点: 関数ごとに静的変数を管理する必要がある
- クラスプロパティを利用する方法
- 利点: クラスごとに静的変数を管理できる
- 欠点: ES6以降でのみ利用可能
一般的には、クラスを使用している場合はクラスプロパティを利用する方法がおすすめです。一方、関数のみで静的変数を管理したい場合は、関数オブジェクトのプロパティを利用する方法が適しています。
静的変数の注意点
静的変数は、すべてのインスタンスで共有されるため、使い方を誤ると予期せぬ動作を引き起こす可能性があります。以下のような点に注意して使用する必要があります。
- 静的変数は、インスタンスごとに異なる値を保持するように設計されていません。
- 静的変数を変更する場合は、スレッドセーフ対策が必要となる場合があります。
- 静的変数の使いすぎは、コードを複雑化する可能性があります。
JavaScriptには、ネイティブな静的変数の概念はありませんが、擬似的な静的変数の機能を実現する方法はいくつかあります。状況に応じて適切な方法を選択し、注意点を踏まえて使用することが重要です。
静的変数を使用したサンプルコード
function Counter() {
this.count = 0; // インスタンス変数
// 静的変数
Counter.totalCount = 0;
}
Counter.prototype.increment = function() {
this.count++;
Counter.totalCount++;
};
const counter1 = new Counter();
const counter2 = new Counter();
counter1.increment();
counter2.increment();
console.log(counter1.count); // 1
console.log(counter2.count); // 1
console.log(Counter.totalCount); // 2
class Counter {
static totalCount = 0; // 静的変数
constructor() {
this.count = 0;
}
increment() {
this.count++;
Counter.totalCount++;
}
}
const counter1 = new Counter();
const counter2 = new Counter();
counter1.increment();
counter2.increment();
console.log(counter1.count); // 1
console.log(counter2.count); // 1
console.log(Counter.totalCount); // 2
説明
- 上記のコードは、
Counterという名前のクラスまたは関数を定義します。 Counterクラスまたは関数には、countというインスタンス変数とtotalCountという静的変数が定義されています。incrementメソッドは、countインスタンス変数を 1 増分し、totalCount静的変数を 1 増分します。counter1とcounter2という 2 つのインスタンスが作成され、それぞれincrementメソッドが呼び出されます。- コンソールログには、
counter1.count、counter2.count、Counter.totalCountの値が出力されます。
このサンプルコードでは、静的変数を使用して、すべてのインスタンスで共有されるカウンタを実装しています。
静的変数は、以下のようなさまざまな場面で使用することができます。
- アプリケーション全体で共有される設定値を格納する
- 累積的なカウント値を保持する
- シングルトンインスタンスを管理する
- 名前空間を作成する
静的変数は、JavaScriptで便利に使用できる機能ですが、使い方を誤ると予期せぬ動作を引き起こす可能性があります。静的変数の利点と欠点を理解した上で、適切な場面で使用することが重要です。
JavaScriptで静的変数を実現するその他の方法
クロージャを利用する
クロージャは、関数とそのスコープを閉ざした状態で保持する仕組みです。この機能を利用して、静的変数のように振る舞う変数を実装することができます。
function createCounter() {
let count = 0; // 静的変数のように振る舞う変数
return function() {
count++;
return count;
};
}
const counter1 = createCounter();
const counter2 = createCounter();
console.log(counter1()); // 1
console.log(counter2()); // 1
console.log(counter1()); // 2
console.log(counter2()); // 2
この例では、createCounter 関数は、内部で count 変数を持つ関数オブジェクトを生成して返します。生成された関数オブジェクトは、createCounter 関数内で定義されたスコープにアクセスできるため、count 変数は静的変数のように振る舞います。
- クロージャの挙動を理解する必要がある
Symbolを利用する
Symbolは、ユニークな識別子を生成するための組み込みオブジェクトです。Symbolを利用して、クラスごとに固有の静的変数を定義することができます。
class Counter {
static #totalCount = Symbol(); // クラス固有の静的変数
constructor() {
this.count = 0;
}
increment() {
this.count++;
Counter[this.#totalCount]++;
}
get totalCount() {
return Counter[this.#totalCount];
}
}
const counter1 = new Counter();
const counter2 = new Counter();
counter1.increment();
counter2.increment();
console.log(counter1.count); // 1
console.log(counter2.count); // 1
console.log(counter1.totalCount); // 2
console.log(counter2.totalCount); // 2
この例では、Counter クラスに #totalCount というSymbolプロパティを定義しています。Symbolプロパティは、クラスごとに固有の静的変数を格納するための識別子として使用されます。
- クラスごとに固有の静的変数を定義できる
- Symbolを使ったプログラミングは、洗練された印象を与える
- Symbolは比較的新しい機能であり、古いブラウザではサポートされていない場合がある
WeakMapを利用する
WeakMapは、キーと値のペアを格納するコレクションですが、キーがガベージコレクションされると自動的に削除されます。この特性を利用して、静的変数を保持するオブジェクトを作成することができます。
const weakMap = new WeakMap();
class Counter {
constructor() {
this.count = 0;
if (!weakMap.has(this)) {
weakMap.set(this, { totalCount: 0 });
}
const classData = weakMap.get(this);
classData.totalCount++;
this.totalCount = classData.totalCount;
}
increment() {
this.count++;
const classData = weakMap.get(this);
classData.totalCount++;
this.totalCount = classData.totalCount;
}
}
const counter1 = new Counter();
const counter2 = new Counter();
counter1.increment();
counter2.increment();
console.log(counter1.count); // 1
console.log(counter2.count); // 1
console.log(counter1.totalCount); // 2
console.log(counter2.totalCount); // 2
この例では、WeakMap オブジェクトを使用して、Counter インスタンスごとに totalCount プロパティを格納するオブジェクトを保持しています。WeakMap のキーは Counter インスタンス自身であり、値は totalCount プロパティを含むオブジェクトです。
- ガベージコレクションの影響を受けない
- コードが簡潔になる
上記で紹介した方法は、それぞれ異なる特徴と利
javascript variables static
