概要
アプリケーションが崩壊する時、それは「状態の場所」と「状態の流れ」が破綻している。
状態とは、“何が変わるか”ではなく、“どこで持つべきか”を設計する行為である。
本稿では、JavaScript（およびReact/VueなどのSPA環境を前提）において、状態管理の判断軸と設計パターンを以下の観点で解説する：
- ローカル状態 vs グローバル状態の設計的判断
- Fluxアーキテクチャの本質
- 非同期ステート更新とイベント駆動の協調
- 状態スライスと責務分離
- 状態と副作用の分離設計
1. 状態の“責務”による分類
✅ ローカルステート
- UIに閉じている（フォームの開閉、アクティブタブ、ホバー状態）
- コンポーネントが完結している
✅ グローバルステート
- ユーザー認証、言語設定、カート情報、フィルタ条件
- 複数コンポーネント間で共有される“意味的状態”
→ 状態の“利用範囲”ではなく、“意味的責務”で判定すべき
2. Flux原則：状態設計の4原則
Action → Dispatcher → Store → View
- 単方向データフロー
- 状態は唯一の正解としてStoreに集約
- 更新は必ずAction経由
dispatch({ type: 'UPDATE_USER', payload: user });
→ ✅ “状態がどこで、どう変わるか”を1本道で追える構造
3. 状態スライスとスコープ分離
// userSlice.js
const initialState = { name: '', isLoggedIn: false };
function userReducer(state = initialState, action) {
switch (action.type) {
case 'LOGIN':
return { ...state, name: action.payload, isLoggedIn: true };
default:
return state;
}
}
- ✅ 状態はスライス（単位）ごとに切り出し
- ✅ reducer/Storeの責務をドメインごとに明確化
4. 非同期アクションと副作用の切り出し
async function loginUser(dispatch, credentials) {
dispatch({ type: 'LOGIN_REQUEST' });
try {
const user = await api.login(credentials);
dispatch({ type: 'LOGIN_SUCCESS', payload: user });
} catch (e) {
dispatch({ type: 'LOGIN_FAILURE', error: e });
}
}
- ✅ 副作用（API通信など）はAction内部 or Middlewareに委任
- ✅ reducerは純粋関数に保つことが原則
5. 状態フローの可視化とデバッグ
- Redux DevToolsやVue DevToolsで状態の履歴を追える構造
- “今の状態”ではなく、“状態がどう変化したか”が追えるように設計
- 状態更新の責務は1つの関数だけが持つように制御
6. 状態の“流れ”に関する設計指針
| 観点 | 意図 |
|---|---|
| 単方向データフロー | どの順番で状態が変化するかを保証する |
| イベント駆動 | 状態の変化はユーザー操作 or 副作用によって発火 |
| 状態の静的定義 | 状態の構造は明示的（初期状態・型など） |
| ストアの分割 | 状態が増えてもスケーラブルに設計できるようにする |
設計判断フロー
① 状態はUIに閉じている？ → ローカルstateで完結
② 状態が複数箇所に波及？ → グローバルstateとして切り出す
③ 状態変更が曖昧になってきた？ → Flux構造で流れを明示
④ 状態が副作用と混在？ → 副作用はActionまたはMiddlewareに分離
⑤ 状態が追えない？ → DevTools等で履歴をトラック可能に設計
よくあるミスと対策
❌ すべての状態をグローバルに持つ
→ ✅ 意味的責務に基づいて、スコープに応じて分離する
❌ Actionやreducerの肥大化
→ ✅ 状態スライスを責任範囲ごとにモジュール化する
❌ 状態変更がどこから行われているかわからない
→ ✅ “Actionを通す”ことを構造として強制する
結語
状態とは「今どうなっているか」ではなく、「どう変わってきたか」を設計する構造である。
- UIの背後にある意図
- 非同期による変化
- 操作に応じた反応
状態はコードの心拍である。
それを正しく設計することが、アプリケーションに“生命”を与える第一歩である。