JavaScriptでURLSearchParamsを使いこなす5つの方法

はじめに
●URLSearchParamsとは
●URLSearchParamsの基本的な使い方
●応用例
- ○サンプルコード5：URLSearchParamsを使ったページネーション
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptのURLSearchParamsを使いこなすことができるようになります。

URLSearchParamsを使用することで、簡単にURLのパラメータを操作することが可能です。

ここでは、その基本的な使い方から応用例、注意点までを初心者目線で詳しく解説していきます。

●URLSearchParamsとは

URLSearchParamsは、JavaScriptのWeb APIの一つで、URLのクエリパラメータ（URLの?以降に記述される情報）を簡単に操作することができるオブジェクトです。

これを使うことで、URLからパラメータを取得したり、パラメータを追加・変更・削除することができます。

●URLSearchParamsの基本的な使い方

ここでは、URLSearchParamsの基本的な使い方を4つのサンプルコードを通して紹介します。

○サンプルコード1：URLからパラメータを取得

このコードでは、URLからパラメータを取得する方法を紹介しています。

この例では、URLの?id=1&name=testという部分から、idとnameの値を取得しています。

const url = 'https://example.com/?id=1&name=test';
const urlSearchParams = new URLSearchParams(url.split('?')[1]);

const id = urlSearchParams.get('id');
const name = urlSearchParams.get('name');

console.log(id); // "1"
console.log(name); // "test"

○サンプルコード2：URLにパラメータを追加

このコードでは、URLに新しいパラメータを追加する方法を紹介しています。

この例では、既存のURLにage=30というパラメータを追加しています。

const url = 'https://example.com/?id=1&name=test';
const urlSearchParams = new URLSearchParams(url.split('?')[1]);

urlSearchParams.append('age', '30');
const updatedUrl = `${url.split('?')[0]}?${urlSearchParams.toString()}`;

console.log(updatedUrl); // "https://example.com/?id=1&name=test&age=30"

○サンプルコード3：URLのパラメータを変更

このコードでは、URLの既存のパラメータを変更する方法を紹介しています。

この例では、URLのname=testというパラメータの値をupdatedに変更しています。

const url = 'https://example.com/?id=1&name=test';
const urlSearchParams = new URLSearchParams(url.split('?')[1]);

urlSearchParams.set('name', 'updated');
const updatedUrl = `${url.split('?')[0]}?${urlSearchParams.toString()}`;

console.log(updatedUrl); // "https://example.com/?id=1&name=updated"

○サンプルコード4：URLのパラメータを削除

このコードでは、URLのパラメータを削除する方法を紹介しています。

この例では、URLのname=testというパラメータを削除しています。

const url = 'https://example.com/?id=1&name=test';
const urlSearchParams = new URLSearchParams(url.split('?')[1]);

urlSearchParams.delete('name');
const updatedUrl = `${url.split('?')[0]}?${urlSearchParams.toString()}`;

console.log(updatedUrl); // "https://example.com/?id=1"

●応用例

○サンプルコード5：URLSearchParamsを使ったページネーション

このコードでは、URLSearchParamsを使ってページネーションを実現する方法を紹介しています。

この例では、ページ番号をURLのパラメータに追加し、その値を使ってデータを取得しています。

function getData(page) {
  // データを取得する処理（仮想的）
  console.log(`データを取得: ページ${page}`);
}

function changePage(page) {
  const url = new URL(window.location.href);
  const urlSearchParams = new URLSearchParams(url.search);

  urlSearchParams.set('page', page);
  url.search = urlSearchParams.toString();
  history.pushState(null, null, url.toString());

  getData(page);
}

// 初回ページロード時の処理
const initialUrl = new URL(window.location.href);
const initialPage = initialUrl.searchParams.get('page') || 1;
getData(initialPage);

●注意点と対処法

URLSearchParamsは、すべてのブラウザでサポートされていません。
特に、Internet Explorerでは使用できないため、対応が必要な場合は、ポリフィルを導入するか、別の方法を検討してください。
URLのパラメータを操作する際は、常にエンコードやデコードを意識してください。
特殊な文字が含まれている場合には、適切にエンコードされていることを確認しましょう。