SignalsとRxJSの接続
相互運用機能でSignalsとObservableを橋渡しします
「SignalsとRxJSの接続」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
2つのリアクティブな世界
Angular アプリでは、signals（同期的なプル型）と RxJS Observables（非同期なプッシュ型ストリーム）が混在します。@angular/core/rxjs-interop パッケージは、toSignal と toObservable によって両者を橋渡しします。
toSignal の基本
toSignal() は Observable を購読し、最新の値を読み取り専用のシグナルとして公開します。インジェクションコンテキストが破棄されると、自動的に購読を解除します。
import { toSignal } from '@angular/core/rxjs-interop';
clock = toSignal(interval(1000), { initialValue: 0 });
// read in template: {{ clock() }}initialValue と同期的な読み取り
Observable は同期的に値を発行するとは限らないため、シグナルには初期値が必要です。initialValue を指定するか、BehaviorSubject のようにソースが即座に発行することが保証されている場合は requireSync: true を使用します。
value = toSignal(this.behaviorSubject$, { requireSync: true });async パイプの置き換え
toSignal は多くの場合、async パイプの代わりに使えます。data$ | async の代わりに data() と直接読み取るため、computed() とも自然に組み合わせられます。
private http = inject(HttpClient);
users = toSignal(this.http.get<User[]>('/api/users'), { initialValue: [] });
count = computed(() => this.users().length);toObservable の基本
toObservable() はシグナルを Observable に変換し、シグナルが変化するたびに値を発行します。debounceTime や switchMap などの RxJS オペレーターが必要な場合に便利です。
import { toObservable } from '@angular/core/rxjs-interop';
query = signal('');
query$ = toObservable(this.query);デバウンス検索パイプライン
両方向を組み合わせます。シグナルを toObservable に渡し、RxJS でデバウンスして HTTP 呼び出しへ切り替え、toSignal で結果を再びシグナルに変換します。
query = signal('');
results = toSignal(
toObservable(this.query).pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(q => this.api.search(q))
), { initialValue: [] }
);インジェクションコンテキスト
どちらのヘルパーにもインジェクションコンテキストが必要です（ライフサイクルに紐づく購読を管理するためです）。フィールド初期化子として呼び出すか、後から呼び出す場合は明示的な injector を渡します。
constructor() {
this.data = toSignal(this.source$); // ok: in constructor
}エラー処理
ソース Observable でエラーが発生すると、toSignal は読み取り時にエラーを再スローします。シグナルが利用可能な値を保持できるように、catchError を使ってパイプライン内でエラーを処理します。
results = toSignal(
toObservable(this.query).pipe(
switchMap(q => this.api.search(q).pipe(catchError(() => of([]))))
), { initialValue: [] }
);toObservable のタイミング
toObservable は内部で effect を使用するため、値の発行は同期的ではなく、次のマイクロタスクで行われます。シグナルが短時間に何度も変化した場合は、最新の値にまとめられます。
使い分け
時間ベースのオペレーターや高階オペレーターが必要な場合は toObservable を使います。テンプレートや computed の読み取りモデルで手動購読なしにストリームを利用する場合は toSignal を使います。
クリーンアップは自動
どちらのヘルパーも、インジェクションコンテキストのライフサイクルに購読を紐づけます。コンポーネントやサービスが破棄されると購読も解除されるため、手動で unsubscribe() を呼び出さなくてもリークを防げます。
理解度チェック
相互運用についての知識を確認しましょう。
まとめ
シグナルと RxJS を橋渡ししました。toSignal はストリームを読み取り専用シグナルとして利用し（initialValue/requireSync に対応）、toObservable はシグナルを RxJS オペレーター用のストリームとして公開します。購読はインジェクションコンテキストによって自動的にクリーンアップされます。
よくある質問
「SignalsとRxJSの接続」レッスンは無料ですか？
はい。「SignalsとRxJSの接続」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「SignalsとRxJSの接続」で何を学びますか？
相互運用機能でSignalsとObservableを橋渡しします ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「SignalsとRxJSの接続」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- サービス内のSignal Store
- computedによる状態の導出
- イミュータブルな状態更新
- SignalsとRxJSの接続