読み込み中...

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

JavaScriptのURLSearchParamsを使いこなす方法を解説する記事のサムネイル画像 JS
2023.05.09
この記事は約6分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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);

●注意点と対処法

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

まとめ

この記事では、JavaScriptのURLSearchParamsを使って、URLのパラメータを操作する方法を、サンプルコードを交えながら詳しく解説しました。

これであなたも、URLSearchParamsを使って、URLのパラメータを取得・追加・変更・削除できるようになります。

また、ページネーションの応用例や注意点も紹介しましたので、ぜひ実際の開発で活用してください。