URLのクエリパラメータをJavaScriptオブジェクトに変換する方法

はじめに

Web開発を行っていると、URLのクエリパラメータを取得し、それをJavaScriptのオブジェクトに変換することがよくあります。この記事では、その手順を詳しく説明します。

URLSearchParamsを使用してクエリパラメータをオブジェクトへ変換する例

まず、URLのクエリパラメータを解析するために、URLSearchParamsという組み込みのJavaScriptクラスを使用します。このクラスは、URLのクエリパラメータを操作するための便利なメソッドを提供します。

以下は、URLSearchParamsを使用してクエリパラメータを解析する例です

// ダミーのクエリパラメータ
const search = "key1=value1&key2=value2";
const searchParams = new URLSearchParams(search);

let queryEntries = searchParams.entries();

console.log(Array.from(queryEntries));
// 出力結果
// [
//   ["key1", "value1"],
//   ["key2", "value2"]
// ]

let queryParamsObject = Object.fromEntries(queryEntries);

console.log(queryParamsObject);
// 出力結果
// { key1: 'value1', key2: 'value2' }

クエリパラメータを解析する

このコードでは、URLSearchParamsの新しいインスタンスを作成し、そのコンストラクタにクエリ文字列（"key1=value1&key2=value2"）を渡しています。

const search = "key1=value1&key2=value2";
const searchParams = new URLSearchParams(search);

クエリパラメータのエントリを取得する

次に、URLSearchParams.entries()メソッドを使用して、クエリパラメータの各エントリ（キーと値のペア）を取得します。このメソッドは、エントリのイテレータを返します。

let queryEntries = searchParams.entries();
console.log(Array.from(queryEntries));
// 出力結果
// [
//   ["key1", "value1"],
//   ["key2", "value2"]
// ]

エントリをオブジェクトに変換する

最後に、Object.fromEntries()メソッドを使用して、エントリのイテレータをJavaScriptのオブジェクトに変換します。

このコードは、以下のようなオブジェクトを生成します

let queryParamsObject = Object.fromEntries(queryEntries);

console.log(queryParamsObject);
// 出力結果
// { key1: 'value1', key2: 'value2' }

以上が、URLのクエリパラメータをJavaScriptのオブジェクトに変換する手順です。この手順を使用すると、URLのクエリパラメータを簡単に操作できます。

まとめ

この記事では、URLのクエリパラメータをJavaScriptのオブジェクトに変換する方法を説明しました。具体的には、以下の手順を紹介しました

1. URLSearchParamsを使用してクエリパラメータを解析する
2. URLSearchParams.entries()を使用してクエリパラメータの各エントリを取得する
3. Object.fromEntries()を使用してエントリのイテレータをJavaScriptのオブジェクトに変換する
   これらの手順を使用すると、URLのクエリパラメータを簡単に操作できます。

クエリパラメータの情報をAPIへリクエストする際などに役立てば幸いです！