はじめに
先日、React の勉強会で、状態管理について取り上げました 🫐
React を学ぶ中で、切っても切り離せない概念の１つが、「状態管理」です。
その際、状態管理を学習する前に、
そもそもの必要性や、web 技術の推移を確認しておくことが、理解を深める助けになると思います！
なので今回は、React で状態管理を学ぶ前に知っておきたい背景について調査したので、基礎的な内容をまとめました！
時間の節約になれば、嬉しいです 🙌
状態管理とは？
公式の見出しを引用すると、
「インタラクティビティの追加」ですかね！
画面上の要素には、ユーザの入力に反応して更新されていくものがあります。例えば、画像ギャラリをクリックするとアクティブな画像が切り替わります。React では、時間の経過とともに変化するデータのことを state と呼びます。
要は、状態管理とは、アプリケーションが持つデータ（状態）を、適切に管理・更新・共有することです。
例えば、：
- ユーザーの入力値
- 画面の表示状態
- サーバーから取得したデータなど、
アプリケーションの動作に応じて、変わる情報を、適切に保持・更新する仕組みのことを指します！
そもそもの Web アプリケーション開発の背景・進化
それでは、なぜ状態管理が重要になったか、ざっくり見ていきましょう。。😎
1. 静的な Web サイトの時代
初期の Web サイトというのは、HTML ファイルをサーバーから配信する、
シンプルな構造でした。
ページの情報は固定され、ユーザーとのインタラクションは最小限です。
この時代には、複雑な状態管理などは、必要ありませんでした。
<!-- 従来の静的なWebサイト -->
<html>
<body>
<h1>商品一覧</h1>
<div>商品A</div>
<div>商品B</div>
<div>商品C</div>
</body>
</html>
2. jQuery 時代
jQuery の登場により、DOM の操作が容易になったことで、
動的な Web サイトが増えました。
// jQuery時代の例
$("#button").click(function () {
$("#content").text("新しい内容");
$("#counter").text("クリック済み");
// 複数の要素を直接操作...
});
JavaScript で、動きを出した Web サイトですね！
DOM 操作によって、状態を操作し、UI に動きを加えています。
3. SPA の台頭（状態の複雑化）
スマホが普及したことで、SPA の概念が普及しました。
SPA では、ページ全体をリロードすることなく、動的に画面の UI を変更します。
この移り変わりにより、
アプリケーション内で管理する状態が、複雑化していきました。
Twitter（X） を例に挙げると、
このような操作性の良いアプリの UI/UX は、すでに当たり前になっていますよね！
言い換えれば、
あらゆる操作に対して、その度にページ遷移して、毎回読み込まれるというのは、ユーザー体験を著しく低下させてしまいます。
なので、複雑な状態管理の必要性が高まってきたのです。
React が解決する問題
React は、上記の課題に対する解決策として生まれました。
特に重要なのが、UI を記述するアプローチの変化です。
命令的 UI
さて、従来の JavaScript/jQuery では、「命令的」に UI を操作していました：
// 命令的UI（jQuery時代）
function showMessage() {
// 1. ボタンを無効にする
$("#submit-btn").prop("disabled", true);
// 2. ローディング表示
$("#loading").show();
// 3. 成功時に結果を表示
$("#result").text("成功しました");
$("#loading").hide();
}
これらの方法では、状態が変わるたびに、
どの要素をどう変更するかを細かく指定する必要がありました。
なので、このようなアプローチは、
より柔軟で、複雑なアプリケーションを開発する場合、状態の管理がとても難しくなっていきます。。
宣言的 UI
React はこの問題を解決するために作られました。
React は、ここまでの
- スマホの普及により、より柔軟/高度な UI/UX が求められるようになった
- つまり、状態管理の複雑化
- その場合、命令的なアプローチでは、状態管理が難しくなった
という問題を解決するため、
「宣言的」なアプローチを採用しています。
つまり、
React では、「どのような状態の時に、どう見えるべきか」を宣言します。
// 宣言的UI（React）
function SubmitForm() {
const [status, setStatus] = useState("idle");
const [message, setMessage] = useState("");
if (status === "loading") {
return <div>読み込み中...</div>;
}
if (status === "success") {
return <div>成功しました: {message}</div>;
}
return (
<form onSubmit={handleSubmit}>
<button type="submit">送信</button>
</form>
);
}
状態に応じて、UI がどう見えるべきかを宣言することで、
複雑な状態管理が、より直感的に扱えるようになりました！
React の宣言的な UI により、開発者は：
- DOM 操作の詳細を気にする必要がない
- 状態の変更に対して、UI が自動的に更新される
- コンポーネント間での状態共有がしやすくなる
実際の DOM 操作は、React が裏側で行ってくれます！
これにより、私たち開発者は、「何を表示するか」だけに集中できますね👍
おわりに
最後まで読んでいただき、ありがとうございます 🥳
ハンズオン形式で、
実際に手を動かして「状態管理」を学習したい場合は、以下の教材もチェックしてみてください！！
そして、もし、間違いや補足情報などがありましたら、
ぜひコメントを追加してください！
Happy Hacking :)
参考
Discussion