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

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

リアクティブプログラミングは、データの変化を自動的に伝播させ、非同期データストリームを宣言的に処理するパラダイムである。RxJS、React の状態管理、Kotlin Flow が代表例。

命令的 vs リアクティブ

// 命令的: 手動でデータの変化を追跡
let a = 1;
let b = 2;
let c = a + b; // 3
a = 10;
// c は 3 のまま (自動更新されない)

// リアクティブ: データの変化が自動伝播
// React の例
const [a, setA] = useState(1);
const [b, setB] = useState(2);
const c = a + b; // a や b が変わると c も自動更新

RxJS の Observable

import { fromEvent, debounceTime, map, switchMap } from 'rxjs';

// 検索ボックスの入力をリアクティブに処理
fromEvent(searchInput, 'input').pipe(
  debounceTime(300),                    // 300ms 待つ
  map(e => (e.target as HTMLInputElement).value), // 値を取得
  switchMap(query => fetch(`/api/search?q=${query}`)), // API 呼び出し
).subscribe(results => renderResults(results));
// 入力 → デバウンス → API → 表示 が宣言的に記述

React のリアクティブ性

function PriceCalculator() {
  const [quantity, setQuantity] = useState(1);
  const [unitPrice] = useState(1000);
  // quantity が変わると自動的に再計算・再レンダリング
  const total = quantity * unitPrice;
  const tax = total * 0.1;

  return (
    <div>
      <input type="number" value={quantity} onChange={e => setQuantity(+e.target.value)} />
      <p>合計: {total} 円 (税込: {total + tax} 円)</p>
    </div>
  );
}

リアクティブストリームの操作

操作	説明
map	値を変換
filter	条件に合う値だけ通す
debounceTime	一定時間待ってから最後の値を通す
switchMap	新しいストリームに切り替え
merge	複数のストリームを合流
retry	エラー時にリトライ

リアクティブ vs コールバック vs async/await

方式	適用
コールバック	単発のイベント
async/await	1 回の非同期操作
リアクティブ (Observable)	連続するデータストリーム

リアクティブプログラミングの関連書籍も参考になる。