CONTACT PRIVACY POLICY
HOME / BLOG
BLOG

JavaScriptで検索条件をURLに保存する方法【URLSearchParams】

BLOG
デフォルト画像

検索フォームや絞り込みUIを作るとき、条件をURLに残しておくと便利です。ページを共有できる、戻るボタンで状態を戻せる、リロードしても条件が消えない、というメリットがあります。

この記事では、JavaScriptのURLSearchParamsを使って、検索条件をURLのクエリ文字列として保存する基本形をまとめます。

URLに状態を持たせるメリット

  • 検索条件を他の人へ共有できる
  • リロードしても入力内容を復元できる
  • 戻る・進むのブラウザ操作と相性が良い
  • 管理画面やダッシュボードでも使いやすい

HTML

<form class="filter-form" id="filterForm">
  <label>
    キーワード
    <input type="search" name="q" placeholder="CSS">
  </label>

  <label>
    カテゴリ
    <select name="category">
      <option value="">すべて</option>
      <option value="css">CSS</option>
      <option value="javascript">JavaScript</option>
      <option value="basketball">Basketball</option>
    </select>
  </label>

  <button type="submit">検索</button>
</form>

JavaScript

const form = document.querySelector('#filterForm');
const params = new URLSearchParams(window.location.search);

for (const [key, value] of params) {
  const field = form.elements[key];
  if (field) {
    field.value = value;
  }
}

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const nextParams = new URLSearchParams();
  const formData = new FormData(form);

  for (const [key, value] of formData) {
    const normalized = String(value).trim();

    if (normalized !== '') {
      nextParams.set(key, normalized);
    }
  }

  const nextUrl = `${window.location.pathname}?${nextParams.toString()}`;
  window.history.pushState({}, '', nextUrl);
});

条件を削除する関数

function updateQuery(params) {
  const query = params.toString();
  const nextUrl = query
    ? `${window.location.pathname}?${query}`
    : window.location.pathname;

  window.history.pushState({}, '', nextUrl);
}

function clearFilter(name) {
  const params = new URLSearchParams(window.location.search);
  params.delete(name);
  updateQuery(params);
}

実装時の注意点

  • 空文字はURLに入れない
  • 複数選択はappend()とgetAll()を検討する
  • ページ遷移が必要ならlocation.href、画面だけ変えるならhistory.pushState()を使う
  • URLへ入れる値は、個人情報や秘密情報にしない

WordPressで使うなら

WordPressの検索ページや記事一覧では、検索キーワード、カテゴリ、タグ、並び順をURLに持たせると使いやすくなります。テーマ側でフォームを作り、JavaScriptで入力内容をクエリに反映すれば、シンプルな絞り込みUIを作れます。

あわせて読みたい

参考資料

まとめ

URLSearchParamsを使うと、検索条件や絞り込み状態をURLに保存できます。小さな検索フォームでも、条件をURLに残すだけで、共有しやすく、戻るボタンにも強いUIになります。

このシリーズの記事

次に読む記事

STEP BACK