Observerパターン - TypeScriptでのイベント駆動プログラミング

Observerパターン

Observerパターンは、オブジェクト間の1対多の依存関係を定義し、1つのオブジェクト（サブジェクト）の状態が変化すると、そのすべての依存オブジェクト（オブザーバー）に自動的に通知されて更新されるようにします。イベント駆動プログラミングの基盤です。

コアメカニズム

type Listener<T> = (data: T) => void;

class EventEmitter<T> {
  private listeners: Listener<T>[] = [];

  subscribe(listener: Listener<T>) {
    this.listeners.push(listener);
    return () => {
      this.listeners = this.listeners.filter(l => l !== listener);
    };
  }

  emit(data: T) {
    this.listeners.forEach(l => l(data));
  }
}

プッシュ vs プル

プッシュモデルでは、サブジェクトが通知と共にデータを送信します。プルモデルでは、サブジェクトは変更が発生したことのみを通知し、オブザーバーがサブジェクトに新しい状態を問い合わせます。プッシュはシンプルで、プルはオブザーバーに読み取るデータの制御を与えます。

メモリリーク防止

重要な関心事は購読解除です。オブザーバーが購読解除を忘れると、リスナー配列に無期限に残り、メモリリークを引き起こします。現代の実装では、購読解除関数を返すか、WeakRefを使用して参照を自動的にクリーンアップします。

現代での実装

Observerパターンは現代の開発のあらゆる場所に現れます:

• DOMイベント: addEventListener / removeEventListener
• React: useStateとuseEffectフックはObserverセマンティクスに従います
• RxJS: Observableは変換、フィルタリング、合成のためのオペレーターでパターンを拡張します
• Node.js EventEmitter: サーバーサイドイベント用の組み込みpublish-subscribe

Mediatorとの比較

Observerは任意のオブジェクトがイベントに購読できますが、Mediatorはコミュニケーションロジックを集中化します。シンプルな通知チェーンにはObserverを、コンポーネント間のインタラクションルールが複雑な場合はMediatorを使用しましょう。