Notes

Reactive Models in Frontend

4 min read

フロントエンドのリアクティブモデルは大きく3つの設計思想に分かれる。

  1. 再実行モデル（React）
  2. ストリームモデル（Rx）
  3. 依存グラフモデル / Fine-grained reactivity（Signals系）

このノートでは Signals / Fine-grained reactivity / RxJS の関係と使い分けを整理する。

1. Reactiveモデル

1.1 Component Rerender

代表：

  • React

特徴

  • state変更 → component関数を再実行

  • Virtual DOM diff

  • 更新粒度は component 単位

state change
   ↓
component rerun
   ↓
virtual DOM diff

メリット

  • 思考モデルが単純

  • UI中心設計

デメリット

  • 不必要な再実行が起きる

  • dependency管理が手動

例

useEffect(() => {
  console.log(count)
}, [count])

2. ストリームモデル

代表

  • RxJS

概念

Event Stream

データは 時間と共に流れる値。

t1: value
t2: value
t3: value

例

click$
  .pipe(
    map(x => x.clientX),
    filter(x => x > 100)
  )

メリット

  • 非同期処理

  • イベント処理

  • WebSocket / streaming

デメリット

  • UI stateには重い

  • 思考が抽象的

3. 依存グラフモデル

別名

Fine-grained Reactivity

代表

  • SolidJS

  • Angular Signals

  • Vue

  • MobX

概念

state → computed → effect

依存グラフ

count → double → render

更新時

count change
   ↓
double recompute
   ↓
render update

特徴

  • 必要なノードだけ更新

  • dependencyは自動追跡

4. Signalsとは

Signalsは

Fine-grained reactivityを実装する状態プリミティブ

例

const count = signal(0)
 
const double = computed(() => count() * 2)
 
effect(() => {
  console.log(double())
})

Signalは

Reactive Value Node

として依存グラフのノードになる。

5. 依存グラフが自動生成される仕組み

Signalsは

実行時トラッキング

で依存関係を作る。

流れ

effect実行
   ↓
signal読み取り
   ↓
依存登録

結果

count ──► effect

更新

count.set()
   ↓
effect再実行

6. Signals vs Fine-grained Reactivity

重要：

同じものではない

関係

Fine-grained Reactivity
       ↑
     Signals
概念役割
Fine-grained reactivityリアクティブモデル
Signal状態プリミティブ

7. ライブラリ対応

LibraryModel
Reactrerender model
RxJSstream model
SolidJSfine-grained
Angular Signalsfine-grained
Vuefine-grained
MobXfine-grained

8. AngularがSignalsを導入した理由

従来

Angular
   ↓
RxJS中心

問題

  • UI stateにRxは重い

  • subscribe管理が複雑

現在

RxJS → イベント
Signals → UI state

役割分離。

9. モデル比較

モデル更新単位思考モデル
Reactcomponentrerender
RxJSstreamevent flow
Signalsnodedependency graph

10. 使い分け

これらは 排他的ではなく横で使い分けることが多い。

典型的な役割分担：

Signals → UI state
RxJS     → async / events

例

UI状態

form state
toggle
derived state

→ Signals

イベント / 非同期

websocket
user events
streaming data
complex async pipeline

→ RxJS

UIレンダリング

component tree
view logic

→ React / Angular component

11. 実際の構成例

AngularやSolidでは

WebSocket (RxJS)
      ↓
Signal state
      ↓
UI

のような構成になることが多い。

12. まとめ

リアクティブモデルは

React
  rerender model

Rx
  stream model

Signals
  dependency graph model

そして実務では

Signals → UI state
RxJS → async/event

のように 横で使い分けることが多い。

グラフビュー