導入: なぜURLのクエリ操作が重要なのか
Web開発において、URLのクエリ文字列（例: ?id=123&sort=desc）を扱う場面は非常に多いです。従来、文字列操作（splitやreplaceなど）でパースを行っていましたが、これには「特殊文字のエンコード漏れ」や「値の重複」といったバグが潜みやすいという課題がありました。URL.prototype.search を含む URL API を活用することで、これらの複雑な処理を安全かつ直感的に記述できるようになります。
基礎知識: URL API とは
JavaScriptのURL APIは、URL文字列をオブジェクトとして扱い、ホスト名やパス、そしてクエリ部分を簡単に操作するための標準インターフェースです。特にクエリ文字列の操作には、URLSearchParams という専用のクラスが用意されています。URL.search を参照すると、クエリ文字列全体が取得できますが、これをURLSearchParamsオブジェクトとして扱うことで、値の取得・追加・削除がメソッドベースで行えるようになります。
実装/解決策: クエリ操作の基本手順
1. 操作したいURLを URL オブジェクトに変換します。
2. そのオブジェクトの searchParams プロパティにアクセスします。
3. get() や append() などのメソッドを使用して、安全に値を操作します。
これにより、手動で「?」や「&」を繋げる必要がなくなり、文字化けやフォーマットエラーを自動的に防ぐことができます。
サンプルプログラム: クエリ操作の実践例
以下は、URLから特定のパラメータを取得し、新しいパラメータを追加してURLを再生成するコードです。
// 操作対象のURL
const urlString = 'https://example.com/search?q=javascript&lang=ja';
const url = new URL(urlString);
// 1. クエリ文字列全体を取得 (URL.search)
console.log('元のクエリ:', url.search); // 出力: ?q=javascript&lang=ja
// 2. URLSearchParamsインスタンスを使って値を取得
const params = url.searchParams;
console.log('検索ワード:', params.get('q')); // 出力: javascript
// 3. パラメータを追加・更新
params.append('page', '1'); // 新規追加
params.set('lang', 'en'); // 値の更新
// 4. URLを再構築して出力
console.log('新しいURL:', url.toString());
// 出力: https://example.com/search?q=javascript&lang=en&page=1
応用・注意点: 現場で役立つTIPS
注意点: URLSearchParams は、ブラウザのURLオブジェクトだけでなく、単独の文字列から生成することも可能です。しかし、古いブラウザ（IEなど）ではサポートされていないため、必要に応じてポリフィルを検討してください。
現場のTips: フォーム送信時やAPIリクエストのパラメータを構築する際、オブジェクトを直接 URLSearchParams に渡すことも可能です。`new URLSearchParams({ page: 1, sort: ‘asc’ })` と書くだけで、自動的にクエリ文字列に変換してくれるため、非常に効率的です。また、値に日本語などのマルチバイト文字が含まれる場合でも、このAPIは自動的に適切にエンコードしてくれるため、自前で `encodeURIComponent` を呼び出す手間が省けるのも大きなメリットです。