JavaScriptからURLのGetパラメーターを取得する２つの方法

URLにくっついてる ?hoge=123 みたいな、
Getパラメーターを取得したい場合って多いと思います。（実際多い）

そのやり方はURLをゴニョゴニョ解析したり、あるいは専用オブジェクトを使ったりと様々。

そこでJavaScriiptからURLのGetパラメーター取得する方法をまとめました。

個人的によく使う方法が２つあるので、コード例付きで紹介していきます。

このページの目次

方法１．URL.searchParams から取得する
- URL.searchParams を使う時の注意点 - 互換性について
方法２．window.locationから自力で取得する
ここまでのまとめ

方法１．URL.searchParams から取得する

まず１つめが URL.searchParams から取得してあげるという方法

その名の通り、これは検索クエリ（ ?x=1&y=2 みたいなの）を保持するプロパティです。

多分これが一番簡単なやり方かもしれません。

実際にどうやって取得するかは次の通りです。

まず次みたいに、GetパラメーターつきのURLがあるとしましょう。

https://example.com/?year=2019&month=06

1	https://example.com/?year=2019&month=06

このURLにアクセスされたとき、 year とか month の値を調べたいわけです。

そういう場合は、次みたいなコードを書けば超簡単に取得できます。

var params = (new URL(document.location)).searchParams;
var year = params.get('year');
var month = params.get('month');
console.log('year :', year);
  /// => day : 2019
console.log('month :', month);
  /// => month : 06

var params = (new URL(document.location)).searchParams;

var year = params.get('year');

var month = params.get('month');

console.log('year :', year);

/// => day : 2019

console.log('month :', month);

/// => month : 06

まず URLオブジェクトを document.location から取得

そして URLオブジェクトの searchParams にアクセス

あとは get メソッドを使えば、好きなGet変数にアクセスできます

ただし１つ注意点があるとするなら、
パラメーターが存在しない場合は null を返してくること

空文字列ではないので、そこんところは注意が必要かもしれません。

ちなみに全パラメーターを一気に取得したいなら、
次コードみたいに for...of 構文を使ってもいけます。

var params = (new URL(document.location)).searchParams;
for(var prm of params){
  console.log(
    'name :', prm[0], ', value :', prm[1]
  );
}

var params = (new URL(document.location)).searchParams;

for(var prm of params){

console.log(

'name :', prm[0], ', value :', prm[1]

);

}

このコードのコンソールへの出力は次みたいな感じ。

name : month , value : 2019
name : day , value : 06

1 2	name : month , value : 2019 name : day , value : 06

まあ正直言うと、あんまり for ... of 構文なんて使わないですが・・・（というかこんな構文があることすら知らなかった(-_-;) ）

でも全パラメーターを拾いたいときは便利なこと間違いなしです。

URL.searchParams を使う時の注意点 - 互換性について

こういう風に便利な URL.searchParams ですが、１つ注意点もあります。

それは全ブラウザに対応してる訳ではないこと

最新ブラウザならほぼ全部対応してますが、古いやつとかバージョンが古いと使えません。

各ブラウザの対応状況は次ページからチェックしてください。

caniuse.com

Can I use... Support tables for HTML5, CSS3, etc

https://caniuse.com/#feat=urlsearchparams

まあ Chrome とか FireFox とか Edge なら問題なく使えますね。

過去の遺物になった IE とか、モバイルの古いバージョンでのみ使用できない模様

なので互換性について、あんまり心配しなくていいかもです（多分）

方法２．window.locationから自力で取得する

お次は window.location から自力で解析して抜き出すやり方

この window.location っていうのは次記事で書いたみたいに、URL情報を扱うプロパティです。

参考記事１　：　現在ページのURLなどの情報を調べる方法
参考記事２　：　JSから更新・ページ読み込みさせる方法まとめ

でもこっちは非効率だし、あんまりオススメしません。

過去の遺物の IE に対応しなくていいなら、この方法はあんまり役に立たないです。

でも一応やり方だけは紹介しておきます。

例えばさっきと同じく、次のURLにアクセスがあったとしましょう。

https://example.com/?year=2019&month=06

1	https://example.com/?year=2019&month=06

このURLから Getパラメーターを連想配列で取得したい・・・

そういう場合は次のコードを書いてあげれば取得可能です。

/// Getパラメーターを記録する配列
var params = {};

/// URLからパラメーター解析＆取得
var query = window.location.href.split("?")[1];
if(query){
  var rawParams = query.split('&');
  rawParams.forEach(function(prm,i){
    var kv = prm.split('=');
    params[kv[0]] = kv[1];
  });
}

/// Getパラメーターのキー名と値を全部表示
Object.keys(params).forEach(function(name,i){
  console.log(
    'name : ' + name + ', value : ' + this[name] 
  );
}, params);

/// Getパラメーターを記録する配列

var params = {};

/// URLからパラメーター解析＆取得

var query = window.location.href.split("?")[1];

if(query){

var rawParams = query.split('&');

rawParams.forEach(function(prm,i){

var kv = prm.split('=');

params[kv[0]] = kv[1];

});

}

/// Getパラメーターのキー名と値を全部表示

Object.keys(params).forEach(function(name,i){

console.log(

'name : ' + name + ', value : ' + this[name]

);

}, params);

もう説明するのが面倒なので、何をしてるかはコメントを見てください。

ちなみにこのコードのコンソールへの出力はこうなります。

name : month, value : 2019
name : day, value : 06

1 2	name : month, value : 2019 name : day, value : 06

問題なくGetパラメーターのキー名と値が取得できてるのが分かるはず

以上が自力でURLを解析してGetパラムを受け取る方法

自力で解析しないといけない分、無駄に手間がかかるのが嫌なところです。

よほどの事情がない限りは、さっきの URL.searchParams の方が楽ですね。

ここまでのまとめ

ということで今紹介した２つの取得方法まとめ

URL.searchParams から取得
こっちの方が楽だし簡単、 new URL(document.location) みたいにURLオブジェクトを作り、そこから get メソッドにキー名を渡せば取得できる。ただしない場合は null が返ってくる
window.locationから自力で取得
コードが長くなるし、面倒くさいのでオススメしない。ただし旧時代の遺物の IE （または古いモバイル端末）にも対応させたいなら、こっちの方法を使う方がいいかも