React Academy · レッスン

URL Search ParamsによるState管理

Q: 「URL Search ParamsによるState管理」で何を学びますか？

useSearchParamsでfilter、sort、paginationをURLと同期します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

useSearchParamsでfilter、sort、paginationをURLと同期します。

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

状態を URL に保存する理由

フィルター、検索クエリ、並び順、ページネーションは URL に含めます。そうすれば、ユーザーは同じ表示をブックマーク、共有したり、状態を失わずにその表示へ戻ったりできます。

useSearchParams フック

useSearchParams() は、現在の URLSearchParams インスタンスと setter 関数を返します。useState と似ていますが、URL のクエリ文字列に基づいて状態を管理します。

import { useSearchParams } from 'react-router-dom';

function ProductList() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q') || '';
  const page = Number(searchParams.get('page') || 1);
  // ...
}

1つのパラメーターの読み取り

searchParams.get('key') を使って値を読み取ります。パラメーターが存在しない場合は null を返すため、フォールバック値を用意します。

const sort = searchParams.get('sort') ?? 'name';
const order = searchParams.get('order') ?? 'asc';

ナビゲーションなしでパラメーターを書き換える

新しいオブジェクトまたは更新関数を指定して setSearchParams() を呼び出し、パラメーターを変更します。React Router は URL を更新して再レンダリングしますが、ページ全体のナビゲーションは発生しません。

function SortButton({ field }) {
  const [searchParams, setSearchParams] = useSearchParams();
  const handleClick = () => {
    setSearchParams(prev => {
      prev.set('sort', field);
      prev.set('page', '1');
      return prev;
    });
  };
  return <button onClick={handleClick}>Sort by {field}</button>;
}

更新時に他のパラメーターを保持する

setSearchParams の更新関数形式を使うと、変更するパラメーターだけを更新し、それ以外をすべて保持できます。

setSearchParams(prev => {
  prev.set('q', newQuery);
  // 'sort' and 'page' are unchanged
  return prev;
});

入力値と検索パラメーターの同期

URL パラメーターから入力値を制御し、変更時に URL を更新して、両者を同期させます。

function SearchBar() {
  const [params, setParams] = useSearchParams();
  const q = params.get('q') || '';
  return (
    <input
      value={q}
      onChange={e => setParams(prev => {
        prev.set('q', e.target.value);
        prev.set('page', '1');
        return prev;
      })}
    />
  );
}

検索パラメーターでのブール値フラグ

パラメーターの有無（または '1'/'0' という文字列）を使って、パネルの開閉やアクティブなフィルターなど、UI のブール値状態を表します。

const showFilters = searchParams.has('filters');

const toggleFilters = () => {
  setSearchParams(prev => {
    if (prev.has('filters')) prev.delete('filters');
    else prev.set('filters', '1');
    return prev;
  });
};

検索パラメーターでの配列値

URLSearchParams は同じキーに複数の値を設定できます。getAll('key') を使うと、値を配列として読み取れます。

// URL: /products?tag=react&tag=typescript
const tags = searchParams.getAll('tag'); // ['react', 'typescript']

// Setting multiple values:
const newParams = new URLSearchParams();
selectedTags.forEach(t => newParams.append('tag', t));
setSearchParams(newParams);

履歴の置換と追加

setSearchParams の第2引数に { replace: true } を渡すと、フィルターの変更によってブラウザーの履歴スタックが埋め尽くされるのを防げます。

setSearchParams(prev => { prev.set('q', val); return prev; }, { replace: true });

パラメーターからの状態の導出

解析済みの整数や検証済みの列挙値などの派生値は、コンポーネントの先頭で生の文字列パラメーターから計算します。これにより、コンポーネント内で安全に使用できます。

const rawPage = searchParams.get('page');
const page = Math.max(1, parseInt(rawPage || '1', 10));

const rawSort = searchParams.get('sort');
const sort = ['name', 'price', 'date'].includes(rawSort) ? rawSort : 'name';

検索パラメーターを使ったリンク

Link または to オブジェクトの search プロパティを使うと、特定のクエリパラメーターを設定した URL に移動できます。

<Link to={{ pathname: '/products', search: '?sort=price&order=asc' }}>
  Sort by Price
</Link>

理解度チェック

?tag=react&tag=ts のように同じキーが繰り返されている場合、すべての値を読み取る URLSearchParams のメソッドはどれですか？

まとめ

useSearchParams() はコンポーネントの状態を URL のクエリ文字列と同期します。他のパラメーターを保持するには更新関数形式を、履歴の肥大化を防ぐには { replace: true } を、配列形式のパラメーターには getAll() を使用します。

よくある質問

「URL Search ParamsによるState管理」レッスンは無料ですか？

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

「URL Search ParamsによるState管理」で何を学びますか？

useSearchParamsでfilter、sort、paginationをURLと同期します。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「URL Search ParamsによるState管理」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← React Academyに戻る