More than 3 years have passed since last update.

[JavaScript] URLクエリパラメータの値を簡単に取得する方法

Posted at 2020-07-23

前置き

ReactでSPAをつくっているときURLクエリパラメータの値を取得したいと思いました。(検索機能実装とか)

今回自分がやってみたJavaScriptでクエリパラメータの値を簡単に取得する方法を残します。

//example.com?id=amanojs
この ? 以下の文字列がクエリ文字列です

const params = new URLSearchParams(window.location.search)
const value = params.get('key名') // key名の値

こんな簡単にクエリパラメータの値を取得することができます。

URLSearchParamsクラスはURLのクエリー文字列の操作に役立つメソッドを提供してくれます。
コンストラクタに操作したいクエリー文字列を渡すことで、そのクエリー文字列を操作するためのオブジェクトを返してもらえます。

window.locationオブジェクトのsearchプロパティは現在ページURLのクエリ部(?以下の文字列)を参照できるので、今回はこれをURLSearchParamsクラスに渡して操作するという流れでした。

##最後に

componentがマウントされてから実行することを推奨します。
しかしながらReactで開発するときはwindowオブジェクトを参照するのはあまり良くないのかなぁとか思います。(テストツールの関係上)
もっといいやり方があったらぜひ教えてくださると嬉しいです。

以上