HTTP101
HTTPを図と演習で理解する
「開発者ツールの Network タブを開いたが、どこを見ればいいのか分からない」「404 と 403 の違いを聞かれて言葉に詰まる」— Web を作り始めると毎日 HTTP に触れるのに、その中身は意外と読めないものです。この講座では HTTP を丸暗記するのではなく、HTTP は「テキストで書かれた往復書簡」であり、何を頼んだか（メソッドとパス）・結果はどうだったか（ステータスコード）・条件と補足（ヘッダ）の 3 点セットを毎回読む、という型を身につけます。図で構造をつかみ、各章の途中にある小問とシミュレータで確かめながら進む構成です。
図 → 生テキスト → 手計算 → curl
全 43 問
ブラウザ内採点
localStorage 保存
所要
3〜4 時間
問題数
全 43 問
形式
7 章 + 小問 + シミュレータ
費用
無料
HTTP の正体は、この 1 往復のテキストです。リクエストとレスポンスはどちらも「1 行目 + ヘッダ + 空行 + ボディ」という同じ骨格を持ちます。この骨格を頭に置くと、以降のすべての章が読みやすくなります。
この講座の特徴
本文のすぐ下に小問
読んだ直後に 2〜3 問ずつ解く構成なので、「分かったつもり」のまま先へ進みにくくなっています。
生のテキストを読む
リクエスト行・ステータス行・ヘッダを、図解した上で実際のテキストのまま読みます。curl や開発者ツールの出力がそのまま教材になります。
キャッシュ判定シミュレータ
第 5 章のシミュレータで、max-age と経過時間、ETag の有無を動かすと「リクエストは飛ぶか・レスポンスは 200 か 304 か・転送量はいくらか」がどう変わるかを目で確かめられます。
ブラウザ内採点・登録不要
全 43 問はブラウザ内で採点され、結果はお使いのブラウザの localStorage にだけ保存されます。サーバには何も送信しません。
この講座を貫く見方 — 往復書簡を 3 点セットで読む
HTTP は、ブラウザとサーバの間で交わされるテキストで書かれた往復書簡です。難しそうに見える出力も、毎回同じ 3 点を確認すれば必ず読めます。章が進むごとに、それぞれの点を読む解像度が上がっていくイメージです。
1. 何を頼んだか
メソッドとパス — GET なのか POST なのか、どの URL に対してか。読むのはリクエスト行です。（第 1〜2 章）
2. 結果はどうだったか
ステータスコード — 成功か、転送か、こちらの誤りか、あちらの障害か。3 桁の数字が答えます。（第 3 章）
3. 条件と補足は何か
ヘッダ — どんな形式で、どのくらいの量を、どんな条件付きで運んだか。往復書簡の添え書きです。（第 4〜5 章）
この講座の合言葉: 開発者ツールや curl の出力に圧倒されそうになったら、そこで思考を止めずに読んでください — 何を頼んだか？ 結果はどうだったか？ 条件と補足は何か？
章構成
1 導入 — ブラウザとサーバの HTTP の会話を読む
5 問。URL を入力してから起きること（DNS → TCP → TLS → HTTP）を整理し、リクエストとレスポンスの生テキストの骨格とステートレスの意味をつかみます。
2 HTTP メソッド — 安全・冪等という約束
6 問。GET・POST・PUT・DELETE・HEAD の使い分けと、安全・冪等という 2 つの約束を線引きし、「リトライしてよい更新か」を判断できるようにします。
3 HTTP ステータスコード — 3 桁で結果を読む
6 問。百の位で 5 つに分類し、301 と 302 と 308、401 と 403 と 404、500 と 502 と 503 を根拠を持って切り分けます。
4 HTTP ヘッダとコンテンツ — 何を・どんな形式で
6 問。Host・Content-Type・Content-Length・Accept・Cookie を「往復書簡の添え書き」として読み、文字化けとセッションの仕組みまで追います。
5 HTTP キャッシュ — 同じものを二度運ばない
6 問。max-age を手計算して fresh と stale を判定し、ETag と条件付き GET、304 の意味をシミュレータで確かめます。
6 観察 — curl と開発者ツールで HTTP の実物を読む
6 問。curl -v の > と <、-I と -L、開発者ツールの Network タブの読み方を、典型的な観察手順として身につけます。
7 総合演習 — HTTP の会話をケースで読み解く
8 問。リダイレクトループ・フォーム再送信・キャッシュ・文字化けなど、実務風のケースで全章の知識を横断して使います。
受講のコツ
- 本文 → すぐ下の小問の順で進めてください。まとめて後で解くより、読んだ直後に解くほうが定着します。
- 第 5 章の計算問題は暗算で済ませず、受信時刻・経過秒数・max-age を紙に書き出してください。「fresh の残りが何秒か」が手の感覚で分かります。
- 第 5 章のシミュレータは、小問を解く前後に両方触ってください。304 と転送量の関係が体感に変わります。
- 受講後は、実際のブラウザで開発者ツールの Network タブを開き、普段見ているサイトで3 点セット読みを試してください。教材と同じ骨格が現れます。
- 第 7 章のケース問題でつまずいたら、対応する章へ戻って 1〜2 周だけ復習してください。全部やり直す必要はありません。
開始前の前提
- Web サイトやアプリを作り始めた、あるいはこれから作る、という段階で十分です。サーバ運用の経験は不要です。
- URL（
https://example.com/pathのような形）を見たことがあれば、第 1 章から読み始められます。 - 第 6 章のコマンド例はコピーして試せる形で示しますが、手元で実行しなくても紙上で読み切れる構成です。