Web とは何か

Web はリクエストとレスポンスの往復で成り立っています。この章では自分の PC から curl でローカルの API を叩き、HTTP の 4 要素（status / header / body / timing）を生で見ていきます。

Web とは（概念）

日常では「インターネットで検索した」と「Web で調べた」がほぼ同じ意味で使われますが、技術的には別レイヤーの概念です。

Web は次の 3 つの技術仕様で成立しています。

1. URL：リソースの所在を示す文字列（https://example.com/users/42）
2. HTTP：クライアントとサーバーのやり取りの規約
3. HTML / JSON：ブラウザや API が解釈するデータ形式

通信は必ず クライアントが要求し、サーバーが応答する 一方向です。ブラウザだけがクライアントではありません。curl コマンドも立派な Web クライアントです。本章ではその curl を使って「リクエスト・レスポンス」を手で観測します。

HTTP レスポンスには 4 つの要素があり、それぞれを curl のオプションで取り出せます。

作るもの

• ローカルで動く lab-api コンテナ（http://localhost:8787）に curl で 5 種類のリクエストを送る
• レスポンスの status / header / body / timing を 1 つずつ分離して観測する
• 同じことを公開サイト（https://example.com）に対しても行い、ローカルと公開サーバーの違いを比較する

準備

exercises/ に用意済みの lab-api プロファイルを起動します。

cd exercises
docker compose --profile lab-api up -d --build

起動を確認します。healthy が出れば準備完了です。

docker compose ps
curl -s http://localhost:8787/ok

{"ok":true} のような JSON が返ってくれば成功です。

手順

1. レスポンス全体を見る（-i）

-i はヘッダーとボディをまとめて表示します。

curl -i http://localhost:8787/ok

先頭に HTTP/1.1 200 OK、続いて Content-Type: application/json などのヘッダー行、空行のあとに JSON ボディが見えるはずです。この 3 ブロック構造（ステータス行 / ヘッダー / ボディ）が HTTP メッセージの基本 です。

2. status だけ取り出す

運用スクリプトでよく使う書き方です。

curl -s -o /dev/null -w '%{http_code}\n' http://localhost:8787/ok

200 と 1 行だけ表示されます。-s はプログレスを黙らせ、-o /dev/null はボディを捨て、-w で指定した変数だけを出します。試しに存在しないパスも叩いてみます。

curl -s -o /dev/null -w '%{http_code}\n' http://localhost:8787/notfound
curl -s -o /dev/null -w '%{http_code}\n' http://localhost:8787/error

それぞれ 404 と 500 が返ります。status は必ず 3 桁の数字 で、2xx は成功、4xx はクライアントが悪い、5xx はサーバーが悪いと覚えてください。

3. header だけ取り出す（-I）

curl -I http://localhost:8787/ok

-I は HEAD メソッドを使い、ヘッダーだけ取得します。Content-Type や Content-Length など、サーバーが付けたメタ情報が並びます。ブラウザはこのヘッダーを見て「これは JSON だから JS で扱おう」「HTML だから描画しよう」と判断します。

4. body を整形して見る

curl -s http://localhost:8787/ok | jq

jq は JSON を色付きで整形するツールです（brew install jq / apt install jq）。jq が無ければ curl -s ... だけでも中身は見えます。/posts を叩くと配列が返ってきます。

curl -s http://localhost:8787/posts | jq '.[0]'

body は「API が返すデータそのもの」で、status とは別物であることを意識してください。

5. timing を測る

%{time_total} はリクエストからレスポンス受信完了までの合計時間（秒）です。

curl -s -o /dev/null -w '%{time_total}s\n' http://localhost:8787/ok
curl -s -o /dev/null -w '%{time_total}s\n' 'http://localhost:8787/slow?ms=2000'

/slow?ms=2000 はサーバー側で 2 秒寝るエンドポイントです。2 秒強の値が返ってきます。遅い API を特定するときの基本テクです。

6. 公開サイトに対して同じことをする

ローカルと公開サーバーで同じ 4 要素が観測できることを確認します。

curl -s -o /dev/null -w '%{http_code} %{time_total}s\n' https://example.com
curl -I https://example.com

example.com は Content-Type: text/html を返し、ローカルの JSON とは違うことが分かります。サーバーが何を返すかはヘッダーで宣言されている と覚えてください。

手を動かす

やること

1. docker compose --profile lab-api up -d --build で lab-api を起動する
2. 上記 1〜5 の curl を順に実行し、4 要素（status / header / body / timing）を自分の目で見る
3. /notfound（404）と /error（500）も叩いて、status が変わることを確認する
4. https://example.com に対しても -I と -w '%{http_code}' を実行し、ローカル API とヘッダー構造を比べる

成功条件

bash exercises/scripts/verify-b00-1.sh

• curl -s -o /dev/null -w '%{http_code}\n' http://localhost:8787/ok が 200 を返す
• curl -I http://localhost:8787/ok の出力に Content-Type: application/json が含まれる
• curl -s http://localhost:8787/ok が "ok":true を含む JSON を返す
• verify-b00-1.sh が All b00-1 checks passed で終了する

片付け

docker compose down

確認クイズ

この章で手を動かすときの確認

この章は 導入編 の STEP 2にある 「手を動かす」 の章です。本文を読み終えたあと、次の観点だけ確認すると次へ進みやすくなります。

この章で確認すること:

• Web と Internet の違いを説明できる
• クライアント・サーバーモデルの基礎を理解する
• curl で status / header / body / timing を個別に観測できる

次に活きる章:

• URL を打ってから画面が表示されるまで
• ネットワーク基礎（TCP/IP・DNS・HTTPS）

補助参照:

• カリキュラム全体の完成条件（checklist.yml）
• 参照実装の README