導入
フロントエンド開発において、Fetch APIはデータの取得に欠かせない存在です。しかし、APIから返ってきたレスポンスヘッダーを「すべて取得して処理したい」という場面で、扱い方に悩んだことはないでしょうか。`Headers.prototype.entries()` を活用することで、レスポンスヘッダーをイテレータとして取得し、柔軟にループ処理を行うことが可能です。本記事では、このメソッドを活用してヘッダー情報を効率的に解析する方法を解説します。
基礎知識
`Headers` オブジェクトは、HTTPのリクエストやレスポンスのヘッダーを管理するためのインターフェースです。`Headers.prototype.entries()` は、このオブジェクト内のすべてのヘッダー（キーと値のペア）を、挿入順に並べたイテレータを返します。これを利用することで、特定のヘッダー名を指定して値を取得するのではなく、全ヘッダーに対して動的な処理（ログ出力、キャッシュ制御の確認、トークンの抽出など）を簡単に行うことができます。
実装/解決策
`entries()` が返すのは「イテレータ」であるため、`for…of` ループや、配列に変換して `Array.prototype.forEach` を使うのが一般的です。実務では、`Array.from()` を組み合わせて、ヘッダーを扱いやすい配列形式に変換してから処理することが推奨されます。
サンプルプログラム
以下は、Fetch APIを使用して取得したレスポンスのヘッダーをすべてコンソールに出力する実用的なコード例です。
async function fetchAndLogHeaders(url) {
try {
const response = await fetch(url);
// Headersオブジェクトを取得
const headers = response.headers;
// entries()を使ってヘッダーをイテレートし、コンソールに表示
console.log("--- 取得したレスポンスヘッダー ---");
// for...of ループでキーと値に分解して処理
for (const [key, value] of headers.entries()) {
// 現場で役立つ：ヘッダー名を小文字に統一して比較するのが定石です
console.log(`${key.toLowerCase()}: ${value}`);
}
// 配列として処理したい場合の例
const headerArray = Array.from(headers.entries());
const contentType = headerArray.find(([key]) => key.toLowerCase() === 'content-type');
console.log("Content-Type:", contentType ? contentType[1] : "未設定");
} catch (error) {
console.error("通信エラーが発生しました:", error);
}
}
// 実行例
fetchAndLogHeaders('https://jsonplaceholder.typicode.com/posts/1');
応用・注意点
実務で `Headers` を扱う際、以下の点に注意してください。
1. ヘッダー名の大文字・小文字の区別
HTTPヘッダーは「ケースインセンシティブ（大文字・小文字を区別しない）」です。`Headers` オブジェクトは内部的にすべて小文字として正規化されますが、バックエンドから送られてくる形式に依存せず、比較を行う際は必ず `toLowerCase()` を通すようにしてください。
2. CORSの制限
ブラウザのセキュリティ制限（CORS）により、JavaScriptからアクセスできるヘッダーはデフォルトで制限されています。サーバー側で `Access-Control-Expose-Headers` を設定していない場合、`entries()` を呼び出しても必要なヘッダーが含まれていないことがあります。取得したいカスタムヘッダーがある場合は、必ずサーバー側の設定を確認してください。
3. 複数値を持つヘッダー
`Set-Cookie` など、同じキーで複数の値を持つヘッダーの場合、`entries()` はそれらをカンマ区切りの一つの文字列として返します。複雑な解析が必要な場合は、適宜 `split(‘,’)` 等で処理する工夫が必要です。