状態管理
アプリが持つ「今どうなっているか」の情報を、どう扱うか。
状態の種類#
| 種類 | 例 | 置き場所 |
|---|---|---|
| ローカル UI 状態 | テキスト入力中の値、開閉 | コンポーネント内 |
| 共有状態 | ログインユーザ、テーマ | 上位、または DI |
| サーバ状態 | API から取得したデータ | キャッシュ層 |
| 永続状態 | 設定、保存データ | ディスク |
サーバ状態を他と同じに扱うと破綻する。 サーバ状態は本質的に
- 自分が所有していない（他が変えうる）
- 古くなる
- 非同期に取得する
- 失敗しうる
そのため専用の仕組み（SWR、TanStack Query など）が発達した。
単一方向データフロー#
状態 → 画面 → イベント → 状態の更新 → 画面…状態から画面を導出するので、 「更新し忘れて表示がずれる」が起きない。
双方向バインディングは書く量が減るが、 更新の連鎖が追えなくなる。 SwiftUI や React が 単一方向を基本にしているのはこのため。
置き場所の原則#
必要な最小の範囲に置く。
グローバルに置くと
- どこから変更されるか分からない
- テストで初期化が要る
- 不要な再描画が広がる
逆に下に置きすぎると、上に持ち上げる（lifting state up）ことになる。 共通の祖先まで持ち上げるのが基本形。
参考文献#
- React documentation. Managing State. https://react.dev/learn/managing-state
- Apple. Managing model data in your app. https://developer.apple.com/documentation/swiftui/managing-model-data-in-your-app
- Robert C. Martin. Clean Architecture: A Craftsman’s Guide to Software Structure and Design. Prentice Hall, 2017.