HTTPリクエストとレスポンスの仕組みを図解で理解する

Web開発を学び始めると、必ず出会う「HTTP」という言葉。ブラウザでWebページを閲覧するとき、裏側ではHTTPリクエストとHTTPレスポンスのやり取りが行われています。

この記事では、HTTP通信の基本構造を図解を交えて解説します。HTTPリクエストの構成要素、リクエストメソッド（GET/POST/PUT/DELETE）、HTTPレスポンスのステータスコード、そしてヘッダー情報について理解することで、Web開発の基礎を固めることができます。

HTTPとは何か

HTTP（HyperText Transfer Protocol）は、WebブラウザとWebサーバー間でデータをやり取りするための通信プロトコルです。HTMLファイル、画像、CSS、JavaScriptなど、Webページを構成するすべてのリソースはHTTP通信を通じて転送されます。

HTTP通信の基本的な流れ

HTTP通信は「クライアント・サーバーモデル」に基づいています。クライアント（主にWebブラウザ）がサーバーにHTTPリクエストを送信し、サーバーがHTTPレスポンスを返すという単純な構造です。

sequenceDiagram
    participant Client as クライアント<br>(ブラウザ)
    participant Server as サーバー
    Client->>Server: HTTPリクエスト
    Server-->>Client: HTTPレスポンス

HTTPの特徴

HTTP通信には以下の重要な特徴があります。

• ステートレス: 各HTTPリクエストは独立しており、前のリクエストの状態を保持しません
• テキストベース: HTTPメッセージは人間が読める形式で構成されています（HTTP/1.1の場合）
• 拡張可能: ヘッダーを追加することで機能を拡張できます

HTTPリクエストの構造

HTTPリクエストは、クライアントからサーバーへ送信されるメッセージです。HTTPリクエストは「リクエストライン」「ヘッダー」「ボディ」の3つの要素で構成されます。

HTTPリクエストの構成要素

block-beta
    columns 1
    block:request["HTTPリクエストの構成"]
        columns 1
        A["リクエストライン<br>GET /api/users HTTP/1.1"]
        B["ヘッダー<br>Host: example.com<br>User-Agent: Mozilla/5.0<br>Accept: application/json<br>Content-Type: application/json"]
        C["ボディ（オプション）<br>{name: John, email: john@example.com}"]
    end

リクエストラインの詳細

リクエストラインは、HTTPリクエストの最初の行であり、以下の3つの要素で構成されます。

flowchart LR
    subgraph RequestLine["GET /api/users HTTP/1.1"]
        A["GET"] --- B["/api/users"] --- C["HTTP/1.1"]
    end
    A -.- D["HTTPメソッド"]
    B -.- E["リクエストURI（パス）"]
    C -.- F["HTTPバージョン"]

HTTPリクエストメソッド

HTTPリクエストメソッドは、サーバーに対して実行したい操作を示します。RESTful APIでは、CRUDの各操作に対応したメソッドを使い分けることが一般的です。

主要なHTTPリクエストメソッド

GETメソッド

GETメソッドは、サーバーからリソースを取得するために使用します。HTTPリクエストの中で最も頻繁に使用されるメソッドです。

1
2
3

GET /api/users/123 HTTP/1.1
Host: example.com
Accept: application/json

GETリクエストの特徴は以下の通りです。

• リクエストボディを持たない
• URLにクエリパラメータを含めることができる
• キャッシュ可能
• ブラウザの履歴に残る

POSTメソッド

POSTメソッドは、サーバーに新しいリソースを作成するために使用します。フォームの送信やAPI経由でのデータ作成に使用されます。

1
2
3
4
5
6
7
8

POST /api/users HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "name": "田中太郎",
  "email": "tanaka@example.com"
}

PUTメソッド

PUTメソッドは、指定したリソースを完全に置き換えるために使用します。リソース全体の更新に適しています。

1
2
3
4
5
6
7
8
9

PUT /api/users/123 HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "name": "田中太郎",
  "email": "tanaka-updated@example.com",
  "age": 30
}

DELETEメソッド

DELETEメソッドは、指定したリソースを削除するために使用します。

1
2

DELETE /api/users/123 HTTP/1.1
Host: example.com

HTTPレスポンスの構造

HTTPレスポンスは、サーバーからクライアントへ返されるメッセージです。HTTPリクエストに対する応答として、リクエストの処理結果を含みます。

HTTPレスポンスの構成要素

