導入: なぜURLの操作に専用APIが必要なのか
フロントエンド開発において、URL文字列の連結やパスの抽出を文字列操作（splitやindexOf）で行っていませんか？それはバグの温床です。クエリパラメータの有無やスラッシュの過不足など、手動の文字列処理は非常に複雑でミスを誘発します。そこで活用したいのがWeb標準の「URL API」です。その中でも「URL.prototype.href」は、組み立てたURLを文字列として取得するための最も基本的かつ重要なプロパティです。
基礎知識: URL APIとは何か
URL APIは、URLを構造化して扱うためのオブジェクトです。ブラウザ環境だけでなくNode.jsでも利用可能です。URLを「プロトコル」「ホスト」「パス」「クエリ」などの各パーツに分解し、個別に操作できるため、誤った形式のURLが生成されるのを防ぎます。
その中で「href」プロパティは、オブジェクト内のすべてのパーツを結合し、完全なURL文字列として出力する役割を担います。単なる文字列操作ではなく、ブラウザが正当と認める形式でURLを書き出してくれるのが特徴です。
実装/解決策: URLを安全に構築する手順
1. まず、URLオブジェクトをインスタンス化します。この際、ベースとなるURLを引数に渡します。
2. 必要に応じて、searchParamsプロパティを使ってクエリパラメータを動的に追加・修正します。
3. 最後に、hrefプロパティを参照して、最終的な文字列を取得します。
サンプルプログラム: クエリパラメータを含むURLの生成
// ベースとなるURLからオブジェクトを生成
const url = new URL('https://example.com/api/items');
// クエリパラメータを追加する（検索条件の付与など）
url.searchParams.append('category', 'electronics');
url.searchParams.append('sort', 'desc');
// hrefプロパティを使って、完全なURL文字列を取得して出力
const finalUrl = url.href;
console.log('生成されたURL:', finalUrl);
// 出力結果: https://example.com/api/items?category=electronics&sort=desc
// 応用: 既存のパラメータを更新する場合
url.searchParams.set('sort', 'asc');
console.log('更新後のURL:', url.href);
応用・注意点: 現場で役立つポイント
1. 文字列の自動エンコード
URL APIを使用する最大のメリットは、特殊文字の自動エンコードです。例えば、パラメータに日本語やスペースが含まれていても、URLとして正しい形式（パーセントエンコーディング）に自動変換されます。手動で文字列を結合すると、このエンコードを自前で実装する必要があり、非常に危険です。
2. 相対パスの解決
new URL(‘path’, ‘https://base.com’) のように第2引数を指定すると、ベースURLに対して相対パスを正しく解決してくれます。ディレクトリ構成が複雑なプロジェクトでは、この機能を活用することで、パスの連結ミスを確実に防ぐことができます。
3. 注意点
URLオブジェクトを生成する際、第1引数の文字列が不正なURL形式である場合は例外（TypeError）が投げられます。ユーザー入力などを扱う際は、必ずtry-catchブロックで囲んでエラーハンドリングを行うようにしましょう。