【りあくてぃぶぷろぐらみんぐ】

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

💡 変化を察知して自動で連鎖、スプレッドシートのような反応型プログラミング
📌 このページのポイント
リアクティブプログラミング Excelのセルと同じ: 元データが変わると依存先が自動更新 データソース 値の変化を発行 map filter 購読者 自動で更新 データの流れ(ストリーム) 1 2 3 x*2 2 4 6 ストリーム型 RxJS / Reactor UIリアクティブ React / Vue シグナル型 SolidJS / Svelte5 共通の考え方: データの変化が自動的に伝搬する
リアクティブプログラミングのイメージ
ひよこ ひよこ

リアクティブプログラミングって何が反応するの?

ペンギン先生 ペンギン先生

データの変化に反応するんだよ。Excelで考えるとわかりやすい。セルA1に数字を入れると、A1を参照してる数式セルが自動で再計算されるよね。あれがまさにリアクティブだよ

ひよこ ひよこ

普通のプログラミングとどう違うの?

ペンギン先生 ペンギン先生

普通は値が変わったら手動で更新処理を呼ぶ必要があるけど、リアクティブなら宣言的に依存関係を定義しておけば、あとは自動で更新が伝搬するんだ

ひよこ ひよこ

RxJSってよく聞くけど、関係あるの?

ペンギン先生 ペンギン先生

RxJSはリアクティブプログラミングの代表的なライブラリだよ。Observableというストリームにmap、filter、mergeなどの演算子を組み合わせて、非同期データの流れを宣言的に処理できるんだ

ひよこ ひよこ

ReactVueのリアクティブとは同じもの?

ペンギン先生 ペンギン先生

広い意味では同じ考え方だね。Vueのref()やReactのuseState()は、値が変わるとUIが自動再レンダリングされる。ただRxJSのようなストリームベースのリアクティブとは実装の仕組みが違う。リアクティブマニフェストという文書があって、そこではレジリエンスやスケーラビリティまで含めた広い概念として定義されてるよ

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「リアクティブプログラミング」って出てきたら「データの変化が自動で伝わるプログラミング」と思えればだいたいOK!
📖 おまけ:英語の意味
「Reactive Programming」 = 反応型プログラミング
💬 Reactive は「反応する」という意味で、データの変化に反応して処理が動くイメージだよ
← 用語集にもどる