rxjs

RxJS（JavaScript 向けリアクティブ拡張機能）

バージョン： 8.x（2025） タグ： リアクティブプログラミング、オブザーバブル、非同期

参考資料： ドキュメント — オペレーター、API • Angular RxJS • GitHub

API の変更点

このセクションでは、最近のバージョン固有の API 変更について説明します。

• 新機能：RxJS 8 — 最新の TypeScript 型、小さなバンドル、より優れたツリーシェイキング ソース

• 新機能：相互運用ヘルパーの改善 — toSignal と toObservable による Signals との変換がより簡単になりました

• 新機能：RxJS 8 の使いやすさ — 簡潔なオペレーターシグネチャと、より安全なデフォルト設定

• 非推奨：従来のインポート形式 — パッチインポートではなく、RxJS 7 以降のパイプ可能なオペレーターを使用してください

ベストプラクティス

• テンプレートでは AsyncPipe を使用します — サブスクリプションとサブスクリプション解除を自動的に処理し、メモリーリークを防ぎます

@Component({
  template: `
    <div *ngIf="data$ | async as data">
      {{ data.name }}
    </div>
  `
})
export class MyComponent {
  data$ = this.service.getData();
}

• 適切なフラット化オペレーターを使用します — ユースケースに応じて選択してください：

// switchMap - cancel previous, keep latest (search)
search(term: string): Observable<SearchResult[]> {
  return this.searchService.search(term).pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(term => term ? this.http.get(...) : of([]))
  );
}

// mergeMap - run concurrently (multiple API calls)
this.items$.pipe(
  mergeMap(item => this.save(item))
);

// concatMap - run sequentially (order matters)
this.orders$.pipe(
  concatMap(order => this.processOrder(order))
);

// exhaustMap - ignore while running (form submit)
this.submit$.pipe(
  exhaustMap(() => this.submitForm())
);

• 必ずサブスクリプションを解除します — メモリーリークを防ぎます

// Use takeUntil pattern
private destroy$ = new Subject<void>();

ngOnInit() {
  this.data$.pipe(takeUntil(this.destroy$)).subscribe();
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

// Or use takeUntilDestroyed (Angular 16+)
private destroy$ = takeUntilDestroyed();

• エラー処理には catchError を使用します

this.http.get('/api/data').pipe(
  catchError(error => {
    console.error(error);
    return of([]); // Return fallback value
  })
);

• 共有オブザーバブルのキャッシュには shareReplay(1) を使用します

this.data$ = this.http.get('/api/data').pipe(
  shareReplay(1)
);

• オブザーバブルの名前には $ 接尾辞を付けます — 可読性が向上します

• UI の状態には Signals、イベントには RxJS を使用します — Angular の最新のパターンです

// Convert Observable to Signal
users = toSignal(this.users$, { initialValue: [] });

// Convert Signal to Observable (if needed)
name$ = toObservable(this.name);