#はじめに

「APIにリクエストを送っているはずなのに、なぜか404が返ってくる」「フォームを送信したのにデータが届いていない」——Web開発をしていると、こうした問題に何度も遭遇します。

このとき、多くの開発者がDevToolsのNetworkタブを開いて通信内容を確認します。しかし、表示されている情報の意味がわからなければ、何が問題なのかを特定できません。

この記事を読むと、以下のことができるようになります：

  • HTTPリクエストとレスポンスの構造を理解し、各部分が何を意味するのかがわかる
  • DevToolsで通信内容を見て、「どこがおかしいのか」を自分で特定できる
  • APIが期待通りに動かないとき、原因を切り分けられる

つまり、**「なんとなくDevToolsを眺める」から「根拠を持ってデバッグする」**に変わることができます。

#HTTPとは

HTTP（HyperText Transfer Protocol）とは、WebブラウザとWebサーバーがデータをやり取りするためのルール（通信規約）です。

身近な例えで説明すると、HTTPは「郵便のルール」のようなものです。

  • 手紙を送るときは、封筒に宛先を書き、中に内容を入れ、ポストに投函する
  • 届いた手紙には、差出人が書かれており、中に返事が入っている

HTTPも同じです。ブラウザが「リクエスト」という手紙をサーバーに送り、サーバーが「レスポンス」という返事を返します。この往復のやり取りで、Webページの表示やデータの送受信が実現しています。

#HTTPリクエストの構造

HTTPリクエストは、「何を」「どうしてほしいか」をサーバーに伝える手紙です。3つの部分で構成されています。

┌─────────────────────────────────────┐
│ リクエストライン                      │ ← 何をしたいか（封筒の表面）
├─────────────────────────────────────┤
│ ヘッダー                              │ ← 追加情報（封筒の注意書き）
├─────────────────────────────────────┤
│ ボディ                                │ ← 送りたいデータ（封筒の中身）
└─────────────────────────────────────┘

#1. リクエストライン

リクエストの1行目で、「どこに」「何をしたいか」を宣言します。

GET /api/users HTTP/1.1

この1行には3つの情報が含まれています：

要素例意味
メソッドGET何をしたいか（取得・作成・更新・削除）
パス/api/usersどのリソースに対して
バージョンHTTP/1.1HTTPのバージョン

言い換えると、「/api/usersというリソースをGET（取得）したい」という意思表示です。

#2. リクエストヘッダー

リクエストに付加情報を添えるための領域です。「誰が」「どんな形式で」「どのサーバーに」などを伝えます。

Host: example.com
Content-Type: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiIs...
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)

よく使うヘッダーを覚えておきましょう：

ヘッダー名役割例
Hostリクエスト先のサーバーexample.com
Content-Type送信するデータの形式application/json
Authorization認証情報（ログイン済みの証明）Bearer xxx...
Accept受け取りたいデータの形式application/json

#3. リクエストボディ

サーバーに送りたいデータ本体を格納する領域です。ユーザー登録フォームの入力内容などがここに入ります。

{
  "name": "山田太郎",
  "email": "yamada@example.com"
}

注意: GETやDELETEリクエストでは、通常ボディは使いません。ボディを使うのは主にPOSTやPUTのときです。

#HTTPレスポンスの構造

HTTPレスポンスは、サーバーからの返事です。リクエストと同様に3つの部分で構成されています。

┌─────────────────────────────────────┐
│ ステータスライン                      │ ← 結果の概要（成功？失敗？）
├─────────────────────────────────────┤
│ ヘッダー                              │ ← 追加情報
├─────────────────────────────────────┤
│ ボディ                                │ ← 返されたデータ
└─────────────────────────────────────┘

#1. ステータスライン

レスポンスの1行目で、リクエストが成功したか失敗したかを示します。

HTTP/1.1 200 OK
要素例意味
バージョンHTTP/1.1HTTPのバージョン
ステータスコード200結果を表す3桁の数字
ステータステキストOKコードの説明

