Observable (RxJS ライブラリから) は、時間の経過に伴う値のストリームを表し、サブスクライブできます。Angular は RxJS を広く使用しており、HTTP リクエスト、ルーターイベント、フォーム、EventEmitter はすべて Observable ベースなので、これらを理解することは不可欠です。
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Observable は複数の値を発行でき、サブスクライブされた場合のみ実行でき、アンサブスクライブ (キャンセル) できます。これにより、イベント、ストリーム、キャンセルしたい HTTP に理想的です。
import { HttpClient } from "@angular/common/http";
this.http.get<User[]>("/api/users").subscribe({
next: (users) => this.users = users, // each emitted value
error: (err) => console.error(err), // on error
complete: () => console.log("done"), // stream finished
});
.subscribe() を呼び出すまで何も起こりません。Observable は遅延実行 (lazy) です。
import { map, filter, debounceTime } from "rxjs/operators";
this.searchInput.valueChanges.pipe(
debounceTime(300), // wait for typing to pause
filter(text => text.length > 2), // ignore short queries
map(text => text.trim()), // transform
).subscribe(query => this.search(query));
オペレータ (.pipe() 内にチェーンされている) はストリームを宣言的に変換します — debounce、filter、map など — 一般的な非同期の問題 (入力中の検索など) を適切に解決します。
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
手動サブスクリプションは ngOnDestroy でクリーンアップする必要があります。そうしないと、コンポーネントが削除されても実行され続けます — メモリリークです。一般的なソリューション: async パイプ (自動アンサブスクライブ) または takeUntilDestroyed()。
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
RxJS Observable は Angular 全体に組み込まれています。HttpClient、リアクティブフォーム、またはルーターを使用するには、これらなしではできません。
サブスクリプション、オペレータ、特にアンサブスクライブ(または async パイプを使用して手動管理を回避) を理解することは重要です。これは Angular の非同期データのための力の源でもあり、最も一般的な落とし穴 (忘れられたサブスクリプションからのメモリリーク) でもあります。