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

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

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

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

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

方法1.URL.searchParams から取得する

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

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

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

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

 

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

ここまでのまとめ

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

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

以上、JavaScriptからURLのGetパラメーターを取得する方法についてでした。ではまた(^_^)/~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください