JavaScript、Angular、RxJSにおけるホットとコールドオブザーバブル：詳解と使い分け

JavaScript、Angular、RxJSにおけるホットとコールドオブザーバブル

JavaScript、Angular、RxJSにおいて、オブザーバブルはデータストリームを表現する重要な概念です。オブザーバブルには、ホットとコールドの2種類があり、それぞれ異なる動作と特性を持ちます。この解説では、ホットとコールドオブザーバブルの理解を深め、適切な場面での使い分けを支援するために、それぞれの詳細な説明と比較を提供します。

ホットオブザーバブル

ホットオブザーバブルは、時間経過とともに値を発行するストリームです。購読 (subscribe) する前にすでに値を発行しており、購読後に発行された値のみを受信できます。

• 購読前に値を発行する
• 複数の購読者が同じ値を受信する
• 購読後に発行された値のみを受信できる
• 購読の開始・終了に影響されない

• イベント発生ストリーム: ボタンクリック、マウス移動など
• リアルタイムデータストリーム: 株価、センサーデータなど
• DOMイベントストリーム: クリック、マウスオーバーなど

コールドオブザーバブル

コールドオブザーバブルは、購読時に初めて値を発行するストリームです。購読ごとに新しいストリームが作成され、購読者はそのストリームから発行された値のみを受信できます。

• 購読時に初めて値を発行する
• 購読者ごとに個別のストリームを持つ

• ファイル読み込みストリーム
• ネットワークリクエストストリーム
• 数学関数ストリーム

ホットとコールドオブザーバブルの比較

Angularでの利用

Angularでは、イベントバインディングや非同期処理などにオブザーバブルを幅広く利用しています。例えば、@Outputデコレータで装飾されたプロパティは、ホットオブザーバブルとして公開されます。一方、HttpClientサービスを用いたHTTPリクエストは、コールドオブザーバブルとして扱われます。

RxJSオペレーター

RxJSには、ホットとコールドオブザーバブルの変換に役立つオペレーターが用意されています。例えば、fromEventオペレーターはDOMイベントをホットオブザーバブルに変換し、deferオペレーターはコールドオブザーバブルの作成を遅延させます。

import { Observable, interval } from 'rxjs';

const hotObservable = interval(1000);

hotObservable.subscribe(value => console.log('Hot observable:', value));

setTimeout(() => {
  hotObservable.subscribe(value => console.log('Late subscriber:', value));
}, 2000);

import { Observable, fromEvent } from 'rxjs';

const button = document.querySelector('button');

const coldObservable = fromEvent(button, 'click');

coldObservable.subscribe(event => console.log('Cold observable:', event));

この図では、時間軸上に値が流れるストリームを表しています。ホットオブザーバブルは、購読 (subscribe) 前にすでに値を発行しており、購読後に発行された値のみを受信できます。

アナロジー

ホットオブザーバブルとコールドオブザーバブルを、日常生活の例に例えると理解しやすくなります。

• ホットオブザーバブル: テレビのニュース番組はホットオブザーバブルに例えられます。番組は常に放送されており、チャンネルを変えて視聴を開始した時点で、その時点から放送されているニュースを受信できます。
• コールドオブザーバブル: ボタンを押して起動するゲームはコールドオブザーバブルに例えられます。ゲームはボタンを押すまで起動せず、起動後にプレイした内容のみが記録されます。