HTTPとは何か

ストーリー

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

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

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

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

HTTPとは

一言で言うと

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

HTTP = HyperText Transfer Protocol

HTTPの基本モデル

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

[ブラウザ]                          [Webサーバー]
    │                                    │
    │── HTTPリクエスト ───────────>       │
    │   「このページをください」           │
    │                                    │
    │       <─────────── HTTPレスポンス ──│
    │                  「はい、どうぞ」    │
    │                                    │

会話の例え

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

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

HTTPリクエストの構造

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

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

リクエストライン

GET /index.html HTTP/1.1
│    │           │
│    │           └── HTTPバージョン
│    └────────────── パス（リクエスト先）
└─────────────────── HTTPメソッド

ヘッダー

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

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>

ステータスライン

HTTP/1.1 200 OK
│         │   │
│         │   └── ステータスメッセージ
│         └────── ステータスコード
└──────────────── HTTPバージョン

ヘッダー

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

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サイトの標準

HTTP:   [ブラウザ] ── 平文データ ──> [サーバー]  ← 盗み見される可能性
HTTPS:  [ブラウザ] ── 暗号化データ ──> [サーバー]  ← 安全

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

まとめ

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

チェックリスト

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

次のステップへ

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

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

推定読了時間: 30分