JavaScript | 非同期処理：fetch / API 通信 – headers の設定

JavaScript
スポンサーリンク

headers ってそもそも何？なぜ設定が必要なのか

fetch の headers は、
「このリクエストに関する“メタ情報”（追加情報）をサーバーに伝えるためのラベル集」 です。

サーバーは、ただ URL とボディだけを見ているわけではありません。
「これは JSON だよ」「これは誰からのリクエストだよ」「認証トークンはこれだよ」などの情報を、ヘッダー（header） に載せて受け取っています。

JavaScript で fetch を使うとき、
このヘッダーを設定することで、

  • 送るデータの種類を知らせる（JSON なのか、フォームなのか など）
  • 認証情報（トークン）を渡す
  • API のバージョンや言語設定を伝える

といった「ちゃんとした会話」ができるようになります。

ここが重要です。
headers を設定するのは、「サーバーと人間らしい会話をするため」に必要なマナー だと思ってください。
データだけ押し付けるのではなく、「これはこういう形式のデータです」「私はこういうユーザーです」と名乗るイメージです。

fetch で headers を設定する基本形

オプションオブジェクトの中に headers を書く

fetch の第二引数にオプションを渡す形が基本です。

const response = await fetch("https://example.com/api/users", {
  method: "GET",
  headers: {
    "X-My-App": "sample-app",
  },
});
JavaScript

headers の中は、
「ヘッダー名: 値」 を並べたオブジェクトだと考えてOKです。

よく使うのは、
"Content-Type" や "Authorization"、"Accept" などです。

method を省略すると GET になるので、
GET のときにヘッダーだけ足したいなら、こうも書けます。

const response = await fetch("https://example.com/api/users", {
  headers: {
    "X-My-App": "sample-app",
  },
});
JavaScript

ここが重要です。
headers は「第二引数のオプションオブジェクトの中に書く」。
fetch(url, { headers: { ... } }) という形を手で何度か書いて、指に覚えさせてください。

Content-Type ヘッダー：これが一番大事な相手

「送りつけるデータの種類」を伝える

Content-Type は、
「body に入っているデータの種類（フォーマット）」 をサーバーに教えるヘッダーです。

もっと噛み砕くと、

「これから送るデータは、こういう形式で書かれていますよ」

という宣言です。

POST で JSON を送るときの定番パターンを見ましょう。

async function createUser() {
  const body = {
    name: "太郎",
    age: 25,
  };

  const response = await fetch("https://example.com/api/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(body),
  });

  const data = await response.json();
  console.log("作成されたユーザー:", data);
}
JavaScript

ここでのポイントは 2 つです。

"Content-Type": "application/json"
「body に入っているのは JSON ですよ」と宣言している。
サーバーはこれを見て、「じゃあ JSON としてパースするか」と判断します。

body: JSON.stringify(body)
body には JavaScript のオブジェクトではなく、「文字列」 を渡します。
JSON 文字列に変換するために JSON.stringify を使います。

もし Content-Type を付け忘れたら、サーバーは

「これ、何形式のデータが来たんだろう…？」

と迷子になり、
期待通りに受け取ってくれないことがあります。

ここが重要です。
JSON で送るときは、
「Content-Type: application/json と JSON.stringify(...)」のセットがほぼ必須 です。
片方だけではダメで、「形式を宣言するヘッダー」と「実際の中身のフォーマット」が噛み合っている必要があります。

Authorization ヘッダー：認証トークンを渡す

「このリクエストを送っているのは“誰か”」を伝える

多くの API は、
「ログインしたユーザーだけが使える」
「特定の鍵（API キー）を持っている者だけが叩ける」
といった制限をしています。

その“鍵”をサーバーに渡すのに、よく使われるのが Authorization ヘッダーです。

典型的なパターンが「Bearer トークン」です。

