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