Webページでクエリ文字列から値を取得する処理は、検索結果・フィルタ・キャンペーンタグなど、様々な用途で非常に重要です。ですが「どの方法が安全でかつ最新のブラウザ対応か」「古いブラウザではどうするのか」が分からない方も多いでしょう。本記事では、JavaScriptを使ってURLパラメータを取得する基本から応用、ブラウザ互換性まで詳しく解説します。読み終わるころには確実に使いこなせるようになります。
目次
「JavaScript URL パラメータ 取得」を実現する基本的な手法
URLパラメータを取得するには主に二つのモダンな方法があります。ひとつはURLSearchParamsを使う方法、もうひとつはURLオブジェクトを使う方法です。これらはシンプルで読みやすく、最新のブラウザでのサポートも十分です。この記事で紹介する手法はいずれも、セキュリティ面・デコード処理・複数値パラメータへの対応などを考慮した実践的なアプローチです。
URLSearchParams.get()を使って特定のパラメータを取得する
ブラウザがwindow.location.searchを提供しており、これを使ってクエリ部分を取得できます。さらにURLSearchParamsコンストラクタに渡せば、get()メソッドで特定キーの値を読み取れます。例えば、ページURLが「?user=alice&id=123」の場合、params.get(“id”)は「123」を返します。値が存在しない場合はnullを返す挙動です。パーセントエンコーディングされた文字も自動的にデコードされます。
複数の同名パラメータをgetAll()で扱う
同じキーで値が複数存在する場合、get()はそのうち最初の値のみを返します。すべての値を取得したい場合はgetAll()を使います。これにより配列形式で全値を取得可能です。例えば「?tag=js&tag=web&tag=ai」のようなタグ群を処理する際に有効です。順序もURLに並んだ順になりますので、表示やフィルタリングとの連携がしやすくなります。
URLオブジェクトを使ってより柔軟にパラメータを扱う
window.location.hrefや新しいURL文字列をURLオブジェクトとして生成することで、プロトコル・ホスト名・ポート・パス・検索パラメータなどを簡単に操作できます。URL.searchParams経由でパラメータ操作が可能で、さらに履歴操作やリンク生成などでもURLオブジェクトを活用することで安全性と可読性が向上します。モダン環境では極めて推奨される方法です。
古い環境やEdgeケース対応: JavaScript URL パラメータ 取得で知っておきたいこと
最新ブラウザではURLSearchParamsとURLオブジェクトの組み合わせで問題ないですが、過去のブラウザや特殊ケースでは動作しない場合があります。ここではそういった状況に備えるためのコードや工夫を紹介し、処理の信頼性を高める方法を解説します。
Internet Explorerや未対応環境での正規表現 (Regex) を使った取得
URLSearchParamsが存在しない環境では、window.location.searchを手動でパースします。正規表現を用いて「?や&以降＋指定キー＋=」にマッチさせ、値を取り出し、decodeURIComponentでデコード。例えば、名前に角括弧が含まれていても安全に処理できるよう、名前部分をエスケープすることが重要です。この方法は基本的に全ブラウザで動作します。
パラメータのデコードとエンコーディングの注意点
URLには半角スペースや記号など、エンコードが必要な文字が含まれる可能性があります。クエリ文字列には「+」や「%20」が使われることがあり、decodeURIComponentで正しく処理する必要があります。また、キーや値に「#」や「&」などの文字が含まれると予期しない分割が起こるため、encodeURIComponentでエンコードして送るのが基本です。
履歴の操作: ページ再読み込みなしでURLを変更する方法
パラメータを取得するだけでなく、URL自体を動的に変更したい場面もあります。History APIのpushState・replaceStateを使うことで、ページをリロードせずにURLを更新できます。pushStateは新しい履歴エントリーを作り、replaceStateは現在の履歴を置き換えます。表示中のDOMはそのままでアドレスバーのみ変化するため、UXを損なわずに状態を共有できるようになります。
実践：サンプルコードで覚えるJavaScript URL パラメータ 取得と操作
ここでは具体的なコード例を示し、「JavaScript URL パラメータ 取得」をテーマに実際の実装方法を段階的に説明します。基本取得から応用、履歴操作まで網羅しますので、読みながら自分のケースに応じた対応をイメージして下さい。
基本取得例：１つのパラメータを取得
例えばURLが「?product=book&price=100」の場合、次のように取得します。
const params = new URLSearchParams(window.location.search);
const product = params.get('product'); // "book"
const price = params.get('price'); // "100"URLSearchParams.getは値がないキーに対してnullを返しますので、存在チェックを行うことも大切です。
複数値・キーの存在チェック例
複数の同名キーや、存在しないキーのチェックを行いたい場合は以下のように記述します。
const tags = params.getAll('tag'); // ["js","web"]
if (params.has('user')) {
const user = params.get('user');
}getAllで配列として取得可能、hasで存在確認できます。これによりロジック分岐が容易になります。
URLを扱うオブジェクト指向の例
現在のURL全体を扱いたいとき、URLオブジェクトを使うと便利です。
const url = new URL(window.location);
const id = url.searchParams.get('id');
const newUrl = new URL(url);
newUrl.searchParams.set('page', '2');
console.log(newUrl.toString());このように複製してから操作することで元を壊さず扱いやすくなります。
ページを再読み込みせずにクエリを追加・変更する応用コード
ユーザー操作で検索結果を動的に切り替えるような場合、URLを変えても再読み込みさせたくないですよね。以下のようにHistory APIを併用すると実現可能です。
function updateQueryParam(key, value) {
const url = new URL(window.location);
url.searchParams.set(key, value);
window.history.replaceState({}, '', url);
}pushStateを使えばブラウザ履歴にも追加できるため、戻る／進む操作でパラメータの変更を反映できます。
ブラウザ互換性とパフォーマンス考慮: 安心して使うためのポイント
特にモバイル利用者が多数を占める現在、どのブラウザでも確実に動作することが大切です。古いブラウザでのfallback、処理の軽さ、メモリの扱いなどにも注意しましょう。ここでは「JavaScript URL パラメータ 取得」の実用性を高めるための注意事項を挙げます。
URLSearchParamsとURLの対応状況
モダンブラウザ（Chrome・Firefox・Safari・Edgeなど）ではURLSearchParamsとURLオブジェクトはかなり高い互換性があります。だがInternet ExplorerではURLSearchParamsが未対応であり、代替処理（正規表現等）やpolyfillが必要です。公式仕様や最新仕様書の記述を確認すると、ほとんどの現行ブラウザで基本操作は問題なく動作します。
パラメータ数・URL長の制限と影響
URLにはサーバ側やブラウザ側で許容される長さの制限があります。クエリ文字列が非常に長くなると、処理速度・読みやすさ・SEOへの影響が出る可能性があります。過度なフィルタリング情報や追跡パラメータを入れないように設計しましょう。必要がある場合はPOST経由やストレージ利用も検討してください。
History APIの利用とユーザー体験の維持
pushStateやreplaceStateでURLを変える際、ページが再読み込みされないことは利点ですが、ユーザーが「戻る」操作をしたときにどう動くかを事前に設計しておく必要があります。popstateイベントを監視して、UIの状態を元に復元できるようにしておくと操作性が高まります。また、履歴エントリを乱立させずにreplaceStateを使うなど、見た目と履歴の整合性にも気を配ることが重要です。
まとめ
「JavaScript URL パラメータ 取得」に関する方法は、最新環境ではURLSearchParamsとURLオブジェクトを使うのが最も安全で効率的です。
古い環境では正規表現での代替やpolyfillが現実的な対応策になります。
また、パラメータのエンコード／デコード・履歴操作・ブラウザ互換性などを考慮することで、安定して期待どおりに動作するようになります。
本記事で紹介したコード例や注意点を自分のプロジェクトに応じて取り入れ、「パラメータ取得」がストレスなく活用できるようになるでしょう。
コメント