JavaScript上級

上級 JavaScriptで学ぶデザインパターン｜練習問題編

 

導入

デザインパターンは、ソフトウェア開発において頻繁に遭遇する課題を解決するための再利用可能なソリューションを提供します。特にJavaScriptのような柔軟な言語では、デザインパターンを効果的に活用することで、コードの可読性や保守性が向上します。この記事では、上級者向けに特定のデザインパターンを取り上げ、実務に即した具体的なシチュエーションを通じて学んでいきます。

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

重要な概念の整理

デザインパターンには、生成、構造、行動の3つのカテゴリがあります。ここでは、特に行動パターンの一つである「オブザーバーパターン」に焦点を当てます。このパターンは、オブジェクト間の一対多の依存関係を定義し、一方のオブジェクトが状態を変更すると、依存している他のオブジェクトに通知される仕組みです。これにより、コンポーネント間の結合度が低くなり、システム全体の柔軟性が向上します。

コード例（JavaScript）


class Subject {
    constructor() {
        this.observers = [];
    }

    addObserver(observer) {
        this.observers.push(observer);
    }

    removeObserver(observer) {
        this.observers = this.observers.filter(obs => obs !== observer);
    }

    notify(data) {
        this.observers.forEach(observer => observer.update(data));
    }
}

class Observer {
    constructor(name) {
        this.name = name;
    }

    update(data) {
        console.log(`${this.name} received data: ${data}`);
    }
}

// 使用例
const subject = new Subject();
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notify('Hello Observers!');

コードの行ごとの解説

  1. class Subject: オブザーバーを管理する主体クラスを定義します。
  2. constructor: オブザーバーのリストを初期化します。
  3. addObserver: 新しいオブザーバーをリストに追加します。
  4. removeObserver: リストから特定のオブザーバーを削除します。
  5. notify: すべてのオブザーバーにデータを通知します。
  6. class Observer: データを受け取るオブザーバークラスを定義します。
  7. update: 通知されたデータを受け取って処理します。
  8. 使用例: SubjectとObserverのインスタンスを作成し、通知を行います。

練習問題編

以下の練習問題に取り組んでみてください。

  1. 問題1: オブザーバーパターンを用いて、複数のセンサーが温度を監視するシステムを実装してください。
  2. 問題2: Observerクラスに、受け取ったデータをフィルタリングする機能を追加してください。
  3. 問題3: Subjectクラスに、オブザーバーの数をカウントするメソッドを追加してください。

まとめ

  • オブザーバーパターンは、オブジェクト間の疎結合を実現し、柔軟なシステム設計を可能にします。
  • 具体的なシチュエーションに応じたデザインパターンの適用が、実務において非常に重要です。
RELATED POST