1. 導入
Web開発で避けて通れない「API通信」。Fetch APIを使ってデータ取得を行う際、そのレスポンスがどこから来たのか、あるいは正しく取得できたのかを判断するのは非常に重要です。Response.typeプロパティを活用することで、レスポンスの由来をプログラム的に判別し、セキュリティやデバッグの効率を劇的に向上させることができます。
2. 基礎知識
Fetch APIで返されるResponseオブジェクトには、その通信がどのような性質のものかを示す「type」というプロパティが存在します。これを確認することで、通信が「同一オリジン」なのか「外部（CORS）」なのか、あるいは「キャッシュ」なのかを識別できます。
主なタイプは以下の通りです：
basic: 同一オリジンのリソース。制限が少なく、すべてのヘッダーにアクセス可能です。
cors: CORS（Cross-Origin Resource Sharing）設定された別ドメインのリソース。アクセスできるヘッダーが制限されます。
opaque: CORS設定がない別ドメインのリソース。セキュリティ上の理由から中身はほとんど見えません。
error: ネットワークエラーが発生した場合。
3. 実装/解決策
実装のステップはシンプルです。fetch関数で得られたResponseオブジェクトに対し、直接.typeを参照するだけです。これにより、条件分岐（if文など）を使って、レスポンスのタイプに応じた処理の振り分けが可能になります。
4. サンプルプログラム
以下のコードは、APIからデータを取得し、そのタイプに応じてコンソールにログを出力する実用的な例です。
async function checkResponseType() {
try {
// APIを呼び出す
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
// response.type を使って通信の素性をチェック
console.log('レスポンスのタイプ:', response.type);
if (response.type === 'basic') {
console.log('同一オリジンからの安全な通信です');
} else if (response.type === 'cors') {
console.log('CORS経由の外部通信です');
} else if (response.type === 'opaque') {
console.log('不透明なレスポンス（詳細情報には制限があります）');
}
} catch (error) {
// ネットワークエラーなどが発生した場合
console.error('通信失敗:', error);
}
}
// 実行
checkResponseType();
5. 応用・注意点
現場で注意すべき点は、opaqueの扱いです。APIからデータを取得したはずなのに、レスポンスのボディが空であったり、ステータスコードが0になっていたりする場合、そのタイプは「opaque」である可能性が高いです。
これはブラウザのセキュリティ機能（Opaque-filtered response）によるもので、外部サイトの機密情報を不用意に読み取らせないための仕様です。もしデータが取得できない場合は、サーバー側でCORSヘッダー（Access-Control-Allow-Origin）が正しく設定されているかを確認するようにしてください。このプロパティを適切に監視することは、予期せぬ通信トラブルを早期発見するための第一歩となります。