HTTPとは何か - L0 カリキュラム

ストーリー

あなた

先輩、URLの最初にある http:// って何なんですか？

あ

先

先輩

それがHTTPだよ。Webの世界で最も重要なプロトコルさ

あなた

プロトコル！Step 1で習いました

あ

先

先輩

そう。HTTPはブラウザとWebサーバーが会話するためのルールなんだ

HTTPとは

一言で言うと

ブラウザとWebサーバーが通信するためのプロトコル（約束事）

HTTP = HyperText Transfer Protocol

HTTPの基本モデル

HTTPは リクエスト/レスポンス モデルで動きます。

sequenceDiagram
    participant B as ブラウザ
    participant S as Webサーバー
    B->>S: HTTPリクエスト「このページをください」
    S->>B: HTTPレスポンス「はい、どうぞ」

会話の例え

お客さん（ブラウザ）: 「メニューのAセットをください」   ← リクエスト
店員（サーバー）:     「かしこまりました。こちらです」   ← レスポンス

クライアント（ブラウザ）がリクエストを送る
サーバーがリクエストを処理する
サーバーがレスポンスを返す
ブラウザがレスポンスを画面に表示する

HTTPリクエストの構造

HTTPリクエストは3つの部分で構成されます。

GET /index.html HTTP/1.1          ← リクエストライン
Host: www.example.com             ← ヘッダー
Accept: text/html                 ← ヘッダー
                                  ← 空行
（ボディ）                         ← リクエストボディ（GETでは通常なし）

リクエストライン

graph LR
    A["GET\nHTTPメソッド"] --- B["/index.html\nパス（リクエスト先）"] --- C["HTTP/1.1\nHTTPバージョン"]
    style A fill:#dbeafe,stroke:#2563eb,stroke-width:2px,color:#1e40af
    style B fill:#d1fae5,stroke:#059669,stroke-width:2px,color:#065f46
    style C fill:#fef3c7,stroke:#d97706,stroke-width:2px,color:#92400e

ヘッダー

リクエストに付随する追加情報。

Host: www.example.com       ← 接続先のドメイン名
Accept: text/html           ← 受け入れるデータ形式
User-Agent: Mozilla/5.0     ← ブラウザの情報

ボディ

リクエストと一緒に送るデータ。GETリクエストでは通常ありません。POSTリクエストでフォームデータやJSONを送るときに使います。

HTTPレスポンスの構造

HTTPレスポンスも3つの部分で構成されます。

HTTP/1.1 200 OK                   ← ステータスライン
Content-Type: text/html           ← ヘッダー
Content-Length: 1234              ← ヘッダー
                                  ← 空行
<html>                            ← レスポンスボディ
<body>Hello World</body>
</html>

ステータスライン

graph LR
    A["HTTP/1.1\nHTTPバージョン"] --- B["200\nステータスコード"] --- C["OK\nステータスメッセージ"]
    style A fill:#fef3c7,stroke:#d97706,stroke-width:2px,color:#92400e
    style B fill:#d1fae5,stroke:#059669,stroke-width:2px,color:#065f46
    style C fill:#dbeafe,stroke:#2563eb,stroke-width:2px,color:#1e40af

ヘッダー

レスポンスに付随する追加情報。

Content-Type: text/html     ← データの種類（HTML）
Content-Length: 1234        ← データのサイズ（バイト）
Set-Cookie: session=abc     ← Cookieの設定

ボディ

実際のデータ（HTML、JSON、画像など）。

Webページ表示の流れ

ブラウザで http://www.example.com/index.html にアクセスしたとき：

1. [DNS解決]  www.example.com → 93.184.216.34
2. [TCP接続]  93.184.216.34 のポート80に接続
3. [リクエスト] GET /index.html HTTP/1.1
4. [レスポンス] HTTP/1.1 200 OK + HTMLデータ
5. [表示]     ブラウザがHTMLを解釈して画面に表示

追加のリクエスト

HTMLの中にCSS、JavaScript、画像が含まれている場合、それぞれに対して追加のHTTPリクエストが送られます。

1回目: GET /index.html       → HTMLを取得
2回目: GET /style.css        → CSSを取得
3回目: GET /script.js        → JavaScriptを取得
4回目: GET /images/logo.png  → 画像を取得

1つのWebページを表示するために、数十〜数百のHTTPリクエストが送られることもあります。

HTTP と HTTPS

HTTP

http://www.example.com

通信が 暗号化されていない
データが盗み見される可能性がある
ポート番号: 80

HTTPS

https://www.example.com

通信が 暗号化されている（SSL/TLS）
データが安全に送受信される
ポート番号: 443
現在のWebサイトの標準

graph LR
    B1["ブラウザ"] -->|"平文データ ⚠️"| S1["サーバー"]
    B2["ブラウザ"] -->|"暗号化データ 🔒"| S2["サーバー"]
    subgraph HTTP["HTTP（盗み見される可能性）"]
        B1
        S1
    end
    subgraph HTTPS["HTTPS（安全）"]
        B2
        S2
    end
    style HTTP fill:#fee2e2,stroke:#dc2626,stroke-width:2px,color:#991b1b
    style HTTPS fill:#d1fae5,stroke:#059669,stroke-width:2px,color:#065f46
    style B1 fill:#fef3c7,stroke:#d97706,color:#92400e
    style S1 fill:#fef3c7,stroke:#d97706,color:#92400e
    style B2 fill:#dbeafe,stroke:#2563eb,color:#1e40af
    style S2 fill:#dbeafe,stroke:#2563eb,color:#1e40af

現在はほぼすべてのWebサイトが HTTPS を使っています。ブラウザのアドレスバーに鍵マークが表示されていれば HTTPS です。

まとめ

ポイント	内容
HTTP	ブラウザとWebサーバーの通信プロトコル
リクエスト/レスポンス	クライアントが要求し、サーバーが応答する
リクエスト構造	リクエストライン + ヘッダー + ボディ
レスポンス構造	ステータスライン + ヘッダー + ボディ
HTTPS	HTTPの暗号化版（現在の標準）

チェックリスト

HTTPが何の略か言える
リクエスト/レスポンスモデルを理解した
リクエストとレスポンスの構造を知っている
HTTPとHTTPSの違いが分かる

次のステップへ

HTTPの基本が分かりましたね。

次のセクションでは、HTTPメソッド（GET、POST、PUT、DELETE）を詳しく学びます。

推定読了時間: 30分