概要
本記事では、宣言的UIの思想を中核に、現代Webアプリで使われる主要な設計パターンを体系的に整理します。
UIの宣言性・データフロー・レンダリング戦略という3軸で分類し、フレームワークに依存しない抽象モデルを提示します。
1. 上位分類
| 軸 |
説明 |
主なパターン |
| UI宣言性の軸 |
宣言的UI or 命令的UI |
React型 / DOM直接操作型 |
| データフローの軸 |
一方向 or 双方向 |
Flux / MVC / MVVM |
| レンダリング戦略の軸 |
クライアント or サーバ中心 |
SPA / SSR / ISR / SSG |
2. 代表的パターン一覧
1 宣言的UI + 仮想DOM
1.1 基本形
- UI = f(state)
- 差分最適化による高パフォーマンス
- 例：React, Preact, Vue2
1.2 拡張形(4とのハイブリッド）
-
localStorage を軽量なデータアクセス層（DA層） として追加
- DBのように永続性はあるが、リアクティブ性（push通知） は持たない
-
displayBooks() のように 明示的にUI再レンダリング
- 実装例：Vanilla JS （読書記録アプリ、ToDo管理アプリ）
2 宣言的UI + Signals
- 仮想DOMを省略し、依存トラッキングによる再計算
- 例：Solid.js, Vue3, Qwik
3 宣言的UI + 双方向データバインディング
- 入力と状態が自動同期
- 例：Angular, Knockout.js, Vue2
4 宣言的UI + DB（リアクティブデータ層）
- DBがSingle Source of Truth
- 例：Firebase, Supabase, GraphQL Subscriptions
5 宣言的UI + 一方向データフロー（Flux/Redux）
- 状態変化をAction経由で管理
- 例：Redux, Zustand, Recoil
6 宣言的UI + GraphQL（宣言的データ取得）
- UIが必要なデータを宣言的に要求
- 例：Apollo, Relay
7 宣言的UI + SSR / ISR / SSG
- 状態をサーバで評価しHTML生成
- 例：Next.js, Remix, Nuxt
8 宣言的UI + 状態マシン
- 状態遷移をモデル化してUIを制御
- 例：XState, Redux Toolkit
9 命令的UI + Observerパターン
- イベント駆動でDOMを監視・更新
- 例：jQuery, Vanilla JS
10 宣言的UI + Reactive Stream
- 状態やイベントをストリームとして管理
- 例：RxJS, Angular Signals
3. まとめ表
| パターン |
宣言的/命令的 |
データフロー |
UI更新戦略 |
代表技術 |
| 仮想DOM |
宣言的 |
一方向 |
diff & patch |
React, Vue2 |
| Signals |
宣言的 |
一方向 |
fine-grained reactive |
Solid, Qwik |
| 双方向バインド |
宣言的 |
双方向 |
direct binding |
Angular, Knockout |
| DB連動 |
宣言的 |
リアルタイム |
push通知 |
Firebase, Supabase |
| Flux/Redux |
宣言的 |
一方向 |
Store→UI |
Redux, Zustand |
| GraphQL |
宣言的 |
一方向 |
declarative fetching |
Apollo, Relay |
| SSR/ISR |
宣言的 |
一方向 |
サーバレンダリング |
Next.js, Remix |
| 状態マシン |
宣言的 |
一方向 |
状態モデル駆動 |
XState |
| Observer |
命令的 |
双方向 |
イベント駆動 |
jQuery |
| Reactive Stream |
宣言的 |
一方向 |
stream→UI |
RxJS, Angular |
参考リンク
