JavaScript　searchプロパティを使ってクエリ情報を簡単に取得する方法

JavaScriptのsearchプロパティを使うことで、URLのクエリパラメータからデータを簡単に取得することができます。この記事では、その方法を解説します。

searchプロパティを使ってURLのクエリ情報を取得する方法を教えてください。

searchプロパティは、現在のウィンドウのURLからクエリ文字列を取得するためのプロパティです。
またURLSearchParamsオブジェクトは、取得したクエリ文字列を扱うためのオブジェクトであり、getメソッドを使ってパラメーターの値を取得することができます。

searchプロパティとは？

　JavaScriptにおけるsearchプロパティは、Windowオブジェクトの一つで、現在表示されているWebページのURLから、クエリ文字列部分の情報を取得するために使用されます。

　クエリ文字列は、URLの末尾に?で始まり、キーとバリューを&で区切った形式で記述され、Webサイトで利用されるパラメータを伝えるためによく使われます。searchプロパティを使うことで、URLから取得したクエリ文字列をJavaScriptで扱うことができます。

クエリ文字列部分の情報を取得する方法

以下は、searchプロパティを使ったサンプルコードです。このコードでは、現在のURLから取得したクエリ文字列をコンソールに出力します。

const queryString = window.location.search;
console.log(queryString);

　上記のコードでは、window.location.searchを使用して、現在表示されているWebページのURLからクエリ文字列部分を取得します。取得したクエリ文字列は、queryStringという変数に格納されます。そして、console.log()を使って、queryStringをコンソールに出力します。

もう少し具体的に、URLがhttps://example.com/?name=John&age=30の場合、queryStringには?name=John&age=30が格納され、コンソールには?name=John&age=30が表示されます。

サンプルプログラムを使った解説

　JavaScriptのWindowオブジェクトには、現在のウィンドウのURL情報が含まれています。このURL情報から、searchプロパティを使うことで、URLのクエリ情報を簡単に取得することができます。

// URL: http://example.com/?name=John&age=25

const queryString = window.location.search;
console.log(queryString); // "?name=John&age=25"

const urlParams = new URLSearchParams(queryString);

console.log(urlParams.get('name')); // "John"
console.log(urlParams.get('age')); // "25"

この例では、window.location.searchで現在のURLからクエリ文字列を取得し、URLSearchParamsオブジェクトを使って、取得したクエリ文字列から値を取り出しています。getメソッドを使うことで、指定したパラメーターの値を取得することができます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

searchプロパティを使ってURLのクエリパラメータからデータを取得する方法を解説しました。

URLSearchParamsオブジェクトを使って、取得したクエリ文字列から値を取り出して利用するんですね！

JavaScriptのsearchプロパティを使うことで、現在表示されているWebページのURLからクエリ文字列部分の情報を取得し、JavaScriptで扱うことができます。クエリ文字列は、Webサイトで利用されるパラメータを伝えるためによく使われます。searchプロパティの使い方を覚えておくことで、より柔軟なWebアプリケーションの開発が可能になります。