HTTP レスポンス

✅ HTTP レスポンスヘッダとは？

📦 サーバー → ブラウザに返す “メタ情報”

HTTP レスポンスヘッダは、サーバーがブラウザに送る「追加の情報（メタデータ）」のことです。

✅ 実際のイメージ

たとえば、あるページにアクセスすると…


HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Set-Cookie: name=Hattori; path=/
Cache-Control: no-cache

これは ヘッダ情報（上）＋ 中身（HTML など）（下）という構造です。

✅ よく使うレスポンスヘッダたち

ヘッダ名	意味・使いどころ
`Content-Type`	ブラウザに「どんなデータか」を伝える（例: HTML, JSON, 画像）
`Set-Cookie`	ブラウザにクッキーを保存させる（ログイン情報など）
`Cache-Control`	キャッシュの制御（常に最新にする、保存するなど）
`Location`	リダイレクト先の URL を指定する（ステータスコード 302 と一緒に使う）
`Access-Control-Allow-Origin`	CORS（他サイトからのアクセス許可）に使う
`Content-Disposition`	ファイルダウンロードとして扱うかどうかの指定

✅ 実際のコードとのつながり（Next.js / Express）


// Next.js API Route
res.setHeader('Content-Type', 'application/json')
res.setHeader('Set-Cookie', serialize('token', 'abc123'))
res.status(200).json({ message: 'OK' })

これは：

ヘッダで JSON 形式とクッキーを伝え、
ボディ（中身）で { message: 'OK' } を返している状態です。

✅ ヘッダの役割まとめ

✅ ブラウザに指示を出す
- 「これは JSON だよ」「ログイン情報を保存してね」など
✅ セキュリティや最適化にも関わる
- クッキー設定、キャッシュ、CORS なども全部ヘッダ経由で伝える

✅ 覚えておくと便利なポイント

ヘッダは「見えないけど重要な情報」
デバッグはブラウザの DevTools →「Network」タブで確認できる
自分で res.setHeader() を使って送ることも多い！

✅ HTTP レスポンスのボディとは？

📦 サーバーからブラウザへ返す “中身（データそのもの）” のこと

✅ ヘッダーとボディの違いをまず確認！


▼ ヘッダー部分（メタ情報）
HTTP/1.1 200 OK
Content-Type: application/json

▼ ボディ部分（中身）
{ "message": "ログイン成功", "token": "abc123" }

ヘッダ →「これは JSON です」など、データの説明書
ボディ → 実際に返す データそのもの

✅ 実際のコードでのボディの扱い（Next.js / Express）

Next.js API Route での例：


res.status(200).json({ message: 'ログイン成功', token: 'abc123' });

この json() の引数が レスポンスボディ になります！

Express の例：


res.send('<h1>Hello</h1>'); // HTMLを返す

// または JSON
res.json({ message: 'OK' });

どちらも res.send() や res.json() の中が ボディ にあたります。

✅ ボディの形式はいろいろ

レスポンスボディの内容は、Content-Type によって変わります。

Content-Type	ボディの形式
`text/html`	HTML 文
`application/json`	JSON（オブジェクト）
`text/plain`	プレーンテキスト
`image/png` など	画像ファイル

✅ ブラウザでの確認方法

ブラウザの DevTools（F12）
「Network」タブで任意のリクエストを選択
「Response」タブを見ると、それが ボディの中身

✅ まとめ

レスポンスヘッダ：データの説明・命令
レスポンスボディ：サーバーが実際に返したい中身
res.json() や res.send() でセットする
JSON、HTML、画像など、形式は自由！

momotech_blog

HTTP レスポンスとは