【JavaScript】URLのクエリパラメータを操作する（取得・付与・削除）

本記事の目次

クエリパラメータとは
URLオブジェクトを使う方法
location.searchプロパティを使う方法
- location.searchプロパティを使ってクエリパラメータを取得する
まとめ

クエリパラメータとは

クエリパラメータとは、サーバーに情報を送るためにURLに付与するパラメータのことで、「?」をURLの末尾に付けた後に、「key=value」の形でクエリパラメータを付与します。

// URL
https://example.com?test=ok

// クエリパラメータ
?test=ok // key: 'test', value: 'ok'

クエリパラメータは、具体的に以下のような用途で使われることが多いです。

ECサイトでの商品のフィルタリングやソート順を動的に変更するため
WEBサイトでのユーザーの行動を知るアクセス解析のため

URLオブジェクトを使う方法

簡単にクエリパラメータを操作するには、URLオブジェクトを使う方法があります。

URLオブジェクトを使ってクエリパラメータを取得する

// 現在のURLからURLオブジェクトを生成する
// （例として、現在のURLを「https://example.com?test=ok」とする）
const url = new URL(window.location.href);

// keyを指定して、クエリパラメータを取得する
const testParam = url.searchParam.get('test');

console.log(testParam); // 'ok'

URLオブジェクトを使ってクエリパラメータを付与する

// 現在のURLからURLオブジェクトを生成する
// （例として、現在のURLを「https://example.com?test=ok」とする）
const url = new URL(window.location.href);

// keyを指定して、クエリパラメータを付与する
url.searchParam.set('sample', 'no');

console.log(url.href);
// https://example.com?test=ok&sample=no

URLオブジェクトを使ってクエリパラメータを削除する

// 現在のURLからURLオブジェクトを生成する
// （例として、現在のURLを「https://example.com?test=ok」とする）
const url = new URL(window.location.href);

// keyを指定して、クエリパラメータを削除する
url.searchParam.delete('test');

console.log(url.href);
// https://example.com

location.searchプロパティを使う方法

URLオブジェクトを使う方法以外に、location.searchプロパティを使ってクエリパラメータを取得する方法もあります。

URLオブジェクトを使ってもうまく動かない時に試してみましょう。

location.searchプロパティを使ってクエリパラメータを取得する

// location.searchプロパティでクエリパラメータを取得する
// （例として、現在のURLを「https://example.com?test=ok&sample=no」とする）
// location.searchプロパティには「?」も含まれるため、2文字目以降を変数queryへ代入する
const query = location.search.substring(1);

// value,keyのセットで分割する
const params = query.split('&');

// クエリパラメータを格納するオブジェクトを宣言しておく
let queryObject = {};

// value,keyのセットの数だけ処理を繰り返す
for(let i = 0; i < params.length; i ++) {

  // valueとkeyを分けて、デコードしたものを変数へ代入する
  const elem = params[i].split('=');
  const key = decodeURI(elem[0]);
  const value = decodeURI(elem[1]);

  // 宣言しておいたオブジェクトへ追加する
  queryObject[key] = value;
}

console.log(object);
// {'test': 'ok', 'sample': 'no'}