用語集 › 💻 プログラミング › Observerパターン
【おぶざーばーぱたーん】

Observerパターン とは？

💡 「変化があったら全員に通知」する仕組み
📌 このページのポイント
Observer パターン（1対多の通知） Subject（発行者） 状態が変化！ notifyAll() 通知 通知 通知 Observer 1 UIを更新する Observer 2 ログに記録する Observer 3 メールを送信する 状態変化を購読者全員に自動通知する仕組み
Observerパターンのイメージ
ひよこ ひよこ

具体的にどう使うの？

ペンギン先生 ペンギン先生

ニュースレターのモデルがわかりやすい。新聞社（Subject）に読者（Observer）が購読登録。新しい記事が出たら全読者に自動配信。読者は好きな時に購読解除（unsubscribe）できる。新聞社は読者が誰かを知らなくていい。この「疎結合な通知の仕組み」がObserverパターンだよ

ひよこ ひよこ

JavaScriptで使ってる場面は？

ペンギン先生 ペンギン先生

実はめちゃくちゃ使っている。button.addEventListener('click', handler)がまさにObserverパターン。buttonがSubject、handlerがObserver。Reactのstate変更でコンポーネントが再レンダリングされるのも内部的にObserverパターン。RxJSのObservableは型安全なObserverパターンの実装だよ

ひよこ ひよこ

Pub/Subとの違いは？

ペンギン先生 ペンギン先生

古典的なObserverパターンはSubjectがObserverへの参照を直接持つ。Pub/SubはBroker（メッセージブローカー）が間に入る。Observerは1対多の直接的な通知、Pub/Subはブローカー経由の間接的な通知。KafkaやRabbitMQはPub/Sub。DOMイベントは（EventTargetがSubjectなので）Observerに近いんだよ

ひよこ ひよこ

注意点は？

ペンギン先生 ペンギン先生

①メモリリーク。Observerを登録解除し忘れるとGCされない（removeEventListenerを忘れるパターン）。②通知の順序保証がない場合がある。③通知のカスケード（ObserverがまたSubjectに変更を加えて無限ループ）に注意。④通知が多すぎるとパフォーマンス問題。debounceやthrottleで制御しようね

ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「Observerパターン」って出てきたら「状態変化を自動通知するデザインパターン」と思えればだいたいOK！
📖 おまけ：英語の意味
「Observer Pattern」 ＝ 観察者パターン
💬 Observer（観察者）がSubject（対象）を監視して、変化があれば通知を受け取るよ
🔗 あわせて読みたい
← 用語集にもどる