先生と生徒の会話形式で理解しよう

生徒

「URLの後ろにあるキーワードみたいなものって使えるんですか？」

先生

「はい、それはクエリパラメータといってuseSearchParamsで扱えます。」

生徒

「どういうときに使うんですか？」

先生

「検索条件やページ番号などをURLに保存するときに使います。では詳しく見ていきましょう！」

1. クエリパラメータとは

クエリパラメータとは、URLの後ろに付ける追加情報のことです。

例えばキーワード検索やページ番号などをURLに含めることで、同じ画面でも表示内容を変えることができます。

この仕組みによって、ユーザーの状態をURLとして保存できるため、再読み込みしても同じ状態を再現できます。

2. クエリパラメータの基本形

クエリパラメータは疑問符の後にキーと値の組み合わせで表現します。

例えばキーワードがreactの場合はURLの後ろにキーワード情報を付けます。


/search?keyword=react

複数の条件がある場合はアンド記号でつなぎます。


/search?keyword=react&page=1

このようにしてURLに情報を持たせることができます。

3. useSearchParamsの基本的な使い方

React RouterではuseSearchParamsというフックを使ってクエリパラメータを扱います。


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

function SearchPage() {
  const [searchParams] = useSearchParams();

  const keyword = searchParams.get("keyword");

  return <h1>検索キーワード: {keyword}</h1>;
}

URLに応じてキーワードが表示されます

getメソッドを使うことで、指定した名前の値を取得できます。

4. クエリパラメータを更新する方法

useSearchParamsは値を取得するだけでなく更新することもできます。


function SearchPage() {
  const [searchParams, setSearchParams] = useSearchParams();

  const handleClick = () => {
    setSearchParams({ keyword: "react" });
  };

  return (
    <div>
      <button onClick={handleClick}>検索</button>
    </div>
  );
}

ボタンを押すとURLが更新されます

この方法を使うと、URLを書き換えるだけで画面の状態を変更できます。

5. 複数のパラメータを扱う

複数の値をまとめて扱うことも可能です。


setSearchParams({
  keyword: "react",
  page: "2"
});

このようにすることで、検索条件やページ番号を同時に管理できます。

6. useSearchParamsを使うメリット

クエリパラメータを使うことで、URLに状態を保存できます。

これにより、ページを再読み込みしても同じ条件を維持できます。

また、URLを共有するだけで同じ検索結果を他の人と共有できます。

7. よくある注意点

取得した値は文字列として扱われます。

数値として使う場合は変換が必要になります。

また、存在しないキーを取得すると値は空になりますので、条件分岐でチェックすると安全です。

8. URL設計と実務での活用例

実務では検索画面や一覧ページで頻繁に使われます。

例えば商品検索でカテゴリや並び順をURLに持たせることで、ユーザー体験が向上します。

URLと状態を一致させることは、使いやすいアプリケーションを作る上で重要な考え方です。

React RouterのuseSearchParamsでクエリパラメータを扱う方法を完全解説！初心者でもわかるURL操作