ch01 6章中 1章目

ch01 — Web とは / HTTP / リクエストとレスポンス

スライドで見る

この章を AI と学ぶ

💬 AI に聞く質問例 3 件
  1. 「ch01 — Web とは / HTTP / リクエストとレスポンス」のつまずきやすいポイントを、初学者向けに3つ教えてください

    ChatGPT Claude Gemini

  2. 「ch01 — Web とは / HTTP / リクエストとレスポンス」について、自分の手で試せる練習問題を3つ出してください (難易度を上げながら)

    ChatGPT Claude Gemini

  3. 「ch01 — Web とは / HTTP / リクエストとレスポンス」を学んだ後、次に学ぶと良いトピックは何ですか?理由も教えてください

    ChatGPT Claude Gemini

概要

Web の正体は、ブラウザとサーバーの間で 「リクエスト」と「レスポンス」 を 1 往復するだけのとてもシンプルな通信だ。アドレスバーに URL を入れて Enter を押した瞬間、ブラウザは「このページください」というリクエストをサーバーに送り、サーバーは HTML を「はい、これがレスポンスです」と返す。それを画面に並べているのがブラウザ。この 1 往復の繰り返し が Web のすべての土台になっている。

リクエストとレスポンスには HTTP ステータスコード という「結果の合言葉」が必ず付いてくる。200 は成功、404 は「そんなページないよ」、500 は「サーバーで何か壊れた」。開発者ツールの Network タブを開けばこのコードが全リクエストに表示されているので、エラーが出たときはまずここを見るクセを付けたい。

そして HTTP のリクエストには GET と POST という代表的な 2 種類のメソッドがある。GET は URL の ?key=value に値が乗る「取得系」、POST は本文 (Body) に値が乗る「送信系」。検索フォームは GET、ログインフォームは POST、というように使い分ける。この章では絵で全体像を掴み、次の ch02 から実際に PHP でサーバー側を書く。

学習目標

  • ブラウザと Web サーバーが 「リクエスト」「レスポンス」 をやり取りしていることを絵で説明できる
  • HTTP の ステータスコード (200 / 404 / 500 など) が「結果の合言葉」だと言える
  • GET と POST の違い (URL に値が乗るか / 本文に乗るか) を 1 行で言える

ドリル

このチャプターにドリルはありません。 スライドを読み終わったら次の ch02-builtin-server/ に進んでください。

理由: ここでは Web 通信の 概念の絵 を頭に作るのが目的。手を動かすのは ch02 から (php -S localhost:8000 で実際に Web サーバーを立てるところ) で行います。

ブラウザで体感してみる (任意)

PC のブラウザで何でも良いので URL を開いてみてください。例: https://example.com

  • アドレスバーに URL を入れて Enter = リクエスト を送信
  • 画面に表示された HTML = レスポンス の中身
  • 開発者ツール (Chrome なら F12) の Network タブ を開くと、リクエスト / レスポンスの中身 (ヘッダ・ステータスコード) が全部見える

「Web で何かが起きる」というのは、つまり このリクエスト / レスポンスの往復が起きている ということ。次のチャプター以降では、その「レスポンスを返す側」を自分の PHP で書く。

解説スライド 全 7 枚

