状態管理＠フロントエンドアーキテクチャ¶
はじめに¶
本サイトにつきまして、以下をご認識のほど宜しくお願いいたします。
01. 状態管理とは¶
UI レンダリングに必要なデータを保持し、またユーザー操作や通信処理結果に応じて非同期に変更すること。
| フレームワーク／パッケージ | 状態管理関数 |
|---|---|
| React | useState、useReducer、useRef、useContext |
| Vue.js | ref、reactive、computed、watch |
| Next.js (Reactと同じ) | useState、useReducer、useRef、useSyncExternalStore、useContext |
| Nuxt.js (Vue.jsと同じ) | ref、reactive、computed、watch |
02. 状態管理するべきデータ¶
選択途中の絞り込み条件¶
UI で次を設定している間、そのデータをバックエンドに送信することなく、フロントエンド上で管理する。
また、管理されたデータに応じた UI を表示する。
- 絞り込み項目の設定
- 並び替え項目と昇順／降順の設定
- OR 条件と AND 条件の設定
最終的に決定ボタンが押されたタイミングで状態をバックエンドに送信する。
カーソルをあてている表示項目¶
UI で次のように操作している間、カーソルを当てている表示項目のデータをフロントエンド上でのみ管理する。
また、管理されたデータに応じた UI を表示する。
- グラフや表の値にカーソルをあてる
- カレンダーの日付にカーソルをあてる
- 地図の位置にカーソルをあてる
02. MVPアーキテクチャ¶
MVPアーキテクチャとは¶
以下の要素が該当のロジックをもつ。
- View：UI レンダリングロジック、CSS スタイリングロジック
- Presenter：状態管理ロジック
- Model：機能モデル
03. MVVMアーキテクチャ¶
MVVMアーキテクチャとは¶
以下の要素が該当のロジックをもつ。
- View：UI レンダリングロジック、CSS スタイリングロジック
- ViewModel：状態管理ロジック
- Model：機能モデル
View と Model の間に ViewModel を配置し、View と ViewModel の間で双方向にデータをやり取り (双方向データバインディング) する。
これによって、View と Model の間を疎結合にする。
Vue.js では、意識せずに MVVM アーキテクチャで実装できるようになっている。
状態管理との関係性¶
以下の状態管理を使用している場合、MVVM アーキテクチャで構築することになる。
- CSR
04. Fluxアーキテクチャ¶
記入中...
05. Reduxアーキテクチャ¶
記入中...