JavaScriptでクラス変数を効果的に使う方法とその注意点まとめ

●JavaScriptのクラス変数とは？
●クラス変数を使うメリット
●クラス変数の注意点
●クラス変数の応用例
まとめ

●JavaScriptのクラス変数とは？

JavaScriptのクラスを使い始めたばかりの頃、クラス変数とインスタンス変数の違いに戸惑うことがありますよね。

でも、大丈夫です。

ここではクラス変数について、わかりやすく解説していきます。

○クラス変数の定義と特徴

クラス変数は、クラス自体に属する変数のことを指します。

インスタンスを作成しなくても、クラス名からドット記法でアクセスできるのが特徴です。

つまり、クラスのすべてのインスタンスで共有される変数だと言えます。

クラス変数は、通常コンストラクタの外側で宣言します。

staticキーワードを使って定義するのが一般的ですね。

○クラス変数とインスタンス変数の違い

クラス変数とインスタンス変数の違いを理解することは、JavaScriptのクラスを使いこなす上で非常に重要です。

インスタンス変数は、クラスから生成された個々のオブジェクト（インスタンス）に属する変数です。各インスタンスが独自の値を持つことができます。

一方、クラス変数はクラス自体に属し、すべてのインスタンスで共有されます。

つまり、インスタンス変数は各インスタンスごとに異なる値を持つことができますが、クラス変数はすべてのインスタンスで同じ値を持つということですね。

○サンプルコード1：クラス変数の基本的な使い方

クラス変数の基本的な使い方を見てみましょう。

次のサンプルコードでは、MyClassというクラスを定義し、クラス変数classVariableを宣言しています。

class MyClass {
  static classVariable = "クラス変数の値";

  constructor() {
    // コンストラクタ
  }

  static classMethod() {
    console.log(MyClass.classVariable);
  }
}

console.log(MyClass.classVariable); // "クラス変数の値"
MyClass.classMethod(); // "クラス変数の値"

このコードを実行すると、次のような結果が得られます。

クラス変数の値
クラス変数の値

クラス変数classVariableには、クラス名MyClassからドット記法でアクセスできています。

また、静的メソッドclassMethod内でもクラス変数にアクセスできていることがわかります。

●クラス変数を使うメリット

JavaScriptのクラスを使っていると、クラス変数の存在に気づくことがあるかもしれません。

でも、クラス変数ってどんなメリットがあるのでしょうか？

ここでは、クラス変数を使うことで得られる恩恵について説明していきますね。

○コードの可読性と保守性の向上

クラス変数を適切に使うことで、コードの可読性と保守性を向上させることができます。

クラスに関する共通の情報をクラス変数として定義することで、コードがすっきりとし、理解しやすくなります。

例えば、あるクラスのインスタンスがすべて同じ値を共有する必要がある場合、クラス変数を使うことで簡潔に表現できます。

インスタンス変数として各インスタンスに同じ値を設定するよりも、クラス変数を使った方がコードの重複を避けられますよね。

○サンプルコード2：クラス変数を使ったコードの例

クラス変数を使ったコードの例を見てみましょう。

次のサンプルコードでは、Circleクラスにクラス変数PIを定義しています。

class Circle {
  static PI = 3.14159;

  constructor(radius) {
    this.radius = radius;
  }

  getArea() {
    return Circle.PI * this.radius * this.radius;
  }
}

const circle1 = new Circle(5);
const circle2 = new Circle(10);

console.log(circle1.getArea()); // 78.53975
console.log(circle2.getArea()); // 314.159

このコードを実行すると、次のような結果が得られます。

78.53975
314.159

CircleクラスのすべてのインスタンスでPIの値を共有できているのがわかりますね。

クラス変数を使うことで、PIの値をコード内で繰り返し定義する必要がなくなり、可読性が向上しています。

○サンプルコード3：インスタンス変数を使ったコードの例

次に、インスタンス変数を使ったコードの例を見てみましょう。

次のサンプルコードでは、Circleクラスのコンストラクタ内でインスタンス変数PIを定義しています。