右の ボタン キー(またはスワイプ)で次のスライドに進めます。 下の「縦表示」を開くと全スライドを一気に読めます。

  1. Web とは / HTTP / リクエストとレスポンス

    Lesson 12 / Chapter 1

  2. Web は「往復」で成り立っている

    [ブラウザ]  ── リクエスト ──>  [Web サーバー (PHP)]
    [ブラウザ]  <── レスポンス ──  [Web サーバー (PHP)]
    • ブラウザは 「これくれ」というリクエスト を送る
    • サーバーは 「はいどうぞ」というレスポンス を返す
    • これを HTTP というルールで会話する

    → Web アプリを作る = 「レスポンスを返す側」を自分の PHP で書く ということ。

  3. リクエストの中身

    ブラウザが送るリクエストには、ざっくり以下が入っている。

    GET /hello?name=taro HTTP/1.1
    Host: localhost:8000
    User-Agent: Chrome/...
    部分 役割
    GET メソッド (どんな種類の要求か。GET / POST など)
    /hello?name=taro URI (どのパスを / クエリ付きで)
    HTTP/1.1 プロトコルのバージョン
    Host: ... どのサーバーに繋ぐか

    PHP からは $_SERVER['REQUEST_METHOD'] / $_SERVER['REQUEST_URI'] で読める。

  4. レスポンスの中身

    サーバーが返すレスポンスはこんな形。

    HTTP/1.1 200 OK
    Content-Type: text/html
    
    <h1>Hello, Web!</h1>
    部分 役割
    200 OK ステータスコード (うまく行ったか)
    Content-Type 中身が HTML か JSON か画像か
    空行の後 本文 (ブラウザに見せる中身)

    PHP で echo "Hello" と書くだけで、この「本文」に自動で入る

  5. ステータスコード = 結果の合言葉

    コード 意味
    200 OK (成功) 普通のページ表示
    301 / 302 リダイレクト 別 URL に飛ばす
    404 Not Found 存在しないページ
    500 Server Error PHP がエラーで落ちた
    • 4xx = クライアント側 (送り方が) のせい
    • 5xx = サーバー側 (こっちのコードが) のせい

    PHP は何もしなければ 200 を返す。エラーが出れば自動で 500。

  6. GET と POST の違い

    GET POST
    値の置き場所 URL の ?key=value リクエストの本文 (body)
    ブラウザの履歴 残る 残らない
    ブックマーク できる できない
    用途 取得 (検索・閲覧) 送信 (登録・投稿)
    PHP からの読み方 $_GET['key'] $_POST['key']

    → 「読み出しは GET、書き込み (副作用) は POST」が原則。

  7. このチャプターでできるようになること

    ✅ Web は「リクエスト / レスポンス」の往復で成り立つと絵で言える ✅ メソッド (GET / POST) / URI / ステータスコードの 3 つを区別できる ✅ 200 / 404 / 500 の意味を言える ✅ GET と POST の使い分けを 1 行で言える

    関連: ch02 で PHP の組み込みサーバーで実際にリクエストを受けてみる

1 / 7
📜 スライドを全部一気に読む(縦表示)

Lesson 12 / Chapter 1


Web は「往復」で成り立っている

[ブラウザ]  ── リクエスト ──>  [Web サーバー (PHP)]
[ブラウザ]  <── レスポンス ──  [Web サーバー (PHP)]
  • ブラウザは 「これくれ」というリクエスト を送る
  • サーバーは 「はいどうぞ」というレスポンス を返す
  • これを HTTP というルールで会話する

→ Web アプリを作る = 「レスポンスを返す側」を自分の PHP で書く ということ。


リクエストの中身

ブラウザが送るリクエストには、ざっくり以下が入っている。

GET /hello?name=taro HTTP/1.1
Host: localhost:8000
User-Agent: Chrome/...
部分 役割
GET メソッド (どんな種類の要求か。GET / POST など)
/hello?name=taro URI (どのパスを / クエリ付きで)
HTTP/1.1 プロトコルのバージョン
Host: ... どのサーバーに繋ぐか

PHP からは $_SERVER['REQUEST_METHOD'] / $_SERVER['REQUEST_URI'] で読める。


レスポンスの中身

サーバーが返すレスポンスはこんな形。

HTTP/1.1 200 OK
Content-Type: text/html

<h1>Hello, Web!</h1>
部分 役割
200 OK ステータスコード (うまく行ったか)
Content-Type 中身が HTML か JSON か画像か
空行の後 本文 (ブラウザに見せる中身)

PHP で echo "Hello" と書くだけで、この「本文」に自動で入る


ステータスコード = 結果の合言葉

コード 意味
200 OK (成功) 普通のページ表示
301 / 302 リダイレクト 別 URL に飛ばす
404 Not Found 存在しないページ
500 Server Error PHP がエラーで落ちた
  • 4xx = クライアント側 (送り方が) のせい
  • 5xx = サーバー側 (こっちのコードが) のせい

PHP は何もしなければ 200 を返す。エラーが出れば自動で 500。


GET と POST の違い

GET POST
値の置き場所 URL の ?key=value リクエストの本文 (body)
ブラウザの履歴 残る 残らない
ブックマーク できる できない
用途 取得 (検索・閲覧) 送信 (登録・投稿)
PHP からの読み方 $_GET['key'] $_POST['key']

→ 「読み出しは GET、書き込み (副作用) は POST」が原則。


このチャプターでできるようになること

✅ Web は「リクエスト / レスポンス」の往復で成り立つと絵で言える ✅ メソッド (GET / POST) / URI / ステータスコードの 3 つを区別できる ✅ 200 / 404 / 500 の意味を言える ✅ GET と POST の使い分けを 1 行で言える

関連: ch02 で PHP の組み込みサーバーで実際にリクエストを受けてみる

完了にすると進捗に反映されます