JavaScriptでURLパラメータを取得する方法

URLパラメータ(クエリ文字列とも呼ばれる)は、Web開発において重要な要素であり、ページ間でのデータ受け渡しやクライアントからサーバーへのデータ送信を可能にします。検索機能の構築、フォーム送信の処理、ユーザー設定の追跡など、これらのパラメータを抽出・活用する方法を知ることは必須です。
この記事では、JavaScriptを使用してURLパラメータを取得する最も効果的な方法を、最新のアプローチから従来のソリューションまで紹介します。
重要なポイント
URLSearchParams
は、URLパラメータを処理する現代的で推奨される方法です- 単一のパラメータ値を取得するには
urlParams.get('param')
を使用します - パラメータが存在するかチェックするには
urlParams.has('param')
を使用します - 古いブラウザでは、カスタムパース関数を実装します
- 特殊文字を処理するため、常にパラメータ値をデコードします
- URLパラメータを使用する際のセキュリティ上の注意点を理解しておきます
URLパラメータの理解
URLパラメータは、URL内のクエスチョンマーク(?
)の後に現れ、キー・値のペアとして形式化されています:
https://example.com/page?name=john&id=123
この例では、name
がjohn
の値を持ち、id
が123
の値を持つ2つのパラメータがあります。
最新のアプローチ:URLSearchParams
最新のブラウザでURLパラメータを処理する最もシンプルで信頼性の高い方法は、URLSearchParams
インターフェースを使用することです。
基本的な使用方法
// URL例: https://example.com/page?product=shirt&color=blue&size=m
// クエリ文字列を取得
const queryString = window.location.search;
// クエリ文字列をパース
const urlParams = new URLSearchParams(queryString);
// 特定のパラメータ値を取得
const product = urlParams.get('product'); // "shirt"
const color = urlParams.get('color'); // "blue"
パラメータの存在確認
// パラメータが存在するかチェック
if (urlParams.has('product')) {
// パラメータが存在する
console.log('productパラメータが存在します');
}
複数値の処理
パラメータがURL内で複数回現れる場合、すべての値を取得できます:
// URL: https://example.com/page?tag=javascript&tag=frontend
// パラメータのすべての値を取得
const tags = urlParams.getAll('tag'); // ["javascript", "frontend"]
パラメータの反復処理
URLSearchParams
は、すべてのパラメータを操作するためのイテレーターメソッドを提供します:
// すべてのパラメータキーを反復処理
for (const key of urlParams.keys()) {
console.log(key);
}
// すべてのパラメータ値を反復処理
for (const value of urlParams.values()) {
console.log(value);
}
// すべてのパラメータエントリ(キー・値のペア)を反復処理
for (const [key, value] of urlParams.entries()) {
console.log(`${key}: ${value}`);
}
従来のアプローチ:カスタム関数
URLSearchParams
をサポートしていない古いブラウザでは、カスタム関数を作成できます:
function getUrlParam(param) {
const queryString = window.location.search.substring(1);
const urlParams = queryString.split('&');
for (let i = 0; i < urlParams.length; i++) {
const paramPair = urlParams[i].split('=');
if (paramPair[0] === param) {
return decodeURIComponent(paramPair[1] || "");
}
}
return null;
}
// 使用方法
const productValue = getUrlParam('product');
一般的なエッジケースの処理
エンコードされた文字
URLパラメータには、しばしばエンコードされた文字が含まれます。例えば、スペースは%20
としてエンコードされます:
// URL: https://example.com/search?query=web%20development
const query = urlParams.get('query');
console.log(query); // "web development" (自動的にデコードされる)
カスタム関数を使用する場合は、これらのエンコードされた文字を正しく処理するためにdecodeURIComponent()
を使用することを確認してください。
存在しないパラメータ
パラメータを使用する前に、常に存在するかチェックしてください:
const size = urlParams.has('size') ? urlParams.get('size') : 'default';
空のパラメータ
パラメータは値なしで存在する場合があります:
// URL: https://example.com/page?newsletter=&theme=dark
const newsletter = urlParams.get('newsletter'); // "" (空文字列)
const hasNewsletter = urlParams.has('newsletter'); // true
完全な例:すべてのURLパラメータを取得
すべてのURLパラメータをオブジェクトとして取得する包括的な関数は以下の通りです:
function getAllUrlParams() {
const params = {};
const queryString = window.location.search.substring(1);
if (queryString) {
const pairs = queryString.split('&');
for (const pair of pairs) {
const [key, value] = pair.split('=');
// パラメータに値がない場合、trueに設定
if (typeof value === 'undefined') {
params[key] = true;
} else {
// すでにこのパラメータがある場合、配列に変換
if (params[key]) {
if (!Array.isArray(params[key])) {
params[key] = [params[key]];
}
params[key].push(decodeURIComponent(value));
} else {
params[key] = decodeURIComponent(value);
}
}
}
}
return params;
}
ブラウザ互換性
URLSearchParams
は、以下を含むすべての最新ブラウザでサポートされています:
- Chrome 49+
- Firefox 44+
- Safari 10.1+
- Edge 17+
Internet Explorerなどの古いブラウザでは、ポリフィルまたはカスタム関数アプローチを使用する必要があります。
パフォーマンスの考慮事項
ほとんどのアプリケーションでは、メソッド間のパフォーマンスの違いは無視できます。ただし:
URLSearchParams
は最適化されており、ブラウザベンダーによって維持されています- カスタム関数は特定のニーズに合わせて調整できます
- 単一のパラメータのみを取得する場合、シンプルな正規表現の方が高速な場合があります
セキュリティに関する注意
URLパラメータはブラウザのアドレスバーに表示され、機密情報には安全ではないことを覚えておいてください。アプリケーションで使用する前に、常にパラメータ値を検証・サニタイズしてください。
まとめ
URLSearchParams
インターフェースは、JavaScriptでURLパラメータを操作するためのクリーンで標準化された方法を提供します。ほとんどの最新のWebアプリケーションでは、これが推奨されるアプローチです。レガシーブラウザサポートが必要な場合は、カスタム関数を使用して、少し多くのコードで同じ機能を提供できます。
URLパラメータを効果的に抽出・活用する方法を理解することで、より動的でインタラクティブなWebアプリケーションを構築できます。
よくある質問
はい、URLSearchParamsを使用してパラメータを変更し、history.pushState()またはhistory.replaceState()でURLを更新できます。
ほとんどのSPAフレームワーク(React、Vue、Angular)には、URLパラメータを処理する組み込みのルーティングシステムがあります。詳細については、フレームワークのドキュメントを確認してください。
URL仕様によると、パラメータ名は大文字小文字を区別するため、'name'と'Name'は異なるパラメータです。
同じパラメータ名を複数回使用する(例:?color=red&color=blue)か、ブラケット記法を使用する(例:?colors[]=red&colors[]=blue)ことができます。
公式な制限はありませんが、ブラウザとサーバーは通常、URL全体で約2,000〜8,000文字の実用的な制限があります。