【JS応用｜豆知識】Fetch APIを使いこなす！Headers.prototype.appendでリクエストヘッダーを柔軟に制御する方法

導入

Web開発において、サーバーと通信を行うFetch APIは不可欠な存在です。しかし、API通信を行う際、認証トークンやコンテンツタイプなど、動的にヘッダーを追加・変更する必要がある場面は非常に多いものです。Headers.prototype.appendメソッドを使いこなすことで、リクエストのカスタマイズが容易になり、より堅牢で柔軟なフロントエンド実装が可能になります。

基礎知識

Headersオブジェクトは、HTTPリクエストやレスポンスのヘッダー情報を管理するためのAPIです。通常、new Headers()でインスタンスを生成し、そこに情報を格納します。
ここで重要なのは「ヘッダーは重複できる場合がある」という点です。例えば、Set-Cookieヘッダーのように同じ名前のヘッダーが複数存在しうるケースがあります。appendメソッドは、既存のヘッダー名が存在する場合に値を上書きするのではなく、既存の値の後に新しい値を追加する役割を持ちます。

実装/解決策

Headers.prototype.append(name, value)は、指定したnameのヘッダーに新しいvalueを追加します。もし同名のヘッダーが既に存在していれば、値はカンマ区切りで連結されます。
これに対し、setメソッドは既存の値を上書きします。用途に応じてこれらを使い分けることが重要です。

サンプルプログラム

以下のコードは、Fetch APIを利用する際にHeadersオブジェクトを生成し、appendを使ってヘッダーを動的に構築する例です。

// 1. Headersインスタンスを作成
const myHeaders = new Headers();

// 2. appendを使ってヘッダーを追加
// 既に存在しない場合は新しく作成されます
myHeaders.append('Content-Type', 'application/json');

// 3. 同じ名前でappendすると値が追加されます
// ※多くのサーバーではカンマ区切りで複数の値として解釈されます
myHeaders.append('X-Custom-Header', 'Value1');
myHeaders.append('X-Custom-Header', 'Value2');

// コンソールで確認
console.log(myHeaders.get('X-Custom-Header')); // 結果: "Value1, Value2"

// 4. Fetch APIでリクエスト送信
fetch('https://api.example.com/data', {
  method: 'GET',
  headers: myHeaders
})
.then(response => response.json())
.then(data => console.log(data));

応用・注意点

現場で注意すべき点は、「すべてのヘッダーがappendに適しているわけではない」ということです。例えば、Content-Typeなどは単一の値であることが期待されることが多く、不用意にappendするとサーバー側でパースエラーを引き起こす可能性があります。
また、ブラウザのセキュリティポリシー（CORS）により、一部のヘッダーはプログラムから操作できない（禁止ヘッダー）場合があります。実装時は、開発者ツールのネットワークタブで、実際にブラウザが送信しているヘッダー内容と、サーバー側が求めている仕様を照らし合わせる癖をつけることが、バグを未然に防ぐ鍵となります。