URLにセットされるGETパラメータの値をJavaScriptで取得する方法についてご存じですか？ PHPの場合はよく使われるため、多くの人が調べずにスラスラ書けるかもしれませんが、JavaScriptでも同様のことが出来ます。

今回の記事では、JavaScriptを使用してURLのGETパラメータの値を取得する方法を紹介します。

URLのGETパラメータとは？

URLのGETパラメータとは、表示しているURLの「?」より後ろにくっついている値のことです。

https://example.com?food=サラダ&drink=お茶&food=寿司&food=天ぷら&sweets=アイス

この場合、GETパラメータの値は「?food=サラダ&drink=お茶&food=寿司&food=天ぷら&sweets=アイス」の部分となります。

JavaScriptでURLのGETパラメータの値を取得する方法

JavaScriptを利用してURLにセットされているGETパラメータを取得するには、URLSearchParams()オブジェクトを利用します。

URLSearchParams()オブジェクトにはGETパラメータの値をを取得するいくつかのメソッドが用意されています。

それぞれどんな値が取得できるのか、そして具体的な使い方を見てみましょう。

URLのGETパラメータは以下を想定しています。

?food=サラダ&drink=お茶&food=寿司&food=天ぷら&sweets=アイス

get()メソッド

get()メソッドとは

get()メソッドとは、URLSearchParams()オブジェクトに用意されているメソッドのひとつです。

get()メソッドに引数としてGETパラメータのキーを渡すと値を返します。
ただし同じ名前のGETパラメータのキーが複数存在している場合は、値を最初のひとつのみ返します。

get()メソッドを使用してURLのGETパラメータの値を取得する

実際の使い方は、URLSearchParams()オブジェクトを作成し、get()メソッドを使用します。

let url = new URL(window.location.href);
let params = url.searchParams;

// get()メソッド
console.log(params.get('food'));
console.log(params.get('drink'));
console.log(params.get('sweets'));

出力結果は以下のようになります。

サラダ
お茶
アイス

getAll()メソッド

getAll()メソッドとは

get()Allメソッドとは、URLSearchParams()オブジェクトに用意されているメソッドのひとつです。

getAll()メソッドに引数としてGETパラメータのキーを渡すとその値を配列で全て返します。

getAll()メソッドを使用してURLのGETパラメータの値を取得する

実際の使い方は、URLSearchParams()オブジェクトを作成し、getAll()メソッドを使用します。

let url = new URL(window.location.href);
let params = url.searchParams;

// getAll()メソッド
console.log(params.getAll('food'))

出力結果は以下のようになります。

(3) ['サラダ', '寿司', '天ぷら']

forEach()メソッド

forEach()メソッドとは

forEach()メソッドとは、URLSearchParams()オブジェクトに用意されているメソッドのひとつです。

forEach()メソッドはGETパラメータのキーと値を全て返します。
出力する場合は任意の関数にGETパラメータのキーと値を渡します。

forEach()メソッドを使用してURLのGETパラメータの値を取得する

実際の使い方は、URLSearchParams()オブジェクトを作成し、forEach()メソッドを使用します。

// forEach()メソッド
params.forEach(function(value,key){
    console.log(key + "," + value);
});

出力結果は以下のようになります。

food,サラダ
drink,お茶
food,寿司
food,天ぷら
sweets,アイス

entries()メソッド

entries()メソッドとは

entries()メソッドとは、URLSearchParams()オブジェクトに用意されているメソッドのひとつです。

entries()メソッドはGETパラメータのキーと値を配列で全て返します。

entries()メソッドを使用してURLのGETパラメータの値を取得する

実際の使い方は、URLSearchParams()オブジェクトを作成し、entries()メソッドを使用します。

// entries()メソッド
for(let entry of params.entries()){
    console.log(entry);
}

出力結果はこのようになります。

(2) ['food', 'サラダ']
(2) ['drink', 'お茶']
(2) ['food', '寿司']
(2) ['food', '天ぷら']
(2) ['sweets', 'アイス']

配列から取り出しキーとGET値パラメータの値を分ける場合は以下のようにします。

for(let entry of params.entries()){
    console.log(entry[0] + "," + entry[1]);
}

出力結果は以下のようになります。

food,サラダ
drink,お茶
food,寿司
food,天ぷら
sweets,アイス

keys()メソッド

keys()メソッドとは

keys()メソッドとは、URLSearchParams()オブジェクトに用意されているメソッドのひとつです。

keys()メソッドはGETパラメータのキーを配列で全て返します。

keys()メソッドを使用してURLのGETパラメータのキーを取得する

実際の使い方は、URLSearchParams()オブジェクトを作成し、keys()メソッドを使用します。

// values()メソッド
for(let key of params.keys()){
    console.log(key);
}

出力結果は以下のようになります。

food
drink
food
food
sweets

values()メソッド

values()メソッドとは

values()メソッドとは、URLSearchParams()オブジェクトに用意されているメソッドのひとつです。

values()メソッドはGETパラメータの値を配列で全て返します。

values()メソッドを使用してURLのGETパラメータの値を取得する

実際の使い方は、URLSearchParams()オブジェクトを作成し、values()メソッドを使用します。

// values()メソッド
for(let value of params.values()){
    console.log(value);
}

出力結果は以下のようになります。

サラダ
お茶
寿司
天ぷら
アイス

まとめ

いかがでしたか？
URLにGETパラメータの値をセットし、別ページに渡すことはWEB制作の現場ではよくあります。
取得する方法をしっかり覚えて活用していきたいですね。