導入
Webアプリケーション開発において、fetch APIを使用してサーバーからデータを取得する際、レスポンスボディ（JSONなど）に注目しがちです。しかし、キャッシュ制御、認証トークンの更新、APIのレート制限といった高度な処理を行うには、HTTPレスポンスヘッダーの解析が不可欠です。本記事では、Response.prototype.headers を利用して、実務で頻繁に必要となるレスポンス情報の抽出と制御方法を解説します。
基礎知識
Response.prototype.headers は、HTTPレスポンスに含まれるすべてのヘッダー情報を保持する「Headersオブジェクト」を返します。このオブジェクトは、従来のJavaScriptのプレーンなオブジェクトとは異なり、Mapインターフェースに似たメソッド（get, has, forEachなど）を提供します。これにより、ヘッダー名の大小文字を区別せずに値を取得したり、同じ名前のヘッダーが複数ある場合（Set-Cookieなど）を安全に扱ったりすることが可能です。
実装/解決策
実務では、特に「APIのページネーション情報」や「セキュリティトークンの有効期限」を取得する際にこの機能が活躍します。Headersオブジェクトから値を取得するには、主に以下のメソッドを使用します。
1. get(name): 指定したヘッダーの値を取得します。
2. has(name): 指定したヘッダーが存在するか確認します。
3. forEach(callback): すべてのヘッダーをイテレートします。
これらを組み合わせることで、特定のカスタムヘッダーを動的に読み取り、アプリケーションの挙動を制御できます。
サンプルプログラム
以下は、fetch APIを使用してAPIリクエストを行い、特定のカスタムヘッダーとページネーション情報を抽出する実用的なコード例です。
async function fetchWithHeaderAnalysis(url) {
try {
const response = await fetch(url);
// 1. レスポンスヘッダーへのアクセス
const headers = response.headers;
// 2. 特定のヘッダーを取得（大文字小文字は区別されません）
const contentType = headers.get('content-type');
console.log('Content-Type:', contentType);
// 3. ページネーション情報の解析（例: X-Total-Countヘッダー）
if (headers.has('X-Total-Count')) {
const totalCount = headers.get('X-Total-Count');
console.log('総データ数:', totalCount);
}
// 4. すべてのヘッダーをループで処理
headers.forEach((value, name) => {
console.log(`${name}: ${value}`);
});
return await response.json();
} catch (error) {
console.error('リクエスト失敗:', error);
}
}
応用・注意点
実務で特に注意すべき点は、CORS（Cross-Origin Resource Sharing）の制限です。ブラウザのセキュリティ制限により、JavaScriptからアクセスできるレスポンスヘッダーはデフォルトで制限されています。
サーバー側で「Access-Control-Expose-Headers」を設定していない場合、独自に追加したカスタムヘッダー（例: X-Auth-Tokenなど）は、フロントエンド側で headers.get() を呼び出しても null が返ってきてしまいます。もしヘッダーが見えない場合は、バックエンドチームに「CORSのExpose-Headers設定」を確認するように依頼してください。また、Set-Cookieヘッダーはブラウザのセキュリティ仕様上、fetchのレスポンスからは取得できない点にも注意が必要です。