グローバル状態とローカル状態の使い分け
コロケーションの原則を適用します。状態は可能な限り利用者の近くに置き、関係のない複数のコンポーネントが必要とする場合にだけリフトアップします。
「グローバル状態とローカル状態の使い分け」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
状態をどこに置くか
すべての状態には、最適な置き場所があります。間違った場所を選ぶと、propsのバケツリレーに悩まされたり、不要なグローバル状態が複雑になったりします。基本原則は、状態を利用する側のできるだけ近くに置くことです。
コンポーネントのローカル状態
1つのコンポーネントだけが状態を使用する場合は、そのコンポーネントのuseState/refに置きます。共有する必要はないため、ローカルに保持します。これは最も単純で、最も一般的なケースです。
// Good: UI state local to the component
function Accordion() {
const [isOpen, setIsOpen] = useState(false); // only this component cares
return (
<div>
<button onClick={() => setIsOpen(o => !o)}>Toggle</button>
{isOpen && <div>Content</div>}
</div>
);
}状態を上位に持ち上げる
2つの兄弟コンポーネントが同じ状態を必要とする場合は、最も近い共通の祖先まで状態を持ち上げます。そして、propsとコールバックで子へ渡します。これは、グローバルストアを使う前の標準的なReact/Vueの方法です。
共有コンテキスト — 中規模の共有
propsのバケツリレーをせずにサブツリー全体で状態を共有する必要がある場合は、Context（React）またはprovide/inject（Vue）が適切なツールです。これは、ページや機能モジュールなど、中程度の範囲で共有する場合に使用します。
グローバルストア — アプリケーション全体の状態
次のような状態には、グローバルストア（Redux、Zustand、Pinia）を使用します。1) 関係のない多くのコンポーネントからアクセスされる、2) 画面遷移後も保持する必要がある、3) 更新ロジックが複雑である、4) DevToolsでの確認が役立つ。
例：ローカル状態
次のような状態にはローカル状態が適しています。フォームのフィールド値、ツールチップの開閉状態、モーダルの表示状態、ホバー状態、アニメーション状態、1つのコンポーネントに限定されたローディング表示です。
例：上位に持ち上げる状態
次のような状態は上位に持ち上げるのが適しています。2つの兄弟リストで共有するフィルター、タブグループで選択されているタブ、2つのステップ間で共有するフォームデータです。
例：Context / provide
次のような状態にはContextが適しています。現在のテーマ、認証済みユーザー、ロケールや言語、機能フラグ、通知スタックなど、多くの階層で利用される一方、更新頻度が低いものです。
例：グローバルストア
次のような状態にはグローバルストアが適しています。ショッピングカート、認証トークンとユーザーオブジェクト、通知キュー（どこからでもメッセージをトースト表示できるもの）、複数のビューで同時に表示するリアルタイムデータです。
サーバー状態とクライアント状態
ネットワークデータ（APIから取得するデータ）は、サーバー状態という特殊なカテゴリに分類されます。サーバー状態には、ローディングやエラーの処理、キャッシュ、無効化が必要です。React Query / SWR / TanStack Queryにサーバー状態の管理を任せれば、ストアは本当のクライアント状態に集中できます。
よくある間違い：すべてをグローバルストアに入れる
「念のため」という理由だけで、すべての状態をグローバルストアに入れないでください。ローカル状態のほうが低コストで、単純で、テストもしやすくなります。グローバル状態を使いすぎると、本来は独立しているべきコンポーネント同士が結合してしまいます。
判断のフレームワーク
次のように考えます。1) ほかのコンポーネントも必要とするか？ いいえ → ローカル。2) 近くにある兄弟コンポーネントが必要とするか？ はい → 上位に持ち上げる。3) コンポーネントのサブツリーが必要とするか？ はい → context/provide。4) 関係のない多くのコンポーネントが必要とするか、DevToolsが必要か？ はい → グローバルストア。
クイックチェック
1つのアコーディオンコンポーネントの開閉状態は、どこに保存すべきですか？
まとめ：状態を置く場所
原則は、状態を利用する側のできるだけ近くに置くことです。1つのコンポーネントだけが使う状態にはローカルのuseState/refを使用します。兄弟間で共有する場合は上位に持ち上げます。サブツリーで共有する場合はContext/provideを使用します。更新が複雑でアプリケーション全体に関わる状態にはグローバルストアを使用します。サーバー状態（APIデータ）はグローバルストアではなく、React Query/SWRで管理します。
よくある質問
「グローバル状態とローカル状態の使い分け」レッスンは無料ですか？
はい。「グローバル状態とローカル状態の使い分け」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「グローバル状態とローカル状態の使い分け」で何を学びますか？
コロケーションの原則を適用します。状態は可能な限り利用者の近くに置き、関係のない複数のコンポーネントが必要とする場合にだけリフトアップします。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「グローバル状態とローカル状態の使い分け」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Redux Toolkit：createSlice と configureStore
- 軽量な React 状態管理のための Zustand
- Vue の Pinia：defineStore と storeToRefs
- グローバル状態とローカル状態の使い分け