JavaScript上級

上級 JavaScriptで実装するデザインパターン実践集｜練習問題編

 

導入

デザインパターンは、ソフトウェア開発において再利用可能な解決策を提供します。特に、上級エンジニアにとっては、特定の問題に対する効果的なアプローチを選択することが求められます。今回は、JavaScriptを用いたデザインパターンの実践的な実装に焦点を当て、特定のケーススタディを通じて、実業務で直面する可能性のある課題に対処します。

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

重要な概念の整理

デザインパターンには、構造的、行動的、創造的なカテゴリがあります。これらのパターンは、特定の状況におけるコードの可読性や保守性を向上させるために利用されます。例えば、シングルトンパターンは、アプリケーション全体で一つのインスタンスを共有するために使用されることが多いです。このパターンを適切に実装することで、リソースの無駄遣いを防ぎ、状態管理を容易にします。

コード例（JavaScript）


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

    getState() {
        return this.state;
    }

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

// 使用例
const instance1 = new Singleton();
const instance2 = new Singleton();

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

コードの行ごとの解説

  1. class Singleton: シングルトンクラスの定義を開始します。
  2. constructor: コンストラクタ内で、既にインスタンスが存在するかをチェックします。
  3. if (Singleton.instance): 既存のインスタンスがあれば、そのインスタンスを返します。
  4. this.state = {}: 新しいインスタンスの場合、状態を初期化します。
  5. Singleton.instance = this: 新しいインスタンスを保存しておきます。
  6. getState: 現在の状態を取得するメソッドです。
  7. setState: 新しい状態を設定するメソッドです。
  8. const instance1 = new Singleton(); シングルトンのインスタンスを生成します。
  9. console.log(instance2.getState()); 2つのインスタンスが同じ状態を持つことを確認します。

練習問題編

以下の問題に取り組んで、デザインパターンの理解を深めてください。

  1. 問題1: シングルトンパターンを用いて、設定を管理するクラスを作成してください。設定を追加するメソッドと、全設定を取得するメソッドを実装してください。

    模範解答: 設定を保存するためのstateオブジェクトを持つSingletonクラスを実装し、addSettingメソッドを追加します。

  2. 問題2: シングルトンインスタンスの状態を変更した際に、変更を通知する機能を追加してください。

    模範解答: Observerパターンを用いて、状態が変更された際にリスナーに通知するメソッドを実装します。

  3. 問題3: シングルトンパターンの実装において、スレッドセーフを考慮した場合、どのような工夫が必要か説明してください。

    模範解答: ミューテックスやロックを使用して、インスタンス生成時の競合状態を防ぐ必要があります。

まとめ

  • シングルトンパターンは、インスタンスの一意性を保つために役立ちます。
  • 状態管理や設定管理において、シングルトンパターンは特に効果的です。
  • 実装の際には、変更の通知やスレッドセーフを考慮することが重要です。
RELATED POST