JavaScript/Headers
Headersオブジェクト
[編集]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オブジェクトには、ヘッダーを操作するためのさまざまなメソッドが用意されています。
| メソッド名 | 説明 |
|---|---|
append(name, value) | 指定したヘッダーを追加する（同じキーが存在する場合は追加される）。 |
set(name, value) | 指定したヘッダーを設定する（同じキーが存在する場合は上書きされる）。 |
get(name) | 指定したヘッダーの値を取得する。 |
delete(name) | 指定したヘッダーを削除する。 |
has(name) | 指定したヘッダーが存在するかを確認する。 |
forEach(callback) | すべてのヘッダーを反復処理する。 |
以下のコードは、それぞれのメソッドの使用例です。
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のインスタンスプロパティ
[編集]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 ] ()