reactive-programming

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

目次

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

概要

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

使用する場面

• 複雑な非同期データフロー
• リアルタイムのデータ更新
• イベント駆動型アーキテクチャ
• 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/ ディレクトリにある詳細な実装：

ガイド	内容
RxJS の基本	RxJS の基本
デバウンスを使った検索	デバウンスを使った検索
状態管理	状態管理
再接続機能付き WebSocket	再接続機能付き WebSocket
複数のストリームの結合	複数のストリームの結合
バックプレッシャーの処理	バックプレッシャーの処理
カスタムオペレーター	カスタムオペレーター

ベストプラクティス

✅ 推奨事項

• メモリリークを防ぐために購読を解除します
• オペレーターを使ってデータを変換します
• エラーを適切に処理します
• コストの高い処理には shareReplay を使用します
• 必要に応じてストリームを結合します
• リアクティブコードをテストします

❌ 避けるべきこと

• 同じオブザーバブルを複数回購読しないでください
• 購読解除を忘れないでください
• ネストした購読を使用しないでください
• エラー処理を無視しないでください
• オブザーバブルに状態を持たせないでください