URLにくっついてる
?hoge=123 みたいな、
Getパラメーターを取得したい場合って多いと思います。（実際多い）
そのやり方はURLをゴニョゴニョ解析したり、あるいは専用オブジェクトを使ったりと様々。
そこでJavaScriiptからURLのGetパラメーター取得する方法をまとめました。
個人的によく使う方法が２つあるので、コード例付きで紹介していきます。
このページの目次
方法１．URL.searchParams から取得する
まず１つめが URL.searchParams から取得してあげるという方法
その名の通り、これは検索クエリ（ ?x=1&y=2 みたいなの ）を保持するプロパティです。
多分これが一番簡単なやり方かもしれません。
実際にどうやって取得するかは次の通りです。
まず次みたいに、GetパラメーターつきのURLがあるとしましょう。
|
1 |
https://example.com/?year=2019&month=06 |
このURLにアクセスされたとき、 year とか month の値を調べたいわけです。
そういう場合は、次みたいなコードを書けば超簡単に取得できます。
|
1 2 3 4 5 6 7 |
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 構文を使ってもいけます。
|
1 2 3 4 5 6 |
var params = (new URL(document.location)).searchParams; for(var prm of params){ console.log( 'name :', prm[0], ', value :', prm[1] ); } |
このコードのコンソールへの出力は次みたいな感じ。
|
1 2 |
name : month , value : 2019 name : day , value : 06 |
まあ正直言うと、あんまり for ... of 構文なんて使わないですが・・・（というかこんな構文があることすら知らなかった(-_-;) ）
でも全パラメーターを拾いたいときは便利なこと間違いなしです。
URL.searchParams を使う時の注意点 - 互換性について
こういう風に便利な URL.searchParams ですが、１つ注意点もあります。
それは全ブラウザに対応してる訳ではないこと
最新ブラウザならほぼ全部対応してますが、古いやつとかバージョンが古いと使えません。
各ブラウザの対応状況は次ページからチェックしてください。
まあ Chrome とか FireFox とか Edge なら問題なく使えますね。
過去の遺物になった IE とか、モバイルの古いバージョンでのみ使用できない模様
なので互換性について、あんまり心配しなくていいかもです（多分）
方法２．window.locationから自力で取得する
お次は window.location から自力で解析して抜き出すやり方
この window.location っていうのは次記事で書いたみたいに、URL情報を扱うプロパティです。
参考記事１ ： 現在ページのURLなどの情報を調べる方法
参考記事２ ： JSから更新・ページ読み込みさせる方法まとめ
でもこっちは非効率だし、あんまりオススメしません。
過去の遺物の IE に対応しなくていいなら、この方法はあんまり役に立たないです。
でも一応やり方だけは紹介しておきます。
例えばさっきと同じく、次のURLにアクセスがあったとしましょう。
|
1 |
https://example.com/?year=2019&month=06 |
このURLから Getパラメーター を連想配列で取得したい・・・
そういう場合は次のコードを書いてあげれば取得可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/// 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); |
もう説明するのが面倒なので、何をしてるかはコメントを見てください。
ちなみにこのコードのコンソールへの出力はこうなります。
|
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 （または古いモバイル端末）にも対応させたいなら、こっちの方法を使う方がいいかも
以上、JavaScriptからURLのGetパラメーターを取得する方法についてでした。ではまた(^_^)/~
