導入：なぜResponse.urlが重要なのか？
Web開発でAPIからデータを取得する際、Fetch APIを頻繁に使いますよね。しかし、リクエストを送った後に「リダイレクトが発生したかどうか」や「最終的にどのURLからデータが返ってきたのか」を正確に把握できていないケースがよくあります。
Response.urlプロパティは、実際にレスポンスが返ってきたURLを教えてくれる便利な機能です。APIの仕様変更やリダイレクトの追跡、デバッグ時における「想定通りのエンドポイントに繋がっているか」を確認する際に非常に役立ちます。
基礎知識：Responseオブジェクトとは？
Fetch APIを使用してサーバーにリクエストを送ると、ブラウザは「Responseオブジェクト」という箱を返してくれます。この箱の中には、ステータスコード（200や404など）や、ヘッダー情報、そして本文（body）などが詰まっています。
そのプロパティの一つであるResponse.urlは、そのレスポンスが生成された元のURLを保持している文字列型のプロパティです。通常はリクエストしたURLと同じですが、サーバー側でリダイレクト（転送）が行われた場合、この値は「転送先の最終的なURL」を指すことになります。
実装：Response.urlを確認する手順
使い方は非常に簡単です。fetch関数の戻り値であるResponseオブジェクトから、直接`.url`を参照するだけです。
1. fetchを実行する。
2. 返ってきたResponseオブジェクトを引数で受け取る。
3. そのオブジェクトの.urlプロパティにアクセスする。
サンプルプログラム：実際にURLを確認してみよう
以下のコードをブラウザのコンソール（F12キーで開けます）に貼り付けて、実行結果を確認してみてください。
// GitHubの公開APIを例に実行します
fetch('https://api.github.com/')
.then(response => {
// 実際に取得したURLをコンソールに表示
console.log("レスポンス元のURL:", response.url);
// もしURLを確認して処理を分けたい場合
if (response.url.includes('api.github.com')) {
console.log("GitHubのAPIから正しくデータが取得できました");
}
return response.json();
})
.then(data => {
console.log("データ取得完了:", data);
})
.catch(error => {
console.error("エラーが発生しました:", error);
});
応用・注意点：現場での活用と落とし穴
1. リダイレクトの追跡
例えば、短縮URLを展開するサービスや、認証が必要なページへリダイレクトされるAPIを扱う際、Response.urlを使えば「どこに飛ばされたか」が明確になります。これがわかると、意図しないドメインへの誘導を防ぐセキュリティチェックにも応用可能です。
2. 注意点：CORS制限に注意
Response.urlは便利な反面、CORS（Cross-Origin Resource Sharing）の設定によっては一部の情報が制限されることがあります。また、ブラウザのセキュリティ設定により、リダイレクトの履歴がすべて詳細に追えるわけではない場合もあります。
3. 空文字になるケース
fetchにURLを直接渡さず、Requestオブジェクトを作成して渡した場合、あるいはブラウザのキャッシュから即座に復元された一部のケースで、予期せぬ値が返ることがあります。基本的には「ネットワークリクエストが発生した際に使うもの」と割り切って利用するのが安全です。
まずは、普段使っているAPIで `console.log(response.url)` を仕込んでみて、データの流れを可視化することから始めてみてください！