SubjectとBehaviorSubject
Subjectで値をマルチキャストします。
「SubjectとBehaviorSubject」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
Subjectとは
SubjectはObservableであると同時にObserverでもあります。subscribeして購読できるだけでなく、next()で値を送ることもできます。マルチキャストを行うため、すべての購読者が同じ値を受け取ります。
Subjectの作成と使用
値が発行された後に追加された購読者は、過去の値を受け取りません。
import { Subject } from 'rxjs';
const events$ = new Subject<string>();
events$.subscribe(v => console.log('A:', v));
events$.next('hello'); // A: hello
events$.subscribe(v => console.log('B:', v));
events$.next('world'); // A: world, B: worldSubjectはマルチキャストする
購読者ごとに別々に実行されるcold Observableとは異なり、Subjectは1つの実行を共有します。すべての購読者が同じ値を同時に受け取ります。
BehaviorSubject
BehaviorSubjectには初期値が必要で、最新の値を保持します。新しい購読者は現在の値をすぐに受け取ります。
import { BehaviorSubject } from 'rxjs';
const count$ = new BehaviorSubject<number>(0);
count$.subscribe(v => console.log('A:', v)); // A: 0
count$.next(5);
count$.subscribe(v => console.log('B:', v)); // B: 5 (gets latest)現在の値の読み取り
BehaviorSubjectは、.valueまたは.getValue()を使って現在の値を同期的に公開します。通常のSubjectにはこの機能がありません。
const state$ = new BehaviorSubject({ loggedIn: false });
console.log(state$.value); // { loggedIn: false }
state$.next({ loggedIn: true });
console.log(state$.getValue()); // { loggedIn: true }シンプルなストアとしてのSubject
BehaviorSubjectは、Angularのサービスで軽量な状態コンテナとしてよく使われます。状態を保持し、読み取り専用のObservableとして公開し、nextで更新を送ります。
class CounterService {
private count$ = new BehaviorSubject(0);
readonly value$ = this.count$.asObservable();
increment() { this.count$.next(this.count$.value + 1); }
}カプセル化のためのasObservable
.asObservable()を公開すると、利用側は購読できますが、next()を呼び出して状態を壊すことはできません。
private data$ = new Subject<number>();
readonly stream$ = this.data$.asObservable();
// consumers: stream$.subscribe(...) but no stream$.next()ReplaySubject
ReplaySubjectは、設定した数の過去の値を新しい購読者に再発行します。直近N件のイベントをキャッシュする場合などに便利です。
import { ReplaySubject } from 'rxjs';
const recent$ = new ReplaySubject<number>(2); // buffer last 2
recent$.next(1); recent$.next(2); recent$.next(3);
recent$.subscribe(v => console.log(v)); // 2, 3SubjectとBehaviorSubjectの違い
Subject：初期値がなく、後から購読した購読者は過去の値を受け取りません。
BehaviorSubject：初期値があり、後から購読した購読者は最新の値を受け取ります。UIの状態には、通常BehaviorSubjectが適しています。
Subjectの完了
complete()を呼び出してSubjectを終了します。完了後はnext()で送った値は無視され、購読者は解放されます。破棄されるサービスでは、必ずSubjectを完了させてください。
const s$ = new Subject<number>();
s$.subscribe(v => console.log(v));
s$.next(1);
s$.complete();
s$.next(2); // ignoredSubjectで命令型とリアクティブを橋渡しする
Subjectを使うと、命令型のイベント（ボタンのクリックハンドラーやWebSocketメッセージなど）をObservableストリームに変換し、アプリの他の部分から宣言的に反応できるようになります。
理解度チェック
Subjectについての理解度を確認しましょう。
まとめ：SubjectとBehaviorSubject
Subjectは、値を送ることのできるマルチキャストストリームです。
Subject：過去の値を保持しません。BehaviorSubject：最新の値を保持して再発行し、.valueを持ちます。ReplaySubject：直近N件の値を再発行します。asObservable()で公開して状態を保護します。
次は購読解除とメモリリークです。
よくある質問
「SubjectとBehaviorSubject」レッスンは無料ですか？
はい。「SubjectとBehaviorSubject」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「SubjectとBehaviorSubject」で何を学びますか？
Subjectで値をマルチキャストします。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「SubjectとBehaviorSubject」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Observableとサブスクリプション
- SubjectとBehaviorSubject
- 購読解除とメモリリーク
- asyncパイプ