ステータスコードは最初の数字で大まかな意味がわかります：

範囲意味例
2xx成功200 OK, 201 Created
3xxリダイレクト301 Moved Permanently, 304 Not Modified
4xxクライアントエラー（こちらのミス）400 Bad Request, 404 Not Found
5xxサーバーエラー（あちらのミス）500 Internal Server Error

#2. レスポンスヘッダー

サーバーからの付加情報です。「データの形式」「キャッシュの設定」「Cookieの発行」などが含まれます。

Content-Type: application/json
Content-Length: 256
Cache-Control: max-age=3600
Set-Cookie: session=abc123; HttpOnly; Secure

#3. レスポンスボディ

サーバーから返されるデータ本体です。HTML、JSON、画像など、リクエストした内容によって様々です。

{
  "id": 1,
  "name": "山田太郎",
  "email": "yamada@example.com"
}

#DevToolsで実際に確認してみよう

ここまでの知識を使って、実際のHTTP通信を観察してみましょう。

#手順1: DevToolsを開く

  1. Chromeで任意のWebサイトを開く（例: https://example.com）
  2. キーボードショートカットでDevToolsを開く
    • Mac: Cmd + Option + I
    • Windows/Linux: F12 または Ctrl + Shift + I
  3. 上部のタブから「Network」を選択

#手順2: 通信を記録する

  1. Networkタブが開いた状態で、ページをリロード（Cmd + R / F5）
  2. 一覧にリクエストが表示される

#手順3: リクエストの詳細を確認する

  1. 一覧から任意のリクエストをクリック
  2. 右側または下部に詳細パネルが表示される
  3. 各タブで以下の情報を確認：
タブ確認できる内容
Headersリクエスト/レスポンスのヘッダー情報
Payloadリクエストボディ（POSTなどで送信したデータ）
Previewレスポンスボディの整形表示
Responseレスポンスボディの生データ
Timing通信にかかった時間の内訳

#手順4: 問題の切り分けに使う

API呼び出しがうまくいかないとき、以下の順序で確認します：

  1. ステータスコードを確認 → 200番台以外なら、まずエラーの種類を把握
  2. Request Headersを確認 → 認証ヘッダーは正しく送れているか？
  3. Payloadを確認 → 送信したデータは意図通りか？
  4. Response を確認 → サーバーからのエラーメッセージを読む

#HTTPメソッドの使い分け

リクエストラインの最初にあるメソッドは、「何をしたいか」を表します。主なメソッドを覚えておきましょう。

メソッド用途例
GETデータを取得するユーザー一覧を取得
POSTデータを作成する新規ユーザーを登録
PUTデータを全体更新するユーザー情報を丸ごと更新
PATCHデータを部分更新するメールアドレスだけ更新
DELETEデータを削除するユーザーを削除

#まとめ

この記事で学んだことを振り返りましょう：

  • **HTTPはブラウザとサーバーの「手紙のやり取り」**である
  • リクエストは「リクエストライン」「ヘッダー」「ボディ」の3構成
    • リクエストライン: 何を・どうしたいか
    • ヘッダー: 追加情報（認証、データ形式など）
    • ボディ: 送信するデータ本体
  • レスポンスは「ステータスライン」「ヘッダー」「ボディ」の3構成
    • ステータスコード: 2xx=成功、4xx=クライアントエラー、5xx=サーバーエラー
  • DevToolsのNetworkタブで実際の通信を確認できる

#次のステップ

HTTPの基本構造がわかったところで、次はステータスコードをより深く理解しましょう。「404と400の違いは？」「503が返ってきたらどうする？」——ステータスコードを正しく読み解くことで、問題の原因特定がさらに速くなります。

今回学んだ「リクエストとレスポンスの構造」は、今後のすべての記事の土台になります。DevToolsでNetworkタブを開くことに慣れておいてください。

#参考リンク