フロントエンド開発 / 約25分

状態の置き場所を設計する

なぜこれを学ぶか

「状態をどこに置くか」はフロントエンド設計の最重要テーマです。場所を間違えると、バグの温床になります。

状態は スコープの最小化 が原則です。1つのコンポーネントでしか使わないなら useState、兄弟間で共有なら共通の親へ リフトアップ、ページをまたぐならURL・Context・外部ストアを検討します。

実は多くの「状態」は サーバーのデータのキャッシュ に過ぎません。これを useEffect + useState で手管理するのはアンチパターンです。TanStack Query などの サーバー状態管理ライブラリ を使いましょう。

URLに状態を持たせると、共有・ブックマーク・戻るボタン が無料で手に入ります。検索条件やタブの選択はURLに置くのが鉄則です。

判断フロー: ①URLで表現できる？ ②サーバーのデータ？ ③どの範囲で共有？この順で問うと迷いません。

重要ポイント

状態はスコープ最小化の原則
サーバーデータはキャッシュとして管理（useEffect手管理は非推奨）
検索条件・タブ選択はURLに置く

理解度チェック

選ぶと即座に解説が表示されます。

商品検索画面の「絞り込み条件」を管理する最適な場所は？

ヒントを見る

判断フローを思い出しましょう: ①URLで表現できる？ ②サーバーのデータ？ ③どの範囲で共有？「検索結果を同僚にURLで送りたい」という場面を想像すると答えが見えます。

コーディング演習実際に書く

検索条件をURLに持たせる練習です。条件オブジェクトからクエリ文字列を組み立てる関数を書いてください。params = { q, category, page } を受け取り '/search?q=...&category=...&page=...' の形式で返します。値が undefined/null/空文字のキーは除外し、値は encodeURIComponent でエンコードしてください。キーの順番はオブジェクトの定義順（Object.entries）とします。

function buildSearchUrl(params)

模範解答（読んで理解したら、自力で書き直してみましょう）

function buildSearchUrl(params) {
  const query = Object.entries(params)
    .filter(([key, value]) => value !== undefined && value !== null && value !== '')
    .map(([key, value]) => key + '=' + encodeURIComponent(value))
    .join('&')
  return query ? '/search?' + query : '/search'
}

スキルセルフチェック

このレッスンの内容をどの程度理解できましたか？

弱点マップで全体を確認する

前のレッスン次のレッスン