URLとクエリパラメータを操作しよう

検索条件をURLへ含めると、再読み込み、共有、戻る操作でも同じ状態を復元できます。

今回は、カテゴリとキーワードを持つ記事検索フォームを作り、入力条件をクエリパラメータへ反映します。

今回使用するファイル構成

javascript-practice/
├── index.html
└── js/
    └── script.js

検索条件をURLへ反映する

現在のURLを解析する

URLが/articles?category=javascript&page=2の場合を考えます。

const url = new URL(window.location.href);

console.log(url.pathname);
console.log(url.searchParams.get('category'));
console.log(url.searchParams.get('page'));

存在しないパラメータをget()するとnullになります。

検索条件を更新する

url.searchParams.set('category', 'php');
url.searchParams.set('page', '1');
url.searchParams.delete('keyword');

ページを移動する場合は次のようにします。

window.location.href = url.toString();

履歴を保ちながらURLだけ変える

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

pushState()はページを再読み込みしません。URLを変えた後の表示更新と、戻る・進む操作のpopstate対応を自分で実装する必要があります。

検索フォームとURLを同期する

HTMLを用意する

<form id="search-form">
  <label for="keyword">キーワード</label>
  <input id="keyword" type="search">

  <label for="category">カテゴリ</label>
  <select id="category">
    <option value="">すべて</option>
    <option value="html-css">HTML / CSS</option>
    <option value="javascript">JavaScript</option>
  </select>

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

<p id="search-result" aria-live="polite"></p>

初期表示でURLから復元する

const form = document.querySelector('#search-form');
const keywordInput = document.querySelector('#keyword');
const categorySelect = document.querySelector('#category');
const result = document.querySelector('#search-result');

function readConditionsFromUrl() {
  const url = new URL(window.location.href);

  return {
    keyword: url.searchParams.get('keyword') ?? '',
    category: url.searchParams.get('category') ?? '',
  };
}

function showConditions(conditions) {
  keywordInput.value = conditions.keyword;
  categorySelect.value = conditions.category;
  result.textContent = `キーワード「${conditions.keyword || '指定なし'}」で表示しています。`;
}

showConditions(readConditionsFromUrl());

?? ''により、パラメータが存在しない場合も入力欄へ設定できる文字列になります。

送信時にURLを更新する

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

  const url = new URL(window.location.href);
  const keyword = keywordInput.value.trim();
  const category = categorySelect.value;

  if (keyword === '') {
    url.searchParams.delete('keyword');
  } else {
    url.searchParams.set('keyword', keyword);
  }

  if (category === '') {
    url.searchParams.delete('category');
  } else {
    url.searchParams.set('category', category);
  }

  window.history.pushState({}, '', url);
  showConditions({ keyword, category });
});

URLSearchParamsが空白や日本語をURL用にエンコードするため、自分で文字列を連結する必要はありません。

戻る・進む操作へ対応する

window.addEventListener('popstate', () => {
  showConditions(readConditionsFromUrl());
});

pushState()で追加した履歴を戻るとpopstateが発生します。URLだけでなくフォームと検索結果も復元します。

pushStateとreplaceStateを使い分ける

pushState()は新しい履歴を追加します。利用者が「戻る」で一つ前の条件へ戻れる変更に向いています。replaceState()は現在の履歴を置き換えます。初期値の補正など、戻る対象にしたくない変更に使います。

まとめ

URLとURLSearchParamsで文字列を安全に解析・更新できます。次の記事ではタイマー処理を扱います。