1. 導入
フロントエンド開発において、Fetch APIなどでやり取りする「HTTPヘッダー」の操作は日常茶飯事です。しかし、特定のヘッダーが存在するかどうかをチェックする際、単純なオブジェクト操作では大文字・小文字の区別などで予期せぬバグを生むことがあります。そこで活用したいのが「Headers.prototype.has」メソッドです。これを使うことで、ヘッダーの有無を確実かつスマートに判定でき、不必要なデータ処理やエラーを防ぐことが可能になります。
2. 基礎知識
Headersインターフェースは、HTTPリクエストやレスポンスのヘッダーを扱うための標準オブジェクトです。このオブジェクトの最大の特徴は「大文字・小文字を区別しない」という点です。例えば、`Content-Type`というヘッダーを検索する際、`content-type`や`CONTENT-TYPE`で検索しても正しく検知してくれます。`has`メソッドは、指定した名前のヘッダーがHeadersオブジェクト内に存在するかどうかを真偽値（true/false）で返す、非常にシンプルながら強力なメソッドです。
3. 実装/解決策
実装は非常に簡単です。Headersオブジェクトを生成、または取得し、`.has(‘ヘッダー名’)`を呼び出すだけです。サーバーから返ってきたレスポンスに対して、「特定の認証ヘッダーが含まれているか」「キャッシュ制御のヘッダーがあるか」を確認するロジックを組む際に最適です。
4. サンプルプログラム
以下のコードは、Fetch APIを使用した際に取得したレスポンスから、特定のヘッダーを安全に確認する例です。
// フェッチ処理のサンプル
fetch('https://api.example.com/data')
.then(response => {
// response.headers は Headers オブジェクトです
// 'Content-Type' ヘッダーが存在するか確認
// 小文字で指定しても正しく判定されます
if (response.headers.has('content-type')) {
console.log('Content-Type ヘッダーは存在します。');
// 中身の取得などへ進む
console.log('値:', response.headers.get('content-type'));
} else {
console.log('Content-Type ヘッダーは見つかりませんでした。');
}
// 存在しないヘッダーの確認
if (!response.headers.has('X-Custom-Header')) {
console.log('カスタムヘッダーは設定されていません。');
}
})
.catch(error => console.error('通信エラー:', error));
5. 応用・注意点
現場で活用する際の注意点は以下の2点です。
1. 存在確認後の取得:
`has`で存在を確認してから`get`メソッドで値を取得するフローにすることで、nullチェックなどの冗長なコードを減らし、コードの可読性を高めることができます。
2. セキュリティ上の制限:
ブラウザのセキュリティ制限（CORS）により、JavaScriptからアクセス可能なヘッダーは制限されています。もし`has`でチェックしても`false`が返ってくる場合は、サーバー側で`Access-Control-Expose-Headers`が正しく設定されているかを確認してください。これがないと、どれだけ正しいヘッダー名で検索しても検知できないため、デバッグの際はまずここを疑うのが解決への近道です。