状態管理
状態管理とは
状態(state)とは、画面の表示を決めるデータのことです。「ログイン中のユーザー」「カートの中身」「モーダルが開いているか」— これらはすべて状態です。状態管理とは、この状態をどこに置き、誰が、どうやって更新するかを整理する設計手法を指します。
[[SPAとMPA]] でいう SPA では、ページを再読み込みしないため状態がずっとメモリ上に生き続けます。アプリが育つほど「どこで書き換わったのかわからない」「同じデータのコピーが複数箇所にある」といった混乱が起きやすく、状態管理が重要になります。
状態の置き場所は3段階
| 置き場所 | 例 | 向いている状態 |
|---|---|---|
| コンポーネント内 | [[React]] の useState | 入力中のフォーム値など、その画面だけで使うもの |
| グローバルストア | Redux / Zustand / Pinia | ログインユーザー、テーマなど画面をまたぐもの |
| サーバー状態専用 | TanStack Query / SWR | APIから取得したデータ(キャッシュ・再取得の管理) |
原則は「できるだけ狭いスコープに置く」です。何でもグローバルに置くと、変更の影響範囲が追えなくなります。
単方向データフロー
多くの状態管理ライブラリは、単方向データフローという考え方に基づいています。
状態(store)→ 画面に表示 → ユーザー操作 → アクションを発行 → 状態を更新 → 画面に反映…
状態の更新を「決まった手続き(アクション)経由」に限定することで、いつ・誰が・なぜ変更したかを追跡できるようにします。[[Vue.js]] の Pinia も React 向けの Redux も、この点は共通です。
初学者向けポイント
- いきなりライブラリを導入せず、まずフレームワーク標準の機能(useState や ref)で困るまで書いてみるのがおすすめです
- [[fetchと非同期通信]] で取ってきたデータは通信・キャッシュ・再取得が絡む特殊な状態で、専用ライブラリに任せると劇的に楽になります
- 再読み込みしても消したくない状態は、[[WebストレージとCookie]] の localStorage に保存して復元します
- アニメーションの座標のように毎フレーム書き換わる値は、グローバルストアに置くと更新のたびに広い範囲が再描画されて重くなります。[[力学モデルによるグラフレイアウト]] のシミュレーション中の座標などは描画に近い場所で保持し、確定した結果だけを共有する状態として扱うのが定石です
関連技術とのつながり
- [[React]] / [[Vue.js]] — 状態管理が主要な設計テーマになるフレームワーク
- [[SPAとMPA]] — SPA だからこそ状態管理が課題になる
- [[JavaScript]] — 状態はJSのオブジェクトとして保持される
- [[WebストレージとCookie]] — 状態の永続化先
Q: 「状態(state)」の説明として正しいのはどれ?
- [x] 画面の表示を決めるデータのこと
- [ ] サーバーのCPU使用率のこと
- [ ] CSSのクラス名の命名規則のこと
解説: ログインユーザーやカートの中身など、画面の表示を決めるデータが状態です。
Q: 状態の置き場所の原則として本文で挙げられているのはどれ?
- [ ] すべての状態をグローバルストアに集める
- [x] できるだけ狭いスコープに置く
- [ ] すべての状態をサーバーに置く
解説: 何でもグローバルに置くと影響範囲が追えなくなるため、必要最小限のスコープに置くのが原則です。
Q: 単方向データフローの狙いはどれ?
- [ ] 通信量を半分にすること
- [ ] CSSの記述量を減らすこと
- [x] 状態の変更を決まった手続きに限定し、変更を追跡できるようにすること
解説: 更新をアクション経由に限定することで「いつ・誰が・なぜ変更したか」を追えるようにします。