状態管理＠フロントエンドアーキテクチャ¶
はじめに¶
本サイトにつきまして、以下をご認識のほど宜しくお願いいたします。
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アーキテクチャ¶
記入中...