Server DataとLocal UI Stateの区別
server data（取得、cache、更新）と一時的なUI state（開いているpanel、input）を分離します。ロジックを明確にし、更新を予測しやすくします。
「Server DataとLocal UI Stateの区別」はCoddyKit上の無料React Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。
2種類の状態
目標：サーバーデータとローカルUIを混同しないようにします。
- サーバーデータ：取得、キャッシュ、更新の対象
- ローカルUI：表示フラグ、入力値、フィルター
- 関心を分離すると、コードがシンプルになります
判断の目安
- APIから取得し、再取得できるデータは、サーバー状態として扱います。
- 表示だけを制御するものは、ローカルに保持します。
- fetch の状態（idle/loading/error）は、サーバーデータの近くに保持します。
デモ：fetch と refresh（サーバー状態）
商品をサーバーデータとして取得し、状態、最終更新日時、手動更新機能を含めます。
<div id="root"></div>デモ：ローカルUI状態（表示のみ）
ローカルUI：表示だけに関する状態（開閉、入力テキスト）です。サーバーには送信しません。
<div id="root"></div>デモ：サーバーデータとローカルフィルターの組み合わせ
取得ロジックを分離し、その後ローカルフィルターを適用します。サーバーキャッシュは変更しません。
<div id="root"></div>ヒントと注意点
- fetch ロジックと状態をサーバーデータと一緒に保持します
- 表示専用のフラグや入力値にはローカル状態を使用します
- UIの調整のためにキャッシュ済みのサーバーデータを変更せず、派生させます
状態の分類確認
振り返り
振り返り：取得して更新できるデータはサーバー状態として扱います。表示に関する状態（トグルや入力値）はローカルUIとして保持します。キャッシュを変更せず、そこからUIを派生させて組み合わせます。
よくある質問
「Server DataとLocal UI Stateの区別」レッスンは無料ですか？
はい。「Server DataとLocal UI Stateの区別」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。
「Server DataとLocal UI Stateの区別」で何を学びますか？
server data（取得、cache、更新）と一時的なUI state（開いているpanel、input）を分離します。ロジックを明確にし、更新を予測しやすくします。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。
「Server DataとLocal UI Stateの区別」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Server DataとLocal UI Stateの区別
- NormalizationとOptimistic Update（概念）
- 大規模ライブラリなしのSyncパターン