Angular、TypeScript、RxJSでデータ共有をマスター！SubjectとBehaviorSubjectを使いこなす

2024-04-02

Angular、TypeScript、RxJSにおけるSubjectとBehaviorSubjectの違い

共通点

ObserverとObservableの両方の性質を持つ: Subjectは値を発行(next)できるObserverであり、同時にその値を受け取るObservableとしても機能します。
コンポーネント間のデータ共有: Subjectを利用することで、異なるコンポーネント間でデータを簡単に共有することができます。
イベント処理: Subjectはイベント処理にも適しており、ボタンクリックなどのイベントをストリームとして扱えます。

値の保持: Subjectは最新の値のみを保持します。
購読タイミング: 購読者がSubjectに購読した時点から、その時点以降に発行された値のみを受け取ることができます。過去の値は受け取れません。
メモリ使用量: Subjectは最新の値のみを保持するため、メモリ使用量は比較的軽くなります。

BehaviorSubject

購読タイミング: 購読者がBehaviorSubjectに購読した時点で、最新の値と初期値両方を受け取ることができます。
メモリ使用量: BehaviorSubjectは最新の値と初期値を保持するため、Subjectよりもメモリ使用量が多くなります。

使い分け

機能	Subject	BehaviorSubject
過去の値	保持しない	保持する (最新値と初期値)
購読タイミング	購読以降の値のみ	最新値と初期値
メモリ使用量	軽い	重い

ボタンクリックなどのイベント処理
リアルタイムデータの配信

BehaviorSubjectの使い例

ログイン状態の管理
コンポーネント間の設定データ共有

SubjectとBehaviorSubjectは、それぞれ異なる特性を持つため、用途に合わせて使い分けることが重要です。

過去の値が不要で、メモリ使用量を抑えたい場合はSubject
過去の値が必要で、初期値も設定したい場合はBehaviorSubject

上記を参考に、それぞれの特性を理解し、適切なクラスを選択してください。

Subject

import { Subject } from 'rxjs';

const subject = new Subject<string>();

subject.subscribe(value => console.log('Subject:', value));

subject.next('Hello');
subject.next('World!');

// 出力:
// Subject: Hello
// Subject: World!

BehaviorSubject

import { BehaviorSubject } from 'rxjs';

const subject = new BehaviorSubject('Initial Value');

subject.subscribe(value => console.log('BehaviorSubject:', value));

subject.next('Hello');
subject.next('World!');

// 出力:
// BehaviorSubject: Initial Value
// BehaviorSubject: Hello
// BehaviorSubject: World!

Subjectの場合、購読したタイミング以降に発行された値のみを受け取ることができます。

Observables

SubjectとBehaviorSubjectはObservableを拡張したクラスですが、シンプルなユースケースであれば、Observable自身で十分な場合があります。

import { Observable } from 'rxjs';

const observable = Observable.create(observer => {
  observer.next('Hello');
  observer.next('World!');
});

observable.subscribe(value => console.log(value));

// 出力:
// Hello
// World!

ReplaySubjectは、SubjectとBehaviorSubjectの機能を組み合わせたようなクラスです。

過去の値を保持: ReplaySubjectは指定した数の過去の値を保持することができます。

import { ReplaySubject } from 'rxjs';

const subject = new ReplaySubject(2);

subject.next('Hello');
subject.next('World!');

subject.subscribe(value => console.log(value));

// 出力:
// World!
// Hello

AsyncSubject

import { AsyncSubject } from 'rxjs';

const subject = new AsyncSubject();

subject.next('Hello');
subject.next('World!');

subject.subscribe(value => console.log(value));

// 出力:
// World!