block-beta
    columns 1
    block:response["HTTPレスポンスの構成"]
        columns 1
        A["ステータスライン<br>HTTP/1.1 200 OK"]
        B["レスポンスヘッダー<br>Content-Type: application/json<br>Content-Length: 1234<br>Cache-Control: max-age=3600"]
        C["レスポンスボディ<br>{id: 123, name: 田中太郎, email: ...}"]
    end

ステータスラインの詳細

ステータスラインは、HTTPレスポンスの最初の行であり、以下の要素で構成されます。

flowchart LR
    subgraph StatusLine["HTTP/1.1 200 OK"]
        A["HTTP/1.1"] --- B["200"] --- C["OK"]
    end
    A -.- D["HTTPバージョン"]
    B -.- E["ステータスコード"]
    C -.- F["ステータスメッセージ（理由句）"]

HTTPステータスコード

HTTPステータスコードは、HTTPリクエストの処理結果を3桁の数字で表します。ステータスコードは5つのカテゴリに分類されます。

ステータスコードのカテゴリ

頻出ステータスコード一覧

Web開発でよく遭遇するHTTPステータスコードを紹介します。

成功レスポンス（2xx）

リダイレクト（3xx）

クライアントエラー（4xx）

サーバーエラー（5xx）

HTTPヘッダー

HTTPヘッダーは、HTTPリクエストとHTTPレスポンスに追加のメタ情報を付与するための仕組みです。「名前: 値」の形式で記述されます。

リクエストヘッダー

HTTPリクエストでよく使用されるヘッダーを紹介します。

レスポンスヘッダー

HTTPレスポンスでよく使用されるヘッダーを紹介します。

開発者ツールでHTTP通信を確認する

実際のHTTPリクエストとHTTPレスポンスを確認するには、ブラウザの開発者ツール（DevTools）を使用します。

Chrome DevToolsでの確認手順

以下の手順で、HTTP通信の詳細を確認できます。

1. Chromeブラウザで任意のWebページを開く
2. F12キーまたはCtrl + Shift + I（Macの場合はCmd + Option + I）で開発者ツールを開く
3. 「Network」タブを選択
4. ページを再読み込み（F5またはCtrl + R）
5. 一覧から確認したいリソースをクリック

確認できる情報

開発者ツールのNetworkタブでは、以下の情報を確認できます。

• Headers: HTTPリクエストヘッダーとHTTPレスポンスヘッダー
• Payload: リクエストボディ（POSTリクエストなど）
• Preview: レスポンスのプレビュー
• Response: レスポンスボディの生データ
• Timing: リクエストの処理時間

実際のHTTPリクエスト例

以下は、開発者ツールで確認できるHTTPリクエストの例です。

1
2
3
4
5
6
7

GET /api/users HTTP/1.1
Host: api.example.com
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36

実際のHTTPレスポンス例

以下は、対応するHTTPレスポンスの例です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Content-Length: 256
Date: Tue, 31 Dec 2025 03:00:00 GMT
Cache-Control: no-cache

[
  {"id": 1, "name": "田中太郎", "email": "tanaka@example.com"},
  {"id": 2, "name": "鈴木花子", "email": "suzuki@example.com"}
]

curlコマンドでHTTP通信を確認する

開発者ツール以外にも、コマンドラインツールのcurlを使用してHTTP通信を確認できます。

基本的なcurlの使い方

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

# GETリクエストを送信
curl https://api.example.com/users

# レスポンスヘッダーも表示
curl -i https://api.example.com/users

# POSTリクエストを送信（JSONデータ）
curl -X POST https://api.example.com/users \
  -H "Content-Type: application/json" \
  -d '{"name": "田中太郎", "email": "tanaka@example.com"}'

# 詳細な通信内容を表示
curl -v https://api.example.com/users

まとめ

この記事では、HTTP通信の基本について解説しました。

• HTTPはWebブラウザとサーバー間でデータをやり取りするプロトコル
• HTTPリクエストは「リクエストライン」「ヘッダー」「ボディ」で構成される
• HTTPリクエストメソッド（GET/POST/PUT/DELETE）はサーバーへの操作を指定する
• HTTPレスポンスは「ステータスライン」「ヘッダー」「ボディ」で構成される
• ステータスコードでリクエストの処理結果を把握できる
• 開発者ツールやcurlでHTTP通信を確認できる

HTTP通信の仕組みを理解することは、Web開発の第一歩です。次回は、HTTPSとSSL/TLSによる暗号化通信について解説します。

参考リンク

• MDN Web Docs - HTTP の概要
• MDN Web Docs - HTTP リクエストメソッド
• MDN Web Docs - HTTP レスポンスステータスコード
• RFC 9110 - HTTP Semantics
• Chrome DevTools - Network パネル