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通信の流れ(整理)
通信の流れを簡単にまとめると、次のようになります。
ブラウザがリクエストを送る
サーバーがリクエストを受け取る
サーバーが処理を行う
サーバーがレスポンスを返す
ブラウザが表示する
この流れは、
静的サイトでも動的サイトでも共通です。
HTTPメソッドとは何か
リクエストには、
どんな目的の通信かを表す「HTTPメソッド」が含まれます。
代表的なのが
GET と POST です。
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サイトが表示される仕組みを図解で理解する




コメント