# ch01 — Web とは / HTTP / リクエストとレスポンス Source: https://php-school.pages.dev/topics/web/ch01-what-is-web/ Site: AIと学ぶPHPの学校 (https://php-school.pages.dev) Lesson: Web アプリ入門 Level: L4 Reference (official): https://www.php.net/manual/ja/reserved.variables.request.php ## 本文 # ch01 — Web とは / HTTP / リクエストとレスポンス ## 概要 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 行で言える ## 所要時間 スライドのみ = **5 分** ## ドリル **このチャプターにドリルはありません。** スライドを読み終わったら次の `ch02-builtin-server/` に進んでください。 理由: ここでは Web 通信の **概念の絵** を頭に作るのが目的。手を動かすのは ch02 から (`php -S localhost:8000` で実際に Web サーバーを立てるところ) で行います。 ## ブラウザで体感してみる (任意) PC のブラウザで何でも良いので URL を開いてみてください。例: `https://example.com` - アドレスバーに URL を入れて Enter = **リクエスト** を送信 - 画面に表示された HTML = **レスポンス** の中身 - 開発者ツール (Chrome なら F12) の **Network タブ** を開くと、リクエスト / レスポンスの中身 (ヘッダ・ステータスコード) が全部見える 「Web で何かが起きる」というのは、つまり **このリクエスト / レスポンスの往復が起きている** ということ。次のチャプター以降では、その「レスポンスを返す側」を自分の PHP で書く。 ## スライド --- marp: true theme: dojo paginate: true size: 16:9 --- # Web とは / HTTP / リクエストとレスポンス 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

Hello, Web!

``` | 部分 | 役割 | |---|---| | `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 の組み込みサーバーで実際にリクエストを受けてみる