こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptでURLのクエリパラメータを取得する方法をご紹介しています。

URLのクエリパラメータを取得したいんだけど、どうすればいいのかな?

上記の疑問にお答えしています。

では、解説していきます。

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

URLオブジェクトでURLからクエリを取得し、URLSearchParamasオブジェクトでURLのクエリパラメータを取得します。

下記のURLからクエリパラメータを取得してみます。

https://into-the-program.com/?a=100&b=200&c=300

JS

const url = new URL('https://into-the-program.com?a=100&b=200&c=300');
const params = new URLSearchParams(url.search);

for(let param of params){
console.log(param);
}

実行結果

["a", "100"]
["b", "200"]
["c", "300"]

URLSearchParamasはオブジェクトを返します。そのためfor...ofですべてのキーと値のペアを列挙することができます。

URLSearchParams.get()でキーを指定して値を取得する

前項ではクエリパラメータを取得してループですべてのキーと値のペアを出力しましたが、URLSearchParams.get()でキーを指定して値だけを取得することも可能です。URLSearchParams.get()は引数に指定した文字列と最初に一致するキーの値を返します。

JS

const url = new URL('https://into-the-program.com?a=100&b=200&c=300');
const params = new URLSearchParams(url.search);

console.log(params.get('a'));
console.log(params.get('b'));
console.log(params.get('c'));

実行結果

"100"
"200"
"300"

実行結果は想定した通りですね。指定したキーの値が出力されています。

URLSearchParamsには他にも便利なメソッドが用意されている

本記事ではURLSearchParamsの一部メソッドした使用していないですが、他にも便利なメソッドが用意されています。

下記はURLSearchParamsのメソッド一覧です。クエリパラメータの処理であればURLSearchParamsさえあれば対応できるかと思います。

URLSearchParamsのメソッド一覧

URLSearchParams.append(key, value) 引数に指定されたキーと値を新しい検索パラメータとして追加する
URLSearchParams.delete(key) 指定されたキーと一致するすべてのキーとキーの値をパラメータから削除する
URLSearchParams.entries() オブジェクトに含まれるキーと値のペアを列挙するイテレータを返す
URLSearchParams.forEach() コールバック関数を介して、オブジェクトに含まれるすべての値を返す
URLSearchParams.get(key) 引数に指定されたキーと一致する最初のキーの値を返す
URLSearchParams.getAll(key) 引数に指定されたキーと一致するすべてのキーの値を返す
URLSearchParams.has(key) 引数に指定されたキーが存在するか真偽値(true|false)を返す
URLSearchParams.keys() オブジェクトに含まれるキーを列挙するイテレータを返す
URLSearchParams.set(key, value) 引数に指定されたキーと値をパラメータに設定する。同名の値が存在していた場合は削除される
URLSearchParams.sort() キーを基準にソートする
URLSearchParams.toString() クエリパラメータを返す
URLSearchParams.values() オブジェクトに含まれるキーの値を列挙するイテレータを返す

ただ、この便利なオブジェクト、IE11には対応していません。残念なことに。

しかしご安心を!

URLURLSearchParamsにはポリフィルが用意されています。それを読み込むことで本記事でご紹介した内容であればIE11でも動作するようになります。

IE11の対応について

URLURLSearchParamsのポリフィルに必要なJSのCDNを記載しておきます。これらを<script>で読み込んでご利用ください。

URLのポリフィル

URLSearchParamasのポリフィル

これで上記のオブジェクトを使用できない悩みから解放されます!

最後に

本記事でご紹介したURLURLSearchParamsのオブジェクトの存在を知ったのはつい最近のことなのですが、クエリパラメータに関する処理であれば概ね対応できるほど充実した機能を提供してくれています。休み返上で勉強して良かったと思う瞬間です。今後もたくさん使っていきたいと思います!

以上、JavaScriptでURLのクエリパラメータを取得するURLSearchParamsのご紹介でした!