はじめに
Webアプリを作る上で絶対に避けて通れないのが 「HTTP」 です。
しかし、「なんとなく知ってはいるけど、説明が難しい…」という人も多いはず。
この記事では、
HTTPとは何か？リクエストとレスポンスはどう流れているのか？
を図を使いながら、できるだけわかりやすく解説します。
HTTPとは？
HTTP（HyperText Transfer Protocol）は、
クライアント（ブラウザ）とサーバがデータをやり取りする仕組み（プロトコル） です。
Webの世界はすべて
「お願い（リクエスト）」 → 「返事（レスポンス）」
で動いています。
例：
・ブラウザ「/users にアクセスしたいです！」
・サーバ「OK！データ返します！」
これが HTTP の基本構造です。
HTTPの登場人物
HTTPには大きく2つの役割があります。
| 主体 | 役割 |
|---|---|
| クライアント（ブラウザ / アプリ） | サーバにリクエストを送る側 |
| サーバ（Webサーバ / APIサーバ） | リクエストに応じてレスポンスを返す側 |
リクエストとレスポンスの流れ（図解）
Webページが表示されるまでの流れをシンプルに絵にすると、こうなります。
[ブラウザ] -- リクエスト --> [サーバ]
<---- レスポンス ------
少し具体的にすると…
【ブラウザ】
|
| GET /articles を送信
v
【サーバ】
|
| 200 OK + JSON を返す
v
【ブラウザ】
→ 画面に表示
すべての Web アプリはこの流れで動いています。
HTTPリクエストの構造
HTTPリクエストは、大きく3つのパートで構成されます。
1. リクエストライン
2. ヘッダー
3. ボディ（任意）
① リクエストライン
例：
GET /users HTTP/1.1
・GET ：何をしたいか（HTTPメソッド）
・/users ：どのリソースにアクセスしたいか
・HTTP/1.1 ：プロトコルのバージョン
② ヘッダー
追加情報が入ります。
例：
User-Agent: Chrome
Accept: application/json
③ ボディ（POST/PUT時など）
例：
{
"name": "Taro"
}
HTTPレスポンスの構造
レスポンスは 以下3つ のパートで構成されます。
1. ステータスライン
2. ヘッダー
3. ボディ
① ステータスライン
HTTP/1.1 200 OK
200 が成功、404 なら Not Found など。
② ヘッダー
例：
Content-Type: application/json
③ ボディ
実際に返すデータです。
例：
{
"id": 1,
"name": "Taro"
}
実際のリクエスト/レスポンスを見てみる
ChromeのDevTools（F12 → Networkタブ）を開くと、
ブラウザがどんなリクエストを送っているか確認できます。
たとえば Google にアクセスすると…
・リクエストURL
・メソッド
・ステータス
・レスポンスの内容
などが全部見れるので、まずは自分で触るのがおすすめです。
HTTPを理解すると何が嬉しいのか？
・APIとの通信が理解できる
・バグ調査が圧倒的に楽になる
・フロントとバックエンドの連携が分かりやすくなる
・認証（ログイン機能）が理解しやすくなる
これらの基礎は、今後 Laravel + React でアプリを作るときに確実に活きます。
まとめ
今日の内容をサクッと整理すると：
・HTTPは「データのやり取りをする仕組み」
・クライアント → リクエスト
・サーバ → レスポンス
・構造を知るとアプリ開発が理解しやすくなる
まずはここを押さえれば OK です！
次回（Day2）は、
「HTTPメソッド（GET/POST/PUT/DELETE）」を動かして理解
を実際に手を動かしながら解説します。