フロントエンドアプリケーションにおける状態（state）とは何か？

Question

Accepted Answer

**状態（State）** は、**時間とともに変化する**可能性があり、UIのレンダリングが依存するデータのことです。状態が変わると、UIはそれを反映するように更新されます。これはアプリケーションの任意の時点における「記憶」です。 ## 状態の例 ```text ✓ A counter value, a form's input text, a toggle (on/off) ✓ Whether a modal is open, the active tab, loading/error flags ✓ The logged-in user, items in a cart, fetched API data ✓ The current theme (dark/light), selected filters ``` ## 状態がUIを駆動する ```jsx function Counter() { const [count, setCount] = useState(0); // `count` is state return ( ); } ``` 現代的なフレームワークの中核的な考え方：**UI = f(state)**。DOMを手動で更新するのではなく、状態を変更すると、フレームワークが状態に合わせてUIを再レンダリングします。ボタンをクリック → `count` が変わる → 表示される数字が自動的に更新されます。 ## 状態 vs その他のデータ ```text State: changes over time, drives re-renders (count, user, isOpen) Constants: never change (PI, config URLs) — not state Derived: computed FROM state (fullName from firstName + lastName) — don't store separately ``` すべての変数が状態ではなく、**変化して**レンダリングに影響するデータだけが状態です。既存の状態から計算できる値を別個の状態として保存すべきではありません（同期がとれなくなるリスクがあります）。 ## 状態のカテゴリー ```text Local/UI state → belongs to one component (input text, isOpen) Global state → shared app-wide (user, theme, cart) Server state → data fetched from an API (cached remote data) URL state → in the address bar (filters, page number) ``` ## なぜ重要なのか状態を「変化してUIを駆動するデータ」として理解することは、すべてのフロントエンド開発の基礎です。メンタルモデル **UI = f(state)** は、React/Vue/Angularがどのように動作するかを説明しています — 状態を管理すると、ビューがそれに従います。何が状態で何が状態でないかを認識し、派生可能な値を複製しないことは、状態をうまく管理するための第一歩です。状態管理のすべてはこの概念の上に成り立っています。