【じょうたいかんり】
状態管理 とは？
最終更新:
💡 変わるデータと画面の表示をそろえる
アプリケーションの中で変化するデータ（状態）を、どこに持ち、どう更新し、どの画面や処理で使うかを整理する仕組み・設計。UIとデータの整合性を保つために行う。
📌 このページのポイント
ひよこ 状態って、変数に入れておくだけじゃダメ？
ペンギン先生 値を持つだけでなく、更新したときにどの表示や処理へ伝えるかも大事だよ。Reactでは普通の変数への代入だけで再描画は起きない。useStateの更新関数などを使い、次の描画に新しい状態を反映するんだ。
ひよこ 全部を一か所に集めるの？
ペンギン先生 そうとは限らないよ。一つのフォームだけで使う入力値は、その部品の中に持てる。複数の部品で同じ値を使うなら、必要な範囲で共有する。アプリ全体で共有する状態をグローバル状態と呼ぶこともあるね。
ひよこ 部品同士でどう共有するの？
ペンギン先生 Reactなら、共通の親に状態を移して、値と更新用の処理をpropsで渡す方法があるよ。離れた子へ渡す場合にはContextも使える。Contextは値を渡す仕組みで、状態の保持や更新にはuseStateやuseReducerなどを組み合わせるんだ。
ひよこ Contextがあれば専用ライブラリはいらない？
ペンギン先生 必要な共有範囲や更新の複雑さによるよ。部品内の状態、親からのprops、Contextなどで対応できる場合もある。専用の状態管理ライブラリを使う場合も、何を共有したいか、どう更新したいかを先に整理しよう。
ひよこ 状態の整理で防げる問題は？
ペンギン先生 たとえばカートの商品を二か所で別々に保存すると、片方だけ更新されることがある。同じデータの重複を減らし、持っている値から計算できる合計などは必要に応じて計算すると、食い違いを減らせるよ。すべてのバグがなくなるわけではないけれど、更新の流れを追いやすくなるんだ。
まとめ：ざっくりこれだけ覚えればOK！
状態管理って出てきたら「アプリの変化するデータを整理して扱う仕組み」と思えばだいたいOK！
📖 おまけ：英語の意味
「state management」 ＝ 状態の管理
💬 state は「現在の状態」、management は「管理」で、アプリの「今の状態」を管理する手法