導入：なぜURL.prototype.pathnameが重要なのか
フロントエンド開発において、ページ遷移の判定やAPIリクエスト先のパス取得など、URLを扱う機会は非常に多いです。よくある間違いとして、文字列操作（splitやsubstringなど）でパスを切り出そうとするケースがありますが、これはクエリパラメータやハッシュが含まれた際にバグを生む原因となります。URLオブジェクトのpathnameプロパティを活用することで、堅牢かつ可読性の高いコードを書くことが可能になります。
基礎知識：URLオブジェクトとpathnameとは
URL APIは、ブラウザ標準で提供されているURLを解析・生成するためのインターフェースです。
「URL.prototype.pathname」は、URLオブジェクトから「ホスト名やポート番号を除いた、リソースへのパス部分（例：/api/v1/users）」だけを抽出・設定できるプロパティです。文字列操作のように「?」や「#」の位置を意識する必要がなく、ブラウザが自動的に解析してくれるため、エッジケース（クエリがある場合など）にも強く、保守性が格段に向上します。
実装・解決策
基本的には、解析したいURL文字列を new URL() の引数に渡すだけで完了します。生成されたインスタンスの .pathname プロパティにアクセスするだけで、純粋なパス文字列が取得できます。もしパスの一部を変更したい場合も、pathname プロパティに直接代入すれば、URL文字列全体を再構築せずにパス部分だけを安全に書き換えることができます。
サンプルプログラム
以下のコードは、複雑なURLからパスを抽出し、さらにパスの一部を動的に書き換える実用的な例です。
// 解析対象のURL
const urlString = "https://example.com/products/123/edit?ref=dashboard#settings";
// 1. URLオブジェクトの生成
const url = new URL(urlString);
// 2. パス名のみを取得 (出力: /products/123/edit)
console.log("現在のパス:", url.pathname);
// 3. パスの一部を書き換える (例: 123を456に変更)
// 文字列操作だと複雑になりますが、URL APIなら簡単です
url.pathname = url.pathname.replace("123", "456");
// 4. 結果確認 (出力: https://example.com/products/456/edit?ref=dashboard#settings)
// クエリやハッシュは維持されたままパスだけが更新されます
console.log("更新後のフルURL:", url.toString());
応用・注意点
現場で陥りやすい注意点が2つあります。
1. 相対パスの扱い: new URL() の第一引数に相対パスを渡すとエラーになります。ベースとなるURLが不明な場合は、第二引数に base URL を渡す必要があります（例: new URL(‘/path’, location.origin)）。
2. 末尾のスラッシュ問題: URLによっては末尾に「/」がある場合とない場合があります。パスを比較する際は、.replace(/\/$/, “”) などで末尾のスラッシュを統一してから比較するロジックを入れると、意図しない不一致を防げます。
文字列の結合でURLを生成するのは避け、可能な限りこのURL APIを活用することで、バグを未然に防ぐクリーンなコードを維持しましょう。