class Circle {
  constructor(radius) {
    this.radius = radius;
    this.PI = 3.14159;
  }

  getArea() {
    return this.PI * this.radius * this.radius;
  }
}

const circle1 = new Circle(5);
const circle2 = new Circle(10);

console.log(circle1.getArea()); // 78.53975
console.log(circle2.getArea()); // 314.159

このコードを実行すると、次のような結果が得られます。

78.53975
314.159

インスタンス変数を使った場合、PIの値がインスタンスごとに定義されているため、メモリの無駄遣いになってしまいます。

また、PIの値を変更する必要がある場合、すべてのインスタンスのPIを修正しなければならず、保守性が低下してしまいますね。

○サンプルコード4：クラス変数とインスタンス変数の使い分け

クラス変数とインスタンス変数は、適切に使い分けることが大切です。

次のサンプルコードでは、Carクラスにクラス変数とインスタンス変数を併用しています。

class Car {
  static numberOfWheels = 4;

  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  getInfo() {
    return `${this.make} ${this.model} (${Car.numberOfWheels} wheels)`;
  }
}

const car1 = new Car("Toyota", "Camry");
const car2 = new Car("Honda", "Civic");

console.log(car1.getInfo()); // Toyota Camry (4 wheels)
console.log(car2.getInfo()); // Honda Civic (4 wheels)

このコードを実行すると、次のような結果が得られます。

Toyota Camry (4 wheels)
Honda Civic (4 wheels)

numberOfWheelsはすべての車で共通の値なので、クラス変数として定義しています。

一方、makeとmodelは車ごとに異なる値なので、インスタンス変数として定義しています。

このように、クラス変数とインスタンス変数を適切に使い分けることで、コードの可読性と保守性を高めることができます。

●クラス変数の注意点

クラス変数は便利な機能ですが、使い方を誤ると思わぬ問題を引き起こすことがあります。

ここでは、クラス変数を使う上での注意点について説明しますので、しっかりと理解しておきましょう。

○クラス変数の乱用による問題

クラス変数を乱用すると、コードの可読性や保守性が低下する恐れがあります。

クラス変数は、クラスに関する共通の情報を保持するために使うべきであり、安易に使いすぎるのは避けましょう。

クラス変数を多用すると、クラスの責任が曖昧になり、コードが複雑化してしまいます。

また、クラス変数の値を変更すると、そのクラスのすべてのインスタンスに影響を与えてしまうため、予期しない動作を引き起こす可能性があります。

○サンプルコード5：クラス変数の乱用例

クラス変数を乱用した例を見てみましょう。

次のサンプルコードでは、Userクラスにクラス変数countを定義し、ユーザーの数をカウントしています。

class User {
  static count = 0;

  constructor(name, email) {
    this.name = name;
    this.email = email;
    User.count++;
  }

  static getCount() {
    return User.count;
  }
}

const user1 = new User("Alice", "alice@example.com");
const user2 = new User("Bob", "bob@example.com");

console.log(User.getCount()); // 2

このコードを実行すると、次のような結果が得られます。

一見すると問題なさそうに見えますが、このコードにはいくつかの問題があります。

まず、countはクラスの責任から逸脱しており、クラスの本来の目的である「ユーザーを表現すること」とは関係がありません。

また、countの値が外部から直接変更できてしまうため、カウントの整合性が保てなくなる恐れがあります。

○サンプルコード6：クラス変数の適切な使用例

では、クラス変数を適切に使用した例を見てみましょう。

次のサンプルコードでは、Configクラスにアプリケーションの設定情報をクラス変数として定義しています。

class Config {
  static API_URL = "https://api.example.com";
  static API_KEY = "abcdefghijklmnop";
  static MAX_RETRIES = 3;

  static getApiUrl() {
    return Config.API_URL;
  }

  static getApiKey() {
    return Config.API_KEY;
  }

  static getMaxRetries() {
    return Config.MAX_RETRIES;
  }
}

console.log(Config.getApiUrl()); // https://api.example.com
console.log(Config.getApiKey()); // abcdefghijklmnop
console.log(Config.getMaxRetries()); // 3

