HTTP通信ってなに？｜ブラウザとサーバーの会話をゆるっと理解する入門編

「GET？POST？なんか聞いたことあるけど、よくわからん…」 「Webサイトって、裏でどうやってやりとりしてるの？」

Web開発を学び始めると、よく出てくるのが“HTTP通信”。 名前は知ってるけど、ちゃんと説明しようとするとモゴモゴ…ってなりがち。

この記事では、HTTP通信とは何か？ を、 できるだけゆる〜く、でもちゃんと押さえるべきポイントはおさえつつ解説していきます。

---

HTTP通信ってなんなの？

まずHTTPとは、HyperText Transfer Protocolの略。 かんたんに言えば「ブラウザとサーバーの会話ルール」です。

💬 ブラウザ「ねぇこのページちょうだい！」 💻 サーバー「OK、これが中身ね〜」

この“お願いと返事”をするのがHTTP通信。私たちが何気なくWebページを開いたり、ボタンを押したりするたびに、裏でこの会話が繰り返されてるんです。

---

リクエストとレスポンスって？

HTTP通信は、2つの柱でできてます：

用語	意味
リクエスト	ブラウザ → サーバーへのお願い
レスポンス	サーバー → ブラウザへの返事

例：
ユーザーが「https://news.com/article.html」にアクセス →
  → リクエスト：このニュース記事の内容を見せて！
  → レスポンス：はい、これがその記事です。

このやりとり、実は毎回発生してるんです。

---

GETとPOSTの違いって？

超よく出てくるのがこの2つ：

メソッド名	用途	特徴
GET	データを取得する	URLに情報が含まれる（例：?search=cat）
POST	データを送信する	情報は見えないように本文（body）に含まれる

たとえば：

// GETリクエスト例（検索など）
fetch("https://api.example.com/search?word=neko");

// POSTリクエスト例（フォーム送信など）
fetch("https://api.example.com/post", {
  method: "POST",
  body: JSON.stringify({ name: "tama" })
});

---

ステータスコードってなに？

リクエストを送ったあと、サーバーは「うまくいったよ〜」とか「ちょっとエラーだよ〜」みたいなメッセージを返してきます。 それがステータスコード。

コード	意味
200	成功！（OK）
404	ページがないよ…
500	サーバーでエラー！

数字だけだとちょっと冷たいけど、意味を知ると「なるほど」ってなるやつ。

出典：MDN Web Docs – HTTPステータスコード

---

まとめ：HTTP通信はWebの“会話”そのもの

• HTTP通信＝ブラウザとサーバーの会話ルール
• ブラウザはリクエストを送り、サーバーはレスポンスで返す
• GET/POSTで情報の取り扱いが変わる
• ステータスコードで“会話の成否”がわかる

こういう仕組みをちょっと知っておくだけで、 「なぜボタン押したら画面変わるの？」みたいな疑問もスッキリ解決できるようになりますよ🐾

---