1. Headersオブジェクトとは

JavaScriptにおけるHeadersオブジェクトは、Fetch APIを使用する際に、HTTPリクエストやレスポンスのヘッダー情報を操作するためのオブジェクトです。ヘッダーには、リクエストのメタデータ（コンテンツの種類や認証情報など）が含まれます。

例えば、以下のようにHeadersオブジェクトを作成し、カスタムヘッダーを設定することができます。

const headers = new Headers();
headers.append("Content-Type", "application/json");
headers.append("Authorization", "Bearer my-token");
console.log(headers.get("Content-Type")); // "application/json"

この例では、Content-TypeとAuthorizationという2つのヘッダーを追加し、getメソッドでContent-Typeの値を取得しています。

2. Headersオブジェクトの主要メソッド

Headersオブジェクトには、ヘッダーを操作するためのさまざまなメソッドが用意されています。

以下のコードは、それぞれのメソッドの使用例です。

const headers = new Headers();
headers.append("Accept", "application/json");
console.log(headers.get("Accept")); // "application/json"

headers.set("Accept", "text/html");
console.log(headers.get("Accept")); // "text/html"

console.log(headers.has("Accept")); // true
headers.delete("Accept");
console.log(headers.has("Accept")); // false

3. Fetch APIとHeadersオブジェクト

Headersオブジェクトは、fetchを使用する際にリクエストヘッダーとして渡すことができます。

const headers = new Headers({
    "Content-Type": "application/json",
    "Authorization": "Bearer my-token"
});

fetch("https://api.example.com/data", {
    method: "GET",
    headers: headers
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Error:", error));

この例では、fetchを使用してGETリクエストを送信し、レスポンスを取得しています。Headersオブジェクトを直接渡すことで、複数のヘッダーを一括で設定できます。

4. レスポンスヘッダーの取得

レスポンスのヘッダー情報を取得するには、fetchのレスポンスオブジェクトからheadersプロパティを利用します。

fetch("https://api.example.com/data")
.then(response => {
    console.log(response.headers.get("Content-Type"));
    console.log(response.headers.get("Date"));
})
.catch(error => console.error("Error:", error));

レスポンスヘッダーには、Content-TypeやDateなどの情報が含まれます。

5. Headersオブジェクトのイテレーション

Headersオブジェクトは、forEachやfor...ofループを使用して反復処理することができます。

const headers = new Headers({
    "Content-Type": "application/json",
    "Cache-Control": "no-cache"
});

headers.forEach((value, name) => {
    console.log(`${name}: ${value}`);
});

または、for...ofを使用することも可能です。

for (const [name, value] of headers) {
    console.log(`${name}: ${value}`);
}

このように、Headersオブジェクトは簡単に反復処理することができます。

6. まとめ

JavaScriptのHeadersオブジェクトは、HTTPリクエストやレスポンスのヘッダーを柔軟に操作できる便利な機能です。fetchと組み合わせることで、API通信をより細かく制御することが可能になります。適切に活用し、効率的な通信を行いましょう。

静的プロパティ

Headers.arguments

Headers.caller

Headers.length

Headers.name

Headers.prototype

静的アクセサ

静的メソッド

Headersのインスタンスプロパティ

Headers.prototype [ Symbol.toStringTag ]

Headersのインスタンスアクセサ

Headersのインスタンスメソッド

Headers.prototype.append()

Headers.prototype.constructor()

Headers.prototype.delete()

Headers.prototype.entries()

Headers.prototype.forEach()

Headers.prototype.get()

Headers.prototype.getSetCookie()

Headers.prototype.has()

Headers.prototype.keys()

Headers.prototype.set()

Headers.prototype.values()

Headers.prototype [ Symbol.iterator ] ()