React Academy · レッスン

適切なStateの配置場所を選ぶ

Q: 「適切なStateの配置場所を選ぶ」で何を学びますか？

ローカルstate、リフトアップしたstate、グローバルstateの判断基準を適用します ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

ローカルstate、リフトアップしたstate、グローバルstateの判断基準を適用します

「適切なStateの配置場所を選ぶ」はCoddyKit上の無料React Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、stateを単一のコンポーネント、共通の祖先、React Context、グローバル状態管理ライブラリのどこに置くべきかを判断するための、実践的な枠組みを学びます。

ステップ1：このstateを使うのは誰か

まず、このstateを使ってレンダリングするコンポーネントはどれかを確認します。それらを一覧にしてください。1つのコンポーネントだけが使う場合は、そのコンポーネント内でstateをローカルに保持します。

ローカルstate

1つのコンポーネントだけが使うstateは、useStateを使ってそのコンポーネント内に置きます。例として、ドロップダウンが開いているかどうか、制御された入力の現在値、ツールチップが表示されているかどうかなどがあります。

function Toggle() {
  const [on, setOn] = useState(false);
  return <button onClick={() => setOn(!on)}>{on ? 'On' : 'Off'}</button>;
}

ステップ2：共通の祖先を見つける

複数のコンポーネントがstateを必要とする場合は、コンポーネントツリー内で最も近い共通の祖先を見つけます。そこにstateを移動し、propsとして下に渡します。

持ち上げたstate（2～3階層）

同じ階層レベルにある2～3個のコンポーネントで共有するstateは、持ち上げるのに適しています。共通の親がstateを所有し、propsを通じて下に渡します。

ステップ3：Propsのバケツリレーが深すぎないか

共通の祖先が利用側コンポーネントから4階層以上離れている場合、中間コンポーネントを通じてpropsを渡すとコードが煩雑になります。Contextを検討してください。

Contextのstate

ツリー全体の多くのコンポーネントが必要とする横断的な関心事にはContextを使います。例として、現在認証されているユーザー、アクティブなテーマ、選択されたロケールなどがあります。これらはほとんど変更されず、多くの利用側コンポーネントがあります。

ステップ4：stateが複雑、またはページ間で共有されるか

stateに複雑な更新ロジックがある場合、undo/redoが必要な場合、画面遷移後も保持する必要がある場合、または完全に分離されたコンポーネントツリーからアクセスする場合は、専用の状態管理ライブラリ（Zustand、Redux）を使います。

サーバーstateは別のもの

サーバーから取得したデータは*サーバーstate*であり、UI stateではありません。これをuseStateやグローバルストアに保存せず、キャッシュ、再取得、エラー状態を自動的に処理するReact Query、SWR、またはRTK Queryを使ってください。

判断フローチャート

利用者が1つ → ローカルのuseState。同程度の深さに利用者が2～3個 → 親にstateを持ち上げる。4階層以上のバケツリレー → Context。複雑なロジックまたはツリーをまたぐstate → Zustand/Redux。サーバーデータ → React Query/SWR。

確認問題

大規模なアプリで多くのコンポーネントがアクセスする、現在認証されているユーザーには、どのstateの配置場所が最も適していますか？

まとめ

利用側コンポーネントに合わせてstateの配置場所を選びます。1つならローカル、近くにある少数なら持ち上げる、多数の階層にまたがるならContext、複雑またはツリーをまたぐなら状態管理ライブラリ、サーバーデータならReact Queryを使います。

コース完了

おめでとうございます！**Stateの持ち上げとPropsのバケツリレーの解決策**を修了しました。これで、stateをどこに置き、どのように正しく共有するかを判断するための明確な枠組みを身につけました。

よくある質問

「適切なStateの配置場所を選ぶ」レッスンは無料ですか？

はい。「適切なStateの配置場所を選ぶ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「適切なStateの配置場所を選ぶ」で何を学びますか？

ローカルstate、リフトアップしたstate、グローバルstateの判断基準を適用しますブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「適切なStateの配置場所を選ぶ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Academyに戻る