1-2 HTTPとは何か|リクエストとレスポンスの基本

Web開発学習ロードマップ

Webサイトが表示されるまでの流れを理解した次のステップとして、
ブラウザとサーバーがどのようなルールで通信しているのかを知る必要があります。

その通信ルールが HTTP(エイチティーティーピー) です。

・HTTPとは何か
・リクエストとレスポンスとは何をしているのか
・GETとPOSTは何が違うのか

これらは、HTML・JavaScript・PHPを学ぶうえで必ず登場します。
この記事では、コードを書く前に知っておくべきHTTPの基本を、初心者向けに整理します。


この記事で学べること

・HTTPとは何か
・リクエストとレスポンスの役割
・GETとPOSTの違い
・Web開発でHTTPを意識する場面


HTTPとは何か

HTTPとは、
**ブラウザとサーバーが通信するためのルール(約束事)**です。

正式には
HyperText Transfer Protocol
と呼ばれています。

難しく考える必要はなく、
「Web上でデータをやり取りするときの決まり」
と理解しておけば十分です。


なぜHTTPが必要なのか

もしHTTPというルールがなければ、
ブラウザとサーバーは
「どんな形式で」「何を」「どう返すか」
を統一できません。

HTTPがあることで、
・どのURLに
・どんなデータを
・どんな方法で送るか
が明確に決まっています。


リクエストとレスポンスの関係

HTTP通信は、必ず
リクエスト → レスポンス
のセットで行われます。

リクエストとは

リクエストは、
ブラウザからサーバーへのお願いです。


「このページを表示してください」
「このデータを送ります」


レスポンスとは

レスポンスは、
サーバーからブラウザへの返事です。


「このHTMLを返します」
「処理結果は成功です」


HTTP通信の流れ(整理)

通信の流れを簡単にまとめると、次のようになります。

  1. ブラウザがリクエストを送る

  2. サーバーがリクエストを受け取る

  3. サーバーが処理を行う

  4. サーバーがレスポンスを返す

  5. ブラウザが表示する

この流れは、
静的サイトでも動的サイトでも共通です。


HTTPメソッドとは何か

リクエストには、
どんな目的の通信かを表す「HTTPメソッド」が含まれます。

代表的なのが
GETPOST です。


GETとは何か

GETは、
データを取得するためのリクエストです。

特徴
・URLに情報が含まれる
・ページ表示に使われる
・ブックマークできる


検索結果の表示
一覧ページの表示


POSTとは何か

POSTは、
データを送信するためのリクエストです。

特徴
・URLに情報が表示されない
・フォーム送信に使われる
・データ量が多くても送れる


お問い合わせフォーム
ログイン処理


GETとPOSTの違いまとめ

GET
・取得用
・URLにデータが見える
・表示・検索向き

POST
・送信用
・URLにデータが出ない
・登録・更新向き

この違いは、
後でPHPのフォーム処理を学ぶ際に非常に重要になります。


ステータスコードとは何か

レスポンスには、
**処理結果を表す番号(ステータスコード)**が含まれます。

よく見る例
・200:成功
・404:ページが見つからない
・500:サーバーエラー

エラーが出た時は、
この番号を見ることで
「どこで問題が起きているか」を推測できます。


開発者ツールでHTTPを確認してみよう

ブラウザの開発者ツールを使うと、
実際のHTTP通信を見ることができます。

Networkタブを開くと、
・どんなリクエストが送られたか
・どんなレスポンスが返ったか
が確認できます。

これは、
実務で非常によく使う重要な機能です。


HTTPを理解すると何ができるようになるか

HTTPを理解すると、次のような力が身につきます。

・フォーム送信の仕組みが分かる
・API通信の理解が早くなる
・エラー時の切り分けができる
・PHPやJavaScriptの役割が明確になる


よくある勘違い

初心者が混乱しやすいポイントです。

・GETは安全、POSTは安全ではない
→ 実際には使い方が重要

・POSTならセキュリティ対策は不要
→ CSRFやXSS対策は別途必要

HTTPはあくまで
通信のルールであり、
安全性を保証するものではありません。


まとめ

HTTPは、
ブラウザとサーバーが通信するための基本ルールです。

・通信はリクエストとレスポンスで行われる
・GETとPOSTで役割が違う
・ステータスコードで結果が分かる

この仕組みを理解しておくことで、
これから学ぶHTMLフォームやPHP処理が格段に理解しやすくなります。

次は、
静的サイトと動的サイトの違いについて見ていきましょう。


次に読むべき記事

▶ 次の記事:
1-3 静的サイトと動的サイトの違いを具体例で解説

▶ 関連記事:
1-1 Webサイトが表示される仕組みを図解で理解する

コメント