【解説】JavaScriptでURLのGETパラメータを取得する方法
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制作の現場ではよくあります。
取得する方法をしっかり覚えて活用していきたいですね。