リアクティブプログラミング

目次

• 概要
• 使用時機
• クイックスタート
• リファレンスガイド
• ベストプラクティス

概要

リアクティブストリームとObservableを使用して、非同期データフローを処理するレスポンシブなアプリケーションを構築します。

使用時機

• 複雑な非同期データフロー
• リアルタイムデータ更新
• イベント駆動アーキテクチャ
• UI状態管理
• WebSocket/SSE処理
• 複数データソースの統合

クイックスタート

最小限の動作例：

import {
  Observable,
  Subject,
  BehaviorSubject,
  fromEvent,
  interval,
} from "rxjs";
import {
  map,
  filter,
  debounceTime,
  distinctUntilChanged,
  switchMap,
} from "rxjs/operators";

// Create observable from array
const numbers$ = new Observable<number>((subscriber) => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

numbers$.subscribe({
  next: (value) => console.log(value),
// ... (see reference guides for full implementation)

リファレンスガイド

references/ ディレクトリ内の詳細な実装：

ベストプラクティス

✅ すべきこと

• メモリリーク防止のため購読解除する
• オペレータを使用してデータを変換する
• エラーハンドリングを適切に行う
• 高コストな処理には shareReplay を使用する
• 必要に応じてストリームを統合する
• リアクティブコードをテストする

❌ すべきでないこと

• 同じObservableに複数回購読する
• 購読解除を忘れる
• ネストされた購読を使用する
• エラーハンドリングを無視する
• Observableをステートフルにする