WebページでURLに含まれるパラメータを使いたいことはよくあります。検索結果からの情報やキャンペーンタグなど、URLパラメータを安全かつ確実に取得できれば、多くの場面で役立ちます。この記事では、JavaScriptでURLのパラメータを取得するさまざまな方法を丁寧に解説します。標準APIの使い方、自作関数、エラー対策、ハッシュ（#）部分の扱いまで、実践的なコード例を交えて理解を深めていきます。
JavaScript URL パラメータ 取得の基本と標準APIを使う方法
まずは「JavaScript URL パラメータ 取得」の目的と、簡単に使える標準的なAPIを紹介します。これらを理解すれば、多くのケースで自作コードを書かずに済みます。最新情報に基づいて、現行のブラウザで互換性の高い手法を中心に説明します。
URLSearchParamsを使ってクエリパラメータを取得する
現代のブラウザでは、URLSearchParamsが提供されていて、location.searchで取得したクエリ文字列を簡単に扱えます。
例えば、const params = new URLSearchParams(location.search)として作成し、params.get('param名')で値を取得できます。
この方法の良い点は、パラメータの値が自動的にデコードされることと、キーが存在するかどうかをparams.has('param名')で確認できることです。
decodeURIComponentを使って手動で取得・デコードする
古いブラウザや、ライブラリを使わない環境では手動で文字列を分割し、decodeURIComponentで値をデコードする方法があります。
たとえば、window.location.search.substr(1).split("&")で複数のパラメータを取得し、それぞれ=でキーと値に分けます。
値の部分はdecodeURIComponentを使い、%20や%3Dなどでエンコードされた文字を元に戻します。
location.hrefや URL オブジェクトを利用するパターン
別の方法として、new URL(location.href)を使うやり方があります。この場合、URLオブジェクトが提供するsearchParamsプロパティを使え、コードがより直感的になります。
また、特定のケースでは URL の文字列を操作してからパラメータを抜き出す必要があり、その際にはURLオブジェクトで処理することが安全性や明瞭さの点で有利です。
複数パラメータ・同名パラメータ・特殊文字への対応
URLパラメータには複数同名のキーが含まれることや、値に日本語や記号が含まれることもあります。これらを正しく扱わないとデータの取りこぼしや変換ミスを起こします。ここではそうしたケースへの対処法を扱います。
同じ名前のパラメータが複数ある場合の取得方法
例えば、?tag=javascript&tag=webのようなURLでは、同名キーの値を複数取得したい場合があります。
この場合、URLSearchParams.getAll('tag')を使えば、そのキーに対応するすべての値を配列で取得できます。
手動で処理する方法だと、分割した後にキーの重複をチェックし、配列として格納するように辞書オブジェクトを設計する必要があります。
日本語・スペース・記号が含まれる値のデコード処理
パラメータの値には日本語やスペース、記号（+・&・=など）が含まれることがあります。
URLにはこれらが％エンコードされた形で含まれ、decodeURIComponentを使わないと正しく解釈できません。
また、手動で「+」がスペースとして使われる形式（application/x-www-form-urlencoded方式）の場合は、value.replace(/+/g, ' ')のような置換を先に行ってからデコードすると安全です。
空のクエリや存在しないパラメータへの対策
パラメータ部分が「?」のみだったり、該当するキーがないURLもあります。
こうした場合にエラーが出ないよう、URLSearchParams.has()で存在をチェックしたり、手動処理では配列の長さやキーの存在を確認する処理を入れると良いです。
またデコード時に不正なエスケープ文字列があると URIError が発生するので、try/catchで囲むとより堅牢なコードになります。
ハッシュ（#）部分とフラグメントの扱い方
URLには「#」から始まるハッシュ部分（フラグメント）が含まれることがあります。これはサーバー側には送られず、ページ内でのナビゲーションや状態表現によく使われます。取得とデコードの方法を知っておくと便利です。
location.hash を使ってフラグメントを取得する
現在のURLで「#」以降の部分を取得するにはwindow.location.hashを使います。これには先頭の「#」が含まれます。
例として、URL が ...#section2 の場合、location.hash は #section2 を返します。
この文字列から先頭の「#」を取り除くには .substring(1) や .slice(1) がよく使われます。
フラグメントにもエンコード文字がある場合のデコード
フラグメントにも％エンコードされた文字（例：日本語、空白、記号など）が含まれることがあります。
そのような場合、decodeURIComponent を使って復元します。ただし、不正な形式の場合に備えて例外処理を入れることが望ましいです。
また + がスペースとして使われる場合の変換も考慮します。
クエリパラメータとフラグメントを組み合わせたURLの処理例
URLが ?id=123#sectionA のように、クエリパラメータとフラグメントの両方を持つことがあります。
このような場合、location.search でクエリ部分、location.hash でフラグメント部分を別に処理します。
URLオブジェクトを使えば、new URL(location.href) で両方に簡単にアクセスでき、分割せずに明確に扱えるメリットがあります。
実践的コード例とユースケース
これまで紹介した方法を踏まえて、具体的なコード例と実際のユースケースで使う例を示します。実際のプロジェクトに取り込むときの注意点も含めて解説します。
シンプルな関数でパラメータをすべて取得する例
以下は、クエリパラメータをすべて取得してオブジェクトに格納するシンプルな関数の例です。
標準的なURLSearchParams版と、手動で処理する版の両方を示します。
function getAllParams() { const params = new URLSearchParams(location.search); const result = {}; for (const [key, value] of params.entries()) { if (result[key] !== undefined) { result[key] = [].concat(result[key], value); } else { result[key] = value; } } return result;}この関数は、キーが複数回出てくる場合にも対応し、配列か単一値かを判断してオブジェクトに格納します。
実際の使用時には、取得後に値の型チェックやデフォルト値の設定などを付け加えるとより安全です。
特定のパラメータだけを取得するユースケース
特定のキーの値だけを取り出したいとき、URLSearchParams の .get() メソッドが便利です。
例えば、const userId = new URLSearchParams(location.search).get('user') のように書けば、キーがなければ null を返します。
さらに値に日本語や記号が含まれていても、デコード済みの文字列が返るため直接 DOM に表示するなどの用途に使いやすいです。
ハッシュによるページ内移動やタブ切り替えへの応用例
URLのフラグメントを使って、ページ内の特定セクションへのスクロールや、タブUIの切り替えなどを制御する例です。
例えば、初期表示時に window.location.hash を読んで該当するタブを表示するような処理を行うことができます。
また、ハッシュが変更されたときのイベントである hashchange を使って動的に切り替える UI を作ることも可能です。
ブラウザ互換性・セキュリティ・パフォーマンス上の注意点
URLパラメータの取得は簡単ですが、必ず押さえておきたい注意点があります。これらを理解しておかないと、思わぬバグや脆弱性につながることがあります。
古いブラウザでの互換性
URLSearchParams や new URL(...) は比較的新しい API です。かなり古いブラウザではサポートされていないことがあります。
そのため、サポートが不確かな環境ではフォールバックとして手動で分割・デコードする方法を用意しておくと安心です。
また、ポリフィルを使うか、必要に応じてブラウザ検出を行うことが考慮されます。
XSS のリスクと入力検証
URLパラメータはユーザーから操作される可能性があります。HTMLや DOM に表示する前に必ず、必要なエスケープを行うか、安全な値かどうかを検証してください。
特にinnerHTMLにinsertするような使い方は避け、テキストノードとして挿入する方法を使うと安全性が高まります。
パフォーマンスへの影響
パラメータ取得の頻度が高く、毎フレームや頻繁に DOM 操作と組み合わせているときには負荷が出る場合があります。
例えば、React や Vue などのフレームワークで毎レンダリングごとに location を読み込む、あるいは検索パラメータを parse するようなコードがあるときは、メモ化するなどの工夫が必要です。
また、デコード処理が重くなる場合は非同期で処理するか、必要なときだけ実行するようにするとよいです。
まとめ
JavaScript で URL パラメータを取得するには、URLSearchParams や new URL() を使った標準的な方法が最もシンプルで安全です。
手動で分割して decodeURIComponent を使う方法も理解しておけば、古い環境や要件に応じて応用できます。
複数同名パラメータや日本語・記号のデコード、存在チェックなどの処理を入れることで、より堅牢なコードにできます。
また、ハッシュ部分の取得・デコードも忘れずに扱うことで、ページ遷移・タブ切り替えなどの UI に活用できます。
これらの知識を組み合わせて、「JavaScript URL パラメータ 取得」の要件を満たすコードを書けば、実践的な場面で確実に動作する Web を作れるようになります。
コメント