導入
Web開発において、URLの操作は避けて通れないタスクです。文字列としてURLを結合したり切り出したりすると、クエリパラメータのエンコード漏れや、スラッシュの重複といったバグを生みがちです。JavaScript標準の「URL API」と「URL.prototype.toString()」を使いこなすことで、これらの課題を安全かつスマートに解決できるようになります。
基礎知識
URL APIとは、ブラウザやNode.jsで提供されている「URLをオブジェクトとして扱うための仕組み」です。
URL.prototype.toString()は、URLオブジェクトを「解析済みの正規化された文字列」として取得するためのメソッドです。
重要なポイントは、URLオブジェクト自体を文字列として出力しようとした際に、内部的に自動でこのtoString()が呼び出される点です。これにより、オブジェクトをそのままURLとして扱うことができます。
実装/解決策
URLを操作する際は、まず「new URL()」でインスタンス化します。その後、searchParamsなどのプロパティで値を変更し、最後にtoString()を呼び出すことで、常に正しい形式のURL文字列を得ることができます。
サンプルプログラム
以下のコードは、ベースのURLに対して安全にクエリパラメータを追加し、文字列として取得する例です。
// 1. URLオブジェクトを作成
const url = new URL('https://example.com/api/data');
// 2. クエリパラメータを追加（自動的にエンコードされます）
url.searchParams.append('id', '123');
url.searchParams.append('keyword', 'フロントエンド 豆知識');
// 3. toString()で文字列を取得
// URLオブジェクトを直接テンプレートリテラルに埋め込んでも、自動的にtoString()が呼ばれます
const urlString = url.toString();
console.log('変換後のURL:', urlString);
// 出力例: https://example.com/api/data?id=123&keyword=%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%20%E8%B1%86%E7%9F%A5%E8%AD%98
// 4. 実用的な比較：URLとして扱うとスラッシュの重複なども防止できます
const base = new URL('https://example.com/');
const path = new URL('users/profile', base);
console.log('正規化されたURL:', path.toString());
応用・注意点
1. 文字列結合との違い
「+」演算子での文字列結合は、エスケープ処理が行われません。特に日本語や記号を含むクエリパラメータを扱う場合、必ずURL APIを使用してください。
2. 相対パスの解決
new URL(path, base)を使うと、ベースURLに対して相対パスを安全に結合できます。これにより、APIのベースURL設定やルーティング管理が非常に楽になります。
3. 陥りやすいバグ
古いブラウザ（IEなど）ではURL APIが標準搭載されていません。モダンブラウザのみを対象とする場合は問題ありませんが、レガシー環境を考慮する場合はポリフィルが必要になる点に注意してください。常にURLオブジェクトを介して操作する癖をつけることが、安全なコードへの第一歩です。