ウェブページで「JavaScript URL パラメータ 取得」を検索する方は、URLに含まれる情報を使って処理を分けたい、広告や分析のために値を取り出したい、あるいは検索クエリやフィルターを受け取る動的な処理を組み込みたいと思っているはずです。
この記事では基本的な取得方法から応用、注意点まで幅広く解説するので、これを読めば「URL パラメータを取得したい」目的をしっかり叶えられるようになります。
目次
JavaScript URL パラメータ 取得 に使える基本的な方法
URLパラメータ取得はJavaScriptで頻繁に使われる機能で、まずは標準APIや伝統的な手法から押さえておくことが重要です。ここでは最新のブラウザで推奨される方法と、古い環境でも使える方法を両方紹介します。
URLSearchParams を使って簡単に取得する方法
URLSearchParams は クエリ文字列を扱うための標準インターフェースで、`window.location.search` や `URL` オブジェクトの `searchParams` プロパティと組み合わせて使います。キーに対応する値を `get()` メソッドで取得でき、同じキーが複数あれば `getAll()` で配列を得られます。
例えば `const params = new URL(window.location.href).searchParams; const value = params.get(“id”);` のように書くことができます。最新のブラウザではこの方法が最も読みやすく、バグを起こしにくいです。
window.location.search を使った文字列操作による取得
URLSearchParams が使えない古いブラウザ対応のためには、`window.location.search` を文字列として取得し、先頭の `?` を除いた後に `&` で分割、さらに `=` でキーと値に分ける方法があります。
注意点として、URLエンコードされた文字（例えば `%20` や `＋`）は `decodeURIComponent()` を使って元に戻す必要があります。また、パラメータが存在しない場合の null や未定義の扱いもコードで明確にすることが大事です。
URL オブジェクトを使った取得と他情報の同時取得
現在のページの URL を新しく `URL` オブジェクトとして生成する方法も便利です。このオブジェクトには `search`、`searchParams`、`hash`、`pathname`、`host`、`protocol` などのプロパティがあり、パラメータ取得以外の URL の構成要素を一括で扱うことができます。
例えば `const url = new URL(window.location.href); url.searchParams.get(“page”)` で値を得るだけでなく、`url.pathname` でパス部分、`url.hash` で #以降を取得でき、処理を分岐させる際に役立ちます。
用途別の応用例と具体的なコードスニペット
URLパラメータ取得の基本を押さえたら、次は用途に応じてどう活かすかを学びましょう。以下はいくつか代表的なケースと、それぞれで使えるサンプルコードです。
検索クエリやフィルター機能の受付
サイト内検索や商品絞り込みなどでは、URLパラメータを使ってどの検索条件が選ばれたかを取得し、その結果を画面に反映することが多いです。
例えば `?query=東京&sort=price_desc` のような URL から `query` と `sort` を取得し、検索処理や並び替え処理を行う例があります。これには URLSearchParams や URL オブジェクトを使うのが読みやすくミスを防ぎやすいです。
広告やキャンペーンのトラッキング（UTM パラメータ）
広告の効果測定を目的とする場合、UTM パラメータ（例えば `utm_source`、`utm_medium`、`utm_campaign`）が URL に含まれていることがあります。これらを JavaScript で取得してクッキーやローカルストレージ、あるいはフォームに引き渡してサーバー側でも追跡可能にすることが一般的です。
コード例として、ページ読み込み時に `const utm = params.get(“utm_source”)` のように取得し、保存や送信に使う方法があります。
URL 更新と履歴操作（履歴 API 使用）
パラメータを取得するだけでなく、URL を変更して新しいパラメータを追加したり、値を更新したり削除したりする場合もあります。そのときは History API の `pushState` や `replaceState` を使ってブラウザのアドレスバーを更新できます。
例えば `url.searchParams.set(“page”,”2″); window.history.pushState({}, “”, url.toString());` のようにするとページをリロードせずにパラメータを反映できます。ユーザー体験を損なわず、SEO にも配慮できます。
互換性と注意すべきポイント
どれだけ優れた方法でも、環境によっては動作しないことがあります。互換性やセキュリティ、文字列処理で注意が必要なポイントをしっかり押さえておきましょう。
対応ブラウザと URLSearchParams のサポート状況
現代の主要ブラウザでは URLSearchParams はほぼすべてサポートされています。Web APIs の仕様として安定しており、スマートフォン・デスクトップ双方で利用可能です。
ただし、Internet Explorer では標準サポートがありません。そのため、IE を含む古い環境を対象とする場合はポリフィルを用意するか、window.location.search を使った手動解析を組み込むことが推奨されます。
URLエンコードとデコードの扱い
パラメータ内の値にはスペースや記号が含まれることがあります。これらは URL エンコードされた状態（例 %20 や +）で送信され、JavaScript 側でも適切にデコードする必要があります。
`decodeURIComponent()` を使うことで期待される文字列に戻せますが、エラーを避けるためにはデコード対象が null や undefined でないかを確認しましょう。
セキュリティや SEO への影響
パラメータを URL に含めると、アドレスバーから容易に見えるため、個人情報や機密情報は含めるべきではありません。
また、検索エンジン率いるクローラによってパラメータ付き URL が複数インデックスされ、重複コンテンツの問題やキャノニカルが曖昧になることがあるため、SEO 対策としてどのバリエーションをクローラに認識させたいか設計段階で考える必要があります。
よくある疑問とトラブルシューティング
実際に実装するときには躓きやすいポイントがあります。ここでよくある疑問とその解決策を事例とともに見ていきます。
パラメータが取得できない（null や空文字になる）原因
取得したいパラメータ名にタイポがある、URL にそのパラメータが含まれていない、スクリプトが URL の変化前に実行されているなどが主な原因です。
また、ハッシュ（#）以降のパラメータが存在する場合、`window.location.search` には含まれず `location.hash` に含まれるケースもあります。意図する場所で取得し、名前の一致を確認することが大事です。
複数の同じキーを持つパラメータの扱い
例えば `?tag=js&tag=web&tag=programming` のように同じキーが複数ある場合、URLSearchParams の `getAll(“tag”)` を使うとすべての値を配列で取得できます。
一方 `get(“tag”)` では最初の値しか返らないので、重複キーがある可能性がある用途では `getAll()` を使うほうが安全です。
URL更新時のページ再読み込みと履歴への影響
History API の `pushState` や `replaceState` を使うと URL は変わるがページはリロードされません。そのため AJAX や動的レンダリングを組み合わせて内容を更新する設計になります。
ただしブラウザの「戻る」ボタンとの挙動やスクロール位置の遷移など、ユーザー体験に影響するので慎重にテストしてください。
便利なユーティリティ関数例集
たびたび使う処理は関数にしておくと再利用性が高くなります。以下は実用的なユーティリティ例です。
全パラメータをオブジェクトで取得する関数
複数のパラメータをまとめて扱いたい場合には、すべてのキーと値をオブジェクトに変換する関数が便利です。
以下は URLSearchParams を使って実装する例です：
function getAllParams(){
const params = new URL(window.location.href).searchParams;
const obj = {};
for(const key of params.keys()){
const all = params.getAll(key);
obj[key] = all.length>1 ? all : all[0];
}
return obj;
}
この関数はキーが重複するものは配列、それ以外は文字列で返す実装例です。
存在チェックとデフォルト値の設定
取得した値が未定義のときに備えて、存在チェックとデフォルト値を決めておくと安全です。例えば：
const params = new URL(window.location.href).searchParams;
const page = params.has("page") ? params.get("page") : "1";
const sort = params.get("sort") || "asc";
これにより、URL に指定がない場合でも仕様通り動くようになります。
まとめ
JavaScript で URL パラメータを取得するための基本的手法はいくつかあり、それぞれメリットとデメリットがあります。
URLSearchParams と URL オブジェクトの組み合わせは可読性と保守性に優れており、最新のブラウザでは標準的な選択肢です。
古いブラウザ対応や特殊な状況では、window.location.search を文字列として処理する方法が引き続き有効です。
文字列のデコードや値の存在チェック、重複キーの処理、URL の更新時の履歴操作、さらには SEO やセキュリティへの配慮も忘れずに設計してください。
この記事で紹介した手法を適切に使い分けることで、JavaScript による URL パラメータ取得が確実で安全、使いやすくなります。
コメント