状態管理

📖 もうちょい詳しく

何が新しいの？

昔のWebサイトは、ページを切り替えるたびにサーバーから新しい画面を丸ごと受け取っていました。今のアプリは画面の中身だけをくるくる書き換えるようになり、その分だけ「いま何が起きているか」をアプリ自身が覚えておく必要が出てきました。この「覚えておくデータ」を整理して扱う考え方が状態管理です。

どうやって動いてるの？

ログインしているか、カートに何が入っているか、といったデータを「状態（state）」と呼びます。状態管理では、これらをバラバラに持たず、なるべく一カ所にまとめて置きます。状態が変わると、それを使っている画面の部品に変更が伝わり、表示が自動で更新されます。

何ができるの？

たとえば商品をカートに入れると、画面右上の個数表示と、別ページのカート一覧が同時に正しく変わります。データの置き場所が一つにそろっているので、ずれた表示やバグが起きにくくなります。アプリが大きくなっても、混乱しにくく作れます。

🌱 身近なたとえ

会社の「共有ホワイトボード」で例えると分かりやすいです。各自がメモを手元の紙にバラバラに書くと、誰の数字が正しいのか分からなくなります。そこで最新の情報は一枚のホワイトボードにだけ書く、と決めておきます。誰かが書き換えれば全員がそれを見て動けます。状態管理も、大事なデータを一カ所にまとめて、みんながそこを見るようにする工夫です。

✅ まず覚えるポイント

• 「状態」とは、アプリが覚えておく今のデータ（ログイン状態やカートの中身など）のことです。
• 状態管理は、そのデータを一カ所に整理してまとめる仕組みです。
• データが変わると、それを使う画面が自動で更新されます。
• 置き場所がそろうので、表示のずれやバグが減ります。
• アプリが大きくなるほど効果を感じやすい考え方です。

🧭 よくある勘違い

データベースと同じこと？

似ていますが置き場所が違います。データベースはサーバー側に長く保存する倉庫です。状態管理はおもに画面側（ブラウザやアプリ内）で、今この瞬間の表示に必要なデータを扱います。役割が分かれていると考えると整理しやすいです。

専用の道具を使わないとできない？

そんなことはありません。小さなアプリなら、フレームワークに最初からある機能だけで十分なことが多いです。規模が大きくなって管理が複雑になってきたときに、専用の道具を足すかどうかを検討します。

🧩 関連して覚えると楽な言葉

• React: 画面を部品に分けて作るための代表的な道具で、状態管理と相性がよいです。
• UI: 利用者が見たり触ったりする画面まわりのこと。状態が変わると、このUIの表示が更新されます。
• SPA: ページを切り替えず中身だけ書き換える作りで、状態管理が特に活きます。
• API: サーバーとデータをやり取りする窓口。状態として保持するデータの取得元になります。

🏁 ひとことでまとめ

アプリが覚えておくデータを「一つの置き場所」にそろえて、画面がいつも正しく見えるようにする土台づくりです。