TypeScript中級

中級 TypeScriptで学ぶデザインパターン｜解説編

 

導入

デザインパターンは、ソフトウェア開発において再利用可能な解決策を提供します。特に中級エンジニアにとって、実務における複雑な問題を解決するための道具としての役割が大きいです。本記事では、TypeScriptを用いて具体的なシチュエーションに基づいたデザインパターンを探求します。特に、オブザーバーパターンに焦点を当て、実際の業務でどのように活用できるかを考察します。

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

重要な概念の整理

オブザーバーパターンは、オブジェクトの状態が変化したときに、それに依存する他のオブジェクトに通知を行う仕組みです。このパターンは、システムの柔軟性を高め、異なるコンポーネント間の結合度を下げることができます。特に、ユーザーインターフェースやイベント駆動型のアプリケーションでよく見られます。

コード例（TypeScript）


class Subject {
    private observers: Observer[] = [];

    public attach(observer: Observer): void {
        this.observers.push(observer);
    }

    public detach(observer: Observer): void {
        const index = this.observers.indexOf(observer);
        if (index !== -1) {
            this.observers.splice(index, 1);
        }
    }

    public notify(): void {
        for (const observer of this.observers) {
            observer.update();
        }
    }
}

interface Observer {
    update(): void;
}

class ConcreteObserver implements Observer {
    private state: number;

    constructor(private subject: Subject) {
        this.subject.attach(this);
    }

    public update(): void {
        this.state = Math.random(); // 状態の更新
        console.log(`Observer state updated to: ${this.state}`);
    }
}

// 使用例
const subject = new Subject();
const observer1 = new ConcreteObserver(subject);
const observer2 = new ConcreteObserver(subject);

subject.notify(); // 観察者に通知

コードの行ごとの解説

  1. class Subject: 観察者を管理するクラス。
  2. private observers: Observer[]: 登録された観察者のリスト。
  3. attach(observer: Observer): 観察者をリストに追加するメソッド。
  4. detach(observer: Observer): 観察者をリストから削除するメソッド。
  5. notify(): 状態が変わった際に、全ての観察者に通知するメソッド。
  6. interface Observer: 観察者のインターフェース。
  7. class ConcreteObserver: 実際の観察者の実装。
  8. update(): 通知を受け取った際に呼ばれるメソッド。
  9. const subject = new Subject(): Subjectのインスタンスを生成。
  10. const observer1 = new ConcreteObserver(subject): 観察者を生成し、Subjectに登録。
  11. subject.notify(): 全ての観察者に通知を送信。

解説編

オブザーバーパターンを用いることで、システムの拡張性が向上します。たとえば、新しい観察者を追加する際に、既存のコードに手を加える必要がありません。しかし、このパターンには注意点もあります。観察者の数が増えると、通知のオーバーヘッドが発生し、パフォーマンスに影響を与える可能性があります。そのため、観察者の管理や通知の最適化を考慮することが重要です。さらに、TypeScriptの型システムを活用することで、観察者の実装をより安全に行うことができます。

まとめ

  • オブザーバーパターンは、状態変化を通知する仕組みを提供する。
  • 柔軟なシステム設計を可能にするが、パフォーマンスの管理が必要。
  • TypeScriptを用いることで、型安全な実装が実現できる。
RELATED POST