オブザーバーパターン

目次

• 使用場面
• 使用してはいけない場面
• 手順
• 詳細
• 出典

オブザーバーパターンを使うことで、特定のオブジェクト（オブザーバー）を別のオブジェクト（オブザーバブル）に_購読_させることができます。イベントが発生するたびに、オブザーバブルはそのすべてのオブザーバーに通知します！

使用場面

• アプリケーションの複数の部分に対して状態変更やイベントについて通知する必要がある場合に使用します
• これはコンポーネント間の イベント駆動型の非同期通信を実装するのに役立ちます

使用してはいけない場面

• 購読者数が非常に多く、通知のパフォーマンスが重要になる場合
• シンプルなコールバックや一対一通信のための直接的な関数呼び出しで十分な場合
• 暗黙的なイベントチェーンからのデバッグの困難さが疎結合のメリットを上回る場合

手順

• subscribe、unsubscribe、notify メソッドを持つ Observable クラスを作成します
• 関心の分離を改善するため、オブザーバーをオブザーバブルに疎結合に保ちます
• 複雑なロジックを持つ多くの購読者に通知するときはパフォーマンスに注意します
• より高度なリアクティブプログラミングが必要な場合は、RxJS などのライブラリの使用を検討してください

詳細

オブザーバブルオブジェクトは通常、3つの重要な部分を含みます：

• observers: 特定のイベントが発生するたびに通知されるオブザーバーの配列
• subscribe(): オブザーバをオブザーバーリストに追加するためのメソッド
• unsubscribe(): オブザーバーをオブザーバーリストから削除するためのメソッド
• notify(): 特定のイベントが発生するたびにすべてのオブザーバーに通知するためのメソッド

ES6 クラスを使用してオブザーバブルを作成してみましょう：

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

  subscribe(func) {
    this.observers.push(func);
  }

  unsubscribe(func) {
    this.observers = this.observers.filter((observer) => observer !== func);
  }

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

これでオブザーバーリストに subscribe メソッドでオブザーバーを追加したり、unsubscribe メソッドで削除したり、notify メソッドですべての購読者に通知したりできます。

このオブザーバブルを使って何かを構築してみましょう。Button と Switch の2つのコンポーネントだけで構成された非常にシンプルなアプリがあります。

export default function App() {
  return (
    <div className="App">
      <Button>Click me!</Button>
      <FormControlLabel control={<Switch />} />
    </div>
  );
}

アプリケーションとのユーザーインタラクションを追跡したいと考えています。ユーザーがボタンをクリックするかスイッチを切り替えるたびに、このイベントをタイムスタンプ付きでログしたいのです。ログに記録するだけでなく、イベントが発生するたびに表示されるトースト通知も作成したいです！

ユーザーが handleClick または handleToggle 関数を呼び出すたびに、これらの関数はオブザーバーの notify メソッドを呼び出します。notify メソッドは、handleClick または handleToggle 関数によって渡されたデータをすべての購読者に通知します！

まず、logger と toastify 関数を作成しましょう。これらの関数は最終的に notify メソッドから data を受け取ります。

import { ToastContainer, toast } from "react-toastify";

function logger(data) {
  console.log(`${Date.now()} ${data}`);
}

function toastify(data) {
  toast(data);
}

export default function App() {
  return (
    <div className="App">
      <Button>Click me!</Button>
      <FormControlLabel control={<Switch />} />
      <ToastContainer />
    </div>
  );
}

現在、logger と toastify 関数はオブザーバブルを認識していません。オブザーバブルはまだそれらに通知できません！それらをオブザーバーにするには、オブザーバブルの subscribe メソッドを使用して_購読_する必要があります！

import { ToastContainer, toast } from "react-toastify";

function logger(data) {
  console.log(`${Date.now()} ${data}`);
}

function toastify(data) {
  toast(data);
}

observable.subscribe(logger);
observable.subscribe(toastify);

export default function App() {
  return (
    <div className="App">
      <Button>Click me!</Button>
      <FormControlLabel control={<Switch />} />
      <ToastContainer />
    </div>
  );
}

イベントが発生するたびに、logger と toastify 関数は通知されます。次に、実際にオブザーバブルに通知する関数を実装するだけです。つまり handleClick と handleToggle 関数です！これらの関数はオブザーバブルの notify メソッドを呼び出し、オブザーバーが受け取るべきデータを渡す必要があります。

import { ToastContainer, toast } from "react-toastify";

function logger(data) {
  console.log(`${Date.now()} ${data}`);
}

function toastify(data) {
  toast(data);
}

observable.subscribe(logger);
observable.subscribe(toastify);

export default function App() {
  function handleClick() {
    observable.notify("User clicked button!");
  }

  function handleToggle() {
    observable.notify("User toggled switch!");
  }

  return (
    <div className="App">
      <Button>Click me!</Button>
      <FormControlLabel control={<Switch />} />
      <ToastContainer />
    </div>
  );
}

フロー全体を完成させました。handleClick と handleToggle はオブザーバーの notify メソッドをデータと共に呼び出し、その後オブザーバーは購読者（この場合は logger と toastify 関数）に通知します。

ユーザーがいずれかのコンポーネントと対話するたびに、logger と toastify の両関数が、notify メソッドに渡したデータで通知されます！

オブザーバーパターンは多くの方法で使用できますが、非同期でイベントベースのデータで作業するときに非常に有用です。特定のデータのダウンロードが完了したときに特定のコンポーネントが通知されるようにしたい場合や、ユーザーがメッセージボードに新しいメッセージを送信したときに他のすべてのメンバーが通知される場合があります。

ケーススタディ

オブザーバーパターンを使用する有名なライブラリは RxJS です。RxJS にはオブザーバーパターンで機能する多くの組み込み機能と例があります。

メリット

オブザーバーパターンを使用することは、関心の分離と単一責任の原則を実施する優れた方法です。オブザーバーオブジェクトはオブザーバブルオブジェクトに密結合されておらず、いつでも（解除）結合することができます。オブザーバブルオブジェクトはイベントの監視を担当し、オブザーバーは受け取ったデータを処理するだけです。

デメリット

オブザーバーが複雑になりすぎると、すべての購読者に通知するときにパフォーマンスの問題が発生する可能性があります。

出典

• patterns.dev/vanilla/observer-pattern

参考資料

• RxJS
• JavaScript Design Patterns: The Observer Pattern