はじめに
Webを学び始めると 「リクエスト（Request）」と「レスポンス（Response）」 という言葉をよく聞くと思います。
web開発をするうえで非常に大事な基礎知識ですが、
学び初めのころはすごく曖昧な理解やイメージがつかないポイントだと思います
この記事では、身近な例を使って 「リクエスト」と「レスポンス」 の仕組みをざっくりと解説していきます！
極力難しい説明は排除し身近な例を使って説明をするので気軽に読んでいただけたらと思います🙌
（厳格な説明や表現ではないので、あくまでイメージつかむために参考にしてください）
1. 「リクエスト」と「レスポンス」とは？
リクエスト（Request） は「要求（リクエスト）」のこと。
レスポンス（Response） は「返答（レスポンス）」のこと。
Webの世界では、基本的に クライアント（利用者側） がリクエストを送り、サーバー がレスポンスを返す仕組みになっています。
📌 例①：「レストランでの注文」
- お客さんが 「ハンバーグ定食ください！」（＝リクエスト）
- 店員さんがオーダーを受けて料理を作る（＝処理）
- 出来上がった「ハンバーグ定食」をお客さんに提供する（＝レスポンス）
この流れとWebにおけるリクエスト＆レスポンスの仕組みはほぼ同じです！
「注文する（リクエスト）」と「料理が返ってくる（レスポンス）」がセットになっています。
2. Webのリクエストとレスポンスの流れ
次に、実際のWebでどのようにリクエストとレスポンスがやり取りされるのか見てみましょう。
📌 例②：「Googleで検索する」
- ブラウザ（クライアント） で「猫 かわいい」と検索する（リクエスト）
- Googleのサーバー が「猫 かわいい」に関連するページを探す（処理）
- 検索結果のページ をブラウザに表示する（レスポンス）
💡 リクエスト = 検索すること
（ハンバーグの例でいう注文）
💡 レスポンス = 検索結果が表示されること
（ハンバーグの例でいう料理が出されること）
3. リクエストの仕組みをもう少し詳しく！
リクエストには、いろいろな情報が含まれています。
特に重要なのが「HTTPメソッド」と「ヘッダー」です。
✅ HTTPメソッドとは？
リクエストには、「何をしたいのか？」を指定する HTTPメソッド があります。
| メソッド | 説明 | 具体例 |
|---|---|---|
| GET | データを取得したい | 検索、Webページを開く |
| POST | 新しいデータを送信したい | フォーム送信、ログイン |
| PUT | 既存のデータを更新したい | プロフィール編集 |
| DELETE | データを削除したい | 投稿削除 |
📌 例③：「Amazonで商品を探すシーン」
- 「スマホケース」を検索する（GET）
- 商品をカートに入れる（POST）
- カートの数量を変更する（PUT）
- 間違えたのでカートから削除する（DELETE）
💡 GET, POST, PUT, DELETE の動作を意識すると、Webの仕組みがわかりやすくなります！
4. レスポンスの仕組みをもう少し詳しく！
サーバーが返すレスポンスには、「ステータスコード」と「データ本体」が含まれます。
✅ ステータスコードとは？
レスポンスには 「処理の結果」 を表す ステータスコード がついています。
| ステータスコード | 意味 | 具体例 |
|---|---|---|
| 200 OK | 正常に処理された | Webページが正しく表示された |
| 301 Moved Permanently | 別のURLに移動した | 旧URLから新URLへリダイレクト |
| 400 Bad Request | リクエストが間違っている | フォームの入力ミス |
| 401 Unauthorized | 認証が必要 | ログインが必要なページ |
| 403 Forbidden | アクセス権限なし | 管理者限定のページ |
| 404 Not Found | ページが見つからない | URLが間違っている |
| 500 Internal Server Error | サーバー側のエラー | Webサイトの不具合 |
📌 例④：「オンラインショッピングでエラーが出るケース」
- 商品ページが表示される（200 OK ✅）
- URLを間違えたら「404 Not Found ❌」
- サーバーが落ちていたら「500 Internal Server Error ❌」
💡 「あれ？サイトが見れない！」と思ったら、
ステータスコードをチェックすると原因がわかるかもしれません！
自分はこれ知ったとき少しワクワクしました...
5. 【スキップ可】実際にリクエストとレスポンスを見てみよう！
画像では実際に当記事を編集する際に
僕のPC↔どこかのサーバーで行われている通信を見ています。
Ctrl+shift+iキーで開発者ツールを開き、
ネットワークタブを開くと画像と同じ画面が開きます。
そこで適当なファイルを選択すると、そのファイルが、
どうやってリクエストされて
どのようにレスポンスされたか
の通信の詳細がわかります！
なんだかかっこいいので是非お試しください
6. まとめ
- リクエスト = クライアントからの要求（検索する、ログインするなど）
- レスポンス = サーバーからの返答（検索結果、ログイン成功など）
- リクエストのHTTPメソッドには GET / POST / PUT / DELETE などがある
- レスポンスにはステータスコード（200, 404, 500 など）が含まれる
Webは 「リクエスト（要求）」と「レスポンス（返答）」のやり取り で成り立っている！
基本中の基本なので、絶対に頭に入れておくようにしましょう。