このコードを実行すると、次のような結果が得られます。

https://api.example.com
abcdefghijklmnop
3

この例では、設定情報はアプリケーション全体で共有されるべきものなので、クラス変数として定義するのが適切です。

また、クラス変数をゲッターメソッドで読み取るようにすることで、外部からの直接変更を防ぐことができます。

○クラス変数とグローバル変数の違い

クラス変数とグローバル変数は、どちらもアプリケーション全体で共有される変数ですが、重要な違いがあります。

グローバル変数はアプリケーション全体で共有されるため、どこからでも直接アクセスできてしまいます。

これにより、変数の値が予期せず変更される可能性があり、コードの保守性が低下します。

一方、クラス変数はクラス内でのみ共有され、外部からのアクセスはクラスが提供するメソッドを介して行われます。

これにより、変数のアクセス制御が可能となり、コードの保守性が向上します。

したがって、アプリケーション全体で共有すべき情報は、クラス変数として定義するのが望ましいでしょう。

ただし、クラス変数の乱用には十分注意が必要ですので、責任の範囲内で適切に使用するようにしましょう。

●クラス変数の応用例

これまでクラス変数の基本的な使い方や注意点について説明してきましたが、実際の開発現場ではどのようにクラス変数が活用されているのでしょうか？

ここでは、クラス変数の応用例をいくつか紹介しますので、参考にしてみてください。

○サンプルコード7：シングルトンパターンでのクラス変数の活用

シングルトンパターンは、あるクラスのインスタンスが1つだけ存在することを保証するデザインパターンです。

このパターンを実装する際、クラス変数を活用することができます。

次のサンプルコードでは、Singletonクラスにクラス変数instanceを定義し、コンストラクタをプライベートにすることでインスタンスの直接生成を防いでいます。

class Singleton {
  static instance = null;

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

  constructor() {
    if (Singleton.instance !== null) {
      throw new Error("このクラスのインスタンスは1つしか生成できません");
    }
    Singleton.instance = this;
  }

  someMethod() {
    console.log("シングルトンのメソッドが呼び出されました");
  }
}

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

console.log(instance1 === instance2); // true
instance1.someMethod(); // "シングルトンのメソッドが呼び出されました"

このコードを実行すると、次のような結果が得られます。

true
"シングルトンのメソッドが呼び出されました"

getInstanceメソッドでは、クラス変数instanceがnullの場合にのみ新しいインスタンスを生成し、それ以外の場合は既存のインスタンスを返します。

これにより、アプリケーション全体で一意のインスタンスを共有することができます。

○サンプルコード8：設定情報の管理にクラス変数を使う

アプリケーションの設定情報を管理する際、クラス変数を活用することができます。

次のサンプルコードでは、Configクラスにアプリケーションの設定情報をクラス変数として定義しています。

class Config {
  static API_URL = "https://api.example.com";
  static API_KEY = "abcdefghijklmnop";
  static MAX_RETRIES = 3;

  static getApiUrl() {
    return Config.API_URL;
  }

  static getApiKey() {
    return Config.API_KEY;
  }

  static getMaxRetries() {
    return Config.MAX_RETRIES;
  }
}

console.log(Config.getApiUrl()); // "https://api.example.com"
console.log(Config.getApiKey()); // "abcdefghijklmnop"
console.log(Config.getMaxRetries()); // 3

このコードを実行すると、次のような結果が得られます。

"https://api.example.com"
"abcdefghijklmnop"
3

設定情報をクラス変数として管理することで、アプリケーション全体で一貫した設定を維持することができます。

また、設定情報の読み取りをメソッドで行うことで、外部からの直接変更を防ぐことができます。

○サンプルコード9：ログ出力にクラス変数を活用する

アプリケーションのログ出力を管理する際、クラス変数を活用することができます。

次のサンプルコードでは、Loggerクラスにログレベルをクラス変数として定義し、ログ出力のメソッドを提供しています。

