JavaScript上級

上級 JavaScriptで学ぶデザインパターン｜ケーススタディ編

 

導入

本稿では、上級JavaScriptプログラマー向けにデザインパターンを実務でどのように活用するかを探ります。特に、現場でよく遭遇するシチュエーションに基づいたケーススタディを通じて、具体的な適用方法や注意点を解説します。

教科書レベルの解説（デザインパターン）

重要な概念の整理

デザインパターンは、ソフトウェア設計における問題解決のための再利用可能なソリューションです。特に、オブジェクト指向プログラミングの文脈で効果を発揮します。ここでは、特に「シングルトンパターン」に焦点を当て、状態を持つオブジェクトの管理方法を見ていきます。

コード例（JavaScript）


class Singleton {
    constructor() {
        if (!Singleton.instance) {
            Singleton.instance = this;
            this.state = {};
        }
        return Singleton.instance;
    }

    setState(newState) {
        this.state = {...this.state, ...newState};
    }

    getState() {
        return this.state;
    }
}

const instance1 = new Singleton();
const instance2 = new Singleton();

instance1.setState({ user: 'Alice' });
console.log(instance2.getState()); // { user: 'Alice' }

コードの行ごとの解説

  1. class Singleton { – シングルトンパターンのクラスを定義します。
  2. if (!Singleton.instance) { – インスタンスが存在しない場合にのみ新しいインスタンスを作成します。
  3. this.state = {}; – オブジェクトの状態を保持するための初期化を行います。
  4. return Singleton.instance; – すでに存在するインスタンスを返します。
  5. setState(newState) { – 状態を更新するメソッドを定義します。
  6. getState() { – 現在の状態を取得するメソッドを定義します。

ケーススタディ編

ある企業がプロジェクトを進める中で、ユーザーのセッション情報を管理する必要が生じました。各ページでユーザー情報を参照するため、シングルトンパターンを採用することにしました。この選択により、セッション情報がアプリケーション全体で一貫して管理され、重複したデータの保持を避けることができました。

しかし、実装後に気付いた問題として、シングルトンが持つ状態の変更が多くの場所で行われると、デバッグが難しくなるという落とし穴がありました。この場合、状態管理を行う別のモジュールを導入し、シングルトンは状態の取得専用にすることで改善を図りました。

まとめ

  • シングルトンパターンは状態管理において非常に有効ですが、使い方に注意が必要です。
  • 状態の変更が多くなる場合は、責任を分割することでデバッグを容易にできます。
RELATED POST