async function loadMyProfile(token) {
  const response = await fetch("https://example.com/api/me", {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

  if (!response.ok) {
    throw new Error("HTTPエラー: " + response.status);
  }

  const data = await response.json();
  console.log("自分のプロフィール:", data);
}
JavaScript

Authorization: Bearer xxxxxxxx
という形で、「この文字列があなたを表すトークンですよ」と伝えます。

ここが重要です。
Authorization は 「認証・認可のカギを渡すところ」 です。
API の仕様書に「ヘッダーに Authorization: Bearer トークン を付けてください」と書いてあったら、
headers 内でそこを正しく組み立てるのがあなたの仕事になります。

Accept ヘッダー：欲しい形式をリクエストする

「どの形式で返してほしいか」を指定する

Accept ヘッダーは、

サーバーさん、できればこういう形式で返してもらえると助かります

と、「期待するレスポンスの形式」を伝えるヘッダー です。

JSON を期待するときの例：

const response = await fetch("https://example.com/api/users", {
  headers: {
    Accept: "application/json",
  },
});
JavaScript

これにより、「JSON で返してね」とサーバーにリクエストできます。
多くの REST API はデフォルトで JSON を返すので、省略されることも多いですが、
仕様によっては必須になっているケースもあります。

もし、「HTML で返して」「XML で返して」などフォーマットが選べる API なら、

  • Accept: text/html
  • Accept: application/xml

のように切り替えることで、応答形式をコントロールできます。

ここが重要です。
Accept は 「自分が受け取りたいレスポンスのタイプを表明する場所」。
特に JSON API では Accept: application/json をセットしておくと、意図がはっきりしていいです。

headers オブジェクトの書き方いろいろ

素直にリテラルで書く

一番シンプルなのは、さっきのようにオブジェクトリテラルで書く方法です。

const response = await fetch(url, {
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${token}`,
  },
});
JavaScript

Headers クラスを使って組み立てる

もう少し柔軟に扱いたいときは、Headers というクラスを使うこともできます。

const headers = new Headers();
headers.append("Content-Type", "application/json");
headers.append("Authorization", `Bearer ${token}`);

const response = await fetch(url, {
  headers,
});
JavaScript

動きは同じですが、

  • 条件によってヘッダーを追加したり
  • 共通のヘッダーを関数の外で一度だけ作って使い回したり

するときに便利です。

ここが重要です。
最初のうちは、
headers: { "ヘッダー名": "値" } の形で十分 です。
慣れてきて「共通ヘッダーをまとめたいな」と思ったタイミングで、Headers クラスを検討すればOKです。

よくある「front では設定しちゃダメなヘッダー」

ブラウザが勝手に付けるものは上書きできない

ブラウザ環境の fetch では、
セキュリティの観点から、開発者が自由に設定できないヘッダー もあります。

例えば：

  • Host
  • User-Agent
  • Cookie（※ JavaScript から直接ヘッダーとしては付けられない）

などは、ブラウザが管理していて、勝手に書き換えたり付けたりできません。

また、CORS の関係で、
「サーバー側が許可していないヘッダー」は送れないこともあります。

ここが重要です。
「フロントエンドの JavaScript から設定できるヘッダーには制限がある」 という事実は、軽く頭に置いておいてください。
API の仕様書にヘッダー指定があっても、「ブラウザからそのままは送れない」ということもあるので、その場合はサーバー側のプロキシなど別の設計が必要になることがあります。

具体例：よくある headers セットをまとめて眺める

JSON を POST して、認証トークンも付ける例

async function updateProfile(token, profile) {
  const response = await fetch("https://example.com/api/profile", {
    method: "PUT",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
      Authorization: `Bearer ${token}`,
    },
    body: JSON.stringify(profile),
  });

  if (!response.ok) {
    throw new Error("HTTPエラー: " + response.status);
  }

  const data = await response.json();
  console.log("更新結果:", data);
}
JavaScript

ここでのヘッダーの意味を整理すると：

Content-Type: application/json
→ 今から送る body は JSON だよ。

Accept: application/json
→ レスポンスも JSON で返してほしいな。

Authorization: Bearer ...
→ これが認証トークンです。誰のリクエストか分かるようにしてね。

こんな感じで、ヘッダーは「会話のお膳立て」をしているイメージです。

初心者として「headers の設定」で本当に押さえてほしいこと

headers は、「このリクエストのメタ情報（追加情報）をサーバーに伝えるためのラベル集」。
送るデータの形式（Content-Type）、欲しいレスポンスの形式（Accept）、認証情報（Authorization）などを載せる場所。

JSON を送るときは、必ず
"Content-Type": "application/json" と body: JSON.stringify(…) をセットで書く。
これが崩れるとサーバーは正しく読めない。

認証が必要な API では、Authorization: Bearer トークン のようなヘッダーで「誰のアクセスか」を伝える。
API の仕様書にしたがって、必要なヘッダーを headers にちゃんと載せることが重要。

headers の基本形は fetch(url, { headers: { "Header-Name": "value" } })。
最初はオブジェクトリテラルで十分。
慣れてきたら Headers クラスで共通ヘッダーをまとめることもできる。

ブラウザからは自由に設定できないヘッダーもある（Host, User-Agent など）。
「全部自分で好きにいじれるわけではない」という制約も、薄く覚えておく。

ここが重要です。
headers を触るときは、「この 1 行で、サーバーに何を伝えようとしているのか？」を必ず自分の言葉で説明してみてください。
「これは JSON ですよ」「これは私の身分証ですよ」「これはこういう形式で返してほしいという希望ですよ」。
そうやって意味を意識しながら書くと、単なる暗記ではなく、「サーバーとちゃんと会話している感覚」でコードが書けるようになります。

練習としては、例えばこんなことをやってみると良いです。

// 練習1:
// name, age を含むオブジェクトを JSON で POST する fetch を書き、
// "Content-Type" と body を正しく設定してみる。

// 練習2:
// ダミーのトークン文字列を作って、Authorization ヘッダーを付けた GET リクエストを書く。
// console.log で headers を確認しながら、「この1行は何を意味してる？」と自分に説明してみる。

// 練習3:
// Accept: "application/json" を付けた場合と付けない場合で、
// API の仕様書を見ながら「どう振る舞いが変わる想定なのか」を考えてみる。
JavaScript

単に「書ける」だけでなく、
「なぜそれを書くのか」が分かるようになったとき、headers はあなたにとってただの呪文ではなく、コミュニケーションの道具になります。

スポンサーリンク
タイトルとURLをコピーしました