サンプルコード付き：JavaScript、jQuery、およびクエリ文字列を使ってクエリ文字列パラメータを操作する方法

2024-04-02

JavaScript、jQuery、およびクエリ文字列を使用してクエリ文字列パラメータを追加または更新する方法

このチュートリアルでは、JavaScript、jQuery、およびクエリ文字列を使用して、URL のクエリ文字列パラメータを追加または更新する方法を説明します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

JavaScript の基本的な知識
jQuery ライブラリの理解
クエリ文字列とは何か、そしてどのように機能するかの理解

クエリ文字列は、URL の末尾に "?" 記号が付いた後に続く文字列です。パラメータ名と値のペアで構成され、"&" 記号で区切られます。

例：

https://www.example.com/?param1=value1&param2=value2

この例では、URL に 2 つのクエリ文字列パラメータがあります。

param1 は value1 に設定されています

JavaScript を使用してクエリ文字列パラメータを追加または更新するには、次の方法を使用できます。

location.search プロパティは、現在の URL のクエリ文字列を取得します。このプロパティを使用して、新しいパラメータを追加したり、既存のパラメータの値を変更したりできます。

// クエリ文字列を取得
const queryString = location.search;

// 新しいパラメータを追加
const newParam = "param3=value3";
location.search = queryString + "&" + newParam;

// 既存のパラメータの値を変更
const existingParam = "param1";
const newValue = "updatedValue";
location.search = queryString.replace(
  new RegExp(`param1=${existingParam}`),
  `param1=${newValue}`
);

URLSearchParams API は、URL のクエリ文字列を操作するためのより新しい方法を提供します。

// URLSearchParams オブジェクトを作成
const params = new URLSearchParams(location.search);

// 新しいパラメータを追加
params.append("param3", "value3");

// 既存のパラメータの値を変更
params.set("param1", "updatedValue");

// クエリ文字列を更新
location.search = params.toString();

$.param() メソッドは、オブジェクトをクエリ文字列に変換します。

const params = {
  param1: "value1",
  param2: "value2",
};

// クエリ文字列を取得
const queryString = $.param(params);

// 新しいパラメータを追加
params.param3 = "value3";

// クエリ文字列を更新
const updatedQueryString = $.param(params);

// URL を更新
window.location.href = `${window.location.origin}${window.location.pathname}?${updatedQueryString}`;

$.get() メソッドを使用して、クエリ文字列パラメータを含む URL からデータを取得できます。

$.get("https://www.example.com/?param1=value1&param2=value2", function (data) {
  // データを処理
});

JavaScript

// location.search プロパティを使用する

// クエリ文字列を取得
const queryString = location.search;

// 新しいパラメータを追加
const newParam = "param3=value3";
location.search = queryString + "&" + newParam;

// 既存のパラメータの値を変更
const existingParam = "param1";
const newValue = "updatedValue";
location.search = queryString.replace(
  new RegExp(`param1=${existingParam}`),
  `param1=${newValue}`
);

// URLSearchParams API を使用する

// URLSearchParams オブジェクトを作成
const params = new URLSearchParams(location.search);

// 新しいパラメータを追加
params.append("param3", "value3");

// 既存のパラメータの値を変更
params.set("param1", "updatedValue");

// クエリ文字列を更新
location.search = params.toString();

jQuery

// $.param() メソッドを使用する

const params = {
  param1: "value1",
  param2: "value2",
};

// クエリ文字列を取得
const queryString = $.param(params);

// 新しいパラメータを追加
params.param3 = "value3";

// クエリ文字列を更新
const updatedQueryString = $.param(params);

// URL を更新
window.location.href = `${window.location.origin}${window.location.pathname}?${updatedQueryString}`;

// $.get() メソッドを使用する

$.get("https://www.example.com/?param1=value1&param2=value2", function (data) {
  // データを処理
});

HTML

<button onclick="location.search += '&param3=value3'">新しいパラメータを追加</button>

<button onclick="location.search = location.search.replace(/param1=value1/g, 'param1=updatedValue')">パラメータの値を変更</button>

実行方法

上記のコードを HTML ファイルに保存します。
Web ブラウザでファイルを開きます。
ボタンをクリックして、クエリ文字列パラメータを追加または更新します。

注意事項

これらのサンプルコードは、基本的な例です。実際のアプリケーションでは、要件に合わせてコードを変更する必要があります。
URLSearchParams API は、IE 11 以前ではサポートされていません。

JavaScript、jQuery、およびクエリ文字列を使用してクエリ文字列パラメータを追加または更新する他の方法

history.pushState() メソッドを使用して、新しい履歴エントリを作成し、URL を更新できます。

const params = new URLSearchParams(location.search);
params.append("param3", "value3");

history.pushState({}, "", `${window.location.pathname}?${params.toString()}`);

URL オブジェクトを使用して、URL を解析および編集できます。

const url = new URL(location.href);
url.searchParams.append("param3", "value3");

location.href = url.toString();

手動でクエリ文字列を構築する

クエリ文字列を手動で構築することもできます。

const params = {
  param1: "value1",
  param2: "value2",
  param3: "value3",
};

const queryString = Object.keys(params)
  .map((key) => `${key}=${params[key]}`)
  .join("&");

location.search = queryString;