class Logger {
  static LEVEL_ERROR = 1;
  static LEVEL_WARN = 2;
  static LEVEL_INFO = 3;
  static LEVEL_DEBUG = 4;

  static level = Logger.LEVEL_INFO;

  static setLevel(level) {
    Logger.level = level;
  }

  static error(message) {
    if (Logger.level >= Logger.LEVEL_ERROR) {
      console.error(`[ERROR] ${message}`);
    }
  }

  static warn(message) {
    if (Logger.level >= Logger.LEVEL_WARN) {
      console.warn(`[WARN] ${message}`);
    }
  }

  static info(message) {
    if (Logger.level >= Logger.LEVEL_INFO) {
      console.info(`[INFO] ${message}`);
    }
  }

  static debug(message) {
    if (Logger.level >= Logger.LEVEL_DEBUG) {
      console.debug(`[DEBUG] ${message}`);
    }
  }
}

Logger.setLevel(Logger.LEVEL_WARN);

Logger.error("エラーメッセージ"); // "[ERROR] エラーメッセージ"
Logger.warn("警告メッセージ"); // "[WARN] 警告メッセージ"
Logger.info("情報メッセージ"); // 出力なし
Logger.debug("デバッグメッセージ"); // 出力なし

このコードを実行すると、次のような結果が得られます。

"[ERROR] エラーメッセージ"
"[WARN] 警告メッセージ"

ログレベルをクラス変数として管理することで、アプリケーション全体のログ出力を一括して制御することができます。

また、ログ出力のメソッドをクラスメソッドとして提供することで、インスタンスを作成せずにログ出力を行うことができます。

○サンプルコード10：キャッシュにクラス変数を利用する

アプリケーションのパフォーマンス向上のために、データのキャッシュにクラス変数を利用することができます。

次のサンプルコードでは、Cacheクラスにキャッシュデータをクラス変数として保持し、データの取得と保存のメソッドを提供しています。

class Cache {
  static data = new Map();

  static get(key) {
    return Cache.data.get(key);
  }

  static set(key, value) {
    Cache.data.set(key, value);
  }

  static has(key) {
    return Cache.data.has(key);
  }

  static delete(key) {
    Cache.data.delete(key);
  }

  static clear() {
    Cache.data.clear();
  }
}

// データをキャッシュに保存
Cache.set("user1", { id: 1, name: "Alice" });
Cache.set("user2", { id: 2, name: "Bob" });

// キャッシュからデータを取得
console.log(Cache.get("user1")); // { id: 1, name: "Alice" }
console.log(Cache.get("user2")); // { id: 2, name: "Bob" }

// キャッシュにデータが存在するか確認
console.log(Cache.has("user1")); // true
console.log(Cache.has("user3")); // false

// キャッシュからデータを削除
Cache.delete("user1");
console.log(Cache.has("user1")); // false

// キャッシュを全てクリア
Cache.clear();
console.log(Cache.has("user2")); // false

このコードを実行すると、次のような結果が得られます。

{ id: 1, name: "Alice" }
{ id: 2, name: "Bob" }
true
false
false
false

キャッシュデータをクラス変数として保持することで、アプリケーション全体でキャッシュを共有することができます。

また、キャッシュ操作のメソッドをクラスメソッドとして提供することで、インスタンスを作成せずにキャッシュ操作を行うことができます。

まとめ

JavaScriptのクラス変数は、クラスに関する共通の情報を保持するのに非常に便利な機能です。

クラス変数を適切に使用することで、コードの可読性や保守性を向上させることができます。

一方で、クラス変数の乱用は逆効果となり、コードの複雑化や予期せぬ動作を引き起こす恐れがあります。

クラス変数の使い方や注意点を理解し、シングルトンパターンや設定情報の管理、ログ出力、キャッシュなどの応用例を参考にしながら、実際のプロジェクトでクラス変数を活用していきましょう。

クラス変数を適材適所で使いこなすことで、より効率的で保守性の高いコードを書くことができるはずです。

今回の記事が、JavaScriptのクラス変数について理解を深め、実践に役立つ情報を提供できていれば幸いです。