導入
フロントエンド開発において、Fetch APIを用いた通信は日常的な業務です。特に、レスポンスヘッダーから特定の情報を取得したい場面は多いでしょう。しかし、「ヘッダー名の大文字・小文字が混在していて値が取れない」「キャッシュ制御や認証情報をどう扱うか」といった細かなハマりどころで時間を浪費した経験はありませんか？Headers.prototype.getは、そのような「ヘッダーの取得」における課題をシンプルかつ堅牢に解決するための非常に重要なAPIです。
基礎知識
Headersオブジェクトとは、HTTPリクエストやレスポンスのヘッダー情報を保持するインターフェースです。Fetch APIのレスポンス（Responseオブジェクト）に含まれるheadersプロパティは、このHeadersクラスのインスタンスです。
ここでのポイントは、HTTPヘッダーが「大文字と小文字を区別しない」という仕様に基づいていることです。Headers.prototype.getメソッドを使うことで、開発者はヘッダー名を気にすることなく、正規化された形式で安全に値を取得できます。
実装/解決策
Headers.prototype.getを利用する際は、メソッドの引数に取得したい「ヘッダー名」を文字列で渡します。戻り値は、指定した名前のヘッダーが存在すればその値（文字列）、存在しなければnullが返されます。
実務においては、特に「Content-Type」の判定や「Authorization」トークンの抽出、カスタムヘッダーによるメタ情報の取得によく利用されます。注意点として、ブラウザのセキュリティ制限（CORS）により、サーバー側で「Access-Control-Expose-Headers」を設定していないヘッダーは、クライアント側から取得できない点には留意が必要です。
サンプルプログラム
以下のコードは、APIレスポンスから特定のヘッダーを安全に取得し、条件分岐を行う実践的な例です。
async function fetchWithHeaderCheck(url) {
try {
const response = await fetch(url);
// headersはHeadersオブジェクトのインスタンス
const headers = response.headers;
// getメソッドは「content-type」のように小文字で指定しても正しく動作します
const contentType = headers.get('Content-Type');
if (contentType && contentType.includes('application/json')) {
const data = await response.json();
console.log('JSONデータを取得しました:', data);
}
// カスタムヘッダー（例: サーバー生成時刻）の取得
const serverDate = headers.get('X-Server-Date');
if (serverDate) {
console.log('サーバーレスポンス時刻:', serverDate);
} else {
console.warn('X-Server-Dateヘッダーが見つかりません');
}
} catch (error) {
console.error('通信エラーが発生しました:', error);
}
}
応用・注意点
実務でさらに深く活用するためのヒントをいくつか挙げます。
1. 複数値を持つヘッダーの扱い：
Set-Cookieのように、同じ名前で複数の値を持つヘッダーがある場合、getメソッドでは「最初の値」しか取得できません。すべての値を取得したい場合は、Headers.prototype.getAll（※非標準の環境や実装に依存する場合があるため注意）またはHeaders.prototype.entries()で全走査する必要があります。
2. 大文字小文字の揺れ：
前述の通り、Headersオブジェクトはヘッダー名を内部的に正規化します。そのため、コード上で ‘content-type’ と書いても ‘Content-Type’ と書いても結果は同じです。チームのコーディング規約で「ヘッダー名はキャメルケースで統一する」などのルールを設けておくと、レビュー時の可読性が向上します。
3. 存在確認：
値が空文字である可能性と、ヘッダー自体が存在しない（null）可能性を区別するために、厳密な比較（nullチェック）を行う癖をつけましょう。これにより、予期せぬバグを防ぐことができます。