Web

リクエスト/レスポンス

中級

読み方：リクエストレスポンス｜英語：Request Response

ブラウザがサーバーに送る要求がリクエスト、サーバーが返す応答がレスポンスで、Web通信の基本だよ。

やさしい説明

リクエストとレスポンスは、ブラウザとサーバーの「会話」です。ブラウザが「このページをください」と頼み（リクエスト）、サーバーが「はいどうぞ」と返します（レスポンス）。

Webページを見るとき、裏側では何十回もこの会話が行われています。HTML、CSS、画像、JSファイルそれぞれに対してリクエスト/レスポンスが発生します。

開発者ツールの Network タブで、すべてのリクエスト/レスポンスをリアルタイムで確認できます。

具体例・使い方

# リクエスト（ブラウザ → サーバー）
GET /index.html HTTP/1.1
Host: example.com
Accept: text/html
Accept-Language: ja

# レスポンス（サーバー → ブラウザ）
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8

<html>...</html>

JavaScriptでのリクエスト（fetch API）

// GETリクエスト: データを取得する
const response = await fetch("https://api.example.com/users");
const data = await response.json();
console.log(data);

// POSTリクエスト: データを送信する
const response = await fetch("https://api.example.com/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "太郎", email: "[email protected]" }),
});
console.log(response.status); // 201

HTTPメソッドの種類

GET — データの取得。ページの表示、APIでのデータ読み込み
POST — データの送信・作成。フォーム送信、新規レコード作成
PUT / PATCH — データの更新。PUTは全体、PATCHは一部を更新
DELETE — データの削除

ブラウザのURLバーでページを開くのは GET リクエストです。フォームの「送信」ボタンを押すのは多くの場合 POST リクエストです。

レスポンスのステータスコード

200 OK — 成功。リクエストが正常に処理された
201 Created — 作成成功。POSTでリソースが作られた
400 Bad Request — リクエストの内容が不正
401 Unauthorized — 認証が必要（ログインしていない）
404 Not Found — リソースが見つからない
500 Internal Server Error — サーバー側のエラー

いつ使う？

fetch でAPIにアクセスするとき、フォームを送信するとき、ページを表示するとき——Webを使うときは常にリクエスト/レスポンスが発生しています。ブラウザの開発者ツール（F12）→ Networkタブで実際の通信内容を確認できます。

間違いやすいポイント

❌ レスポンスのContent-Typeを確認しない

APIのレスポンスがJSONだと思ったらHTMLエラーページだった——ということがあります。response.headers.get("Content-Type") を確認しましょう。

❌ fetch のエラーハンドリングを忘れる

fetch は404や500でも reject しません。response.ok または response.status を確認して、エラーレスポンスを適切に処理しましょう。

よくある疑問

Q: リクエストの中身は？

A: URL、HTTPメソッド（GET等）、ヘッダー（認証情報等）、ボディ（送信データ）で構成されます。

Q: レスポンスの中身は？

A: ステータスコード（200等）、ヘッダー（Content-Type等）、ボディ（HTML/JSON等のデータ）で構成されます。

Q: リクエストヘッダーとは？

A: リクエストに付加する情報です。Content-Type（データ形式）、Authorization（認証トークン）、Cookie などが代表的です。