Angularでイベントやデータを配信する: Subject、BehaviorSubject、ReplaySubjectを使いこなす
Subject vs BehaviorSubject vs ReplaySubject in Angular
Subject
Subjectは、最も基本的なSubjectです。イベントやデータを発行し、それを購読しているすべてのコンポーネントに通知します。ただし、Subjectには以下の制限があります。
- 購読者が登録する前に発行されたイベントは、購読者に送信されない。
- 最後の値のみを保持し、過去の値は保持しない。
BehaviorSubject
BehaviorSubjectは、Subjectの上位集合です。Subjectの機能に加えて、以下の機能を持ちます。
- 購読者が登録した時点で、最後の値を購読者に送信する。
- 初期値を設定することができる。
BehaviorSubjectは、状態管理やコンポーネント間の通信などに適しています。
ReplaySubject
ReplaySubjectは、BehaviorSubjectの上位集合です。BehaviorSubjectの機能に加えて、以下の機能を持ちます。
- 過去の一定数のイベントを保持し、新しい購読者に送信する。
- 時間経過によって古いイベントを削除する。
ReplaySubjectは、リアルタイムデータのストリーミングや、過去のデータへのアクセスなどに適しています。
それぞれの使い分け
Subject、BehaviorSubject、ReplaySubjectは、それぞれ異なるユースケースに適しています。
- Subject: リアルタイムデータのストリーミングなどに適しています。
- ReplaySubject: 過去のデータへのアクセスなどに適しています。
| Subject | 特徴 | ユースケース |
|---|---|---|
| Subject | 最後の値のみを保持 | リアルタイムデータのストリーミング |
| BehaviorSubject | 最後の値と初期値を保持 | 状態管理、コンポーネント間の通信 |
| ReplaySubject | 過去の一定数のイベントを保持 | 過去のデータへのアクセス |
// Subject
const subject = new Subject();
subject.subscribe(value => console.log(`Subject: ${value}`));
subject.next(1);
subject.next(2);
subject.next(3);
// BehaviorSubject
const behaviorSubject = new BehaviorSubject(0);
behaviorSubject.subscribe(value => console.log(`BehaviorSubject: ${value}`));
behaviorSubject.next(1);
behaviorSubject.next(2);
behaviorSubject.next(3);
// ReplaySubject
const replaySubject = new ReplaySubject(2);
replaySubject.subscribe(value => console.log(`ReplaySubject: ${value}`));
replaySubject.next(1);
replaySubject.next(2);
replaySubject.next(3);
このコードを実行すると、以下の出力が得られます。
Subject: 1
Subject: 2
Subject: 3
BehaviorSubject: 0
BehaviorSubject: 1
BehaviorSubject: 2
BehaviorSubject: 3
ReplaySubject: 2
ReplaySubject: 3
- 上記のコードは、あくまで基本的な使い方を示したものです。
Subject、BehaviorSubject、ReplaySubject の代わりに使用できる方法
以下、いくつかの代替手段を紹介します。
Observables
Observable は、イベントやデータのストリームを表す基本的な型です。Subject は Observable を拡張したものであり、多くの場合、Observable で代替できます。
例:
const observable = Observable.from([1, 2, 3]);
observable.subscribe(value => console.log(value));
EventEmitters
EventEmitter は、コンポーネント間の通信に使用できるシンプルなイベントバスです。Subject は EventEmitter を拡張したものであり、多くの場合、EventEmitter で代替できます。
import { EventEmitter } from '@angular/core';
const emitter = new EventEmitter();
emitter.subscribe(value => console.log(value));
emitter.emit(1);
emitter.emit(2);
emitter.emit(3);
Redux
Redux は、状態管理のためのライブラリです。Subject は状態管理に使用できますが、Redux はより多くの機能と柔軟性を提供します。
NgRx
NgRx は、Angular 用の Redux ライブラリです。Subject は NgRx と組み合わせて使用できますが、NgRx は状態管理をより簡単に実行するための多くのツールを提供します。
javascript angular rxjs
