HTTPの基礎：ブラウザとサーバーはどう話しているのか

  • #HTTP
  • #初心者向け
  • #Web基礎
  • #ネットワーク
  • #インフラ入門

HTTPの基礎：ブラウザとサーバーはどう話しているのか

導入

  • Webサイトを開くとき、ブラウザとサーバーの間では「HTTP」という共通言語で会話が行われる。
  • 仕組みを知らなくてもサイトは表示できるが、制作や運用を始めるなら理解は必須である。
  • HTTPの最小限の概念を実機で確認し、ステータスコードやヘッダー、HTTPSの意味までを初心者向けに把握できるようになる。
  • 読み終えると通信の正体が見えるようになり、トラブル対応やパフォーマンス改善の土台を作れる。

前提条件

  • PC とモダンブラウザ（Chrome/Edge/Firefox のいずれか）。
  • コマンドラインが使える環境（Windows: PowerShell、macOS/Linux: ターミナル）。
  • 追加ツール（任意）：curl（macOS/Linux は標準搭載。Windows は PowerShell 7 以降で利用可能）。

ステップ1

HTTPリクエスト/レスポンスを観察する（ブラウザ編）

  1. 任意のサイトを開く（例：https://example.com/）。
  2. 開発者ツールを開く（Chrome: F12 または Ctrl+Shift+I / Cmd+Option+I）。
  3. Network（ネットワーク）タブを選択し、ページを再読み込みする。
  4. example.com の行をクリックし、以下を確認する。
    • Request URL/Method：どの URL にどのメソッド（GET/POST など）で要求したか。
    • Status Code：サーバーから返った結果（200、301、404 など）。
    • Response Headers：Content-Type、Cache-Control などの付帯情報。
    • Request Headers：User-Agent、Accept、Accept-Encoding など。

ポイント

  • 200 OK は成功、301/302 はリダイレクト、404 は未検出、500 はサーバーエラーを示す。
  • Content-Type: text/html; charset=utf-8 は本文の形式であり、ブラウザはこれを見て中身を解釈する。

ステップ2

コマンドでHTTPを叩いてみる（curl編）

  1. ターミナルを開き、以下を実行してヘッダーを表示する。 
    curl -I https://example.com/
    • HTTP/2 200、content-type、cache-control、server などが返ることを確認する。
  2. 本文も取得してみる。 
    curl https://example.com/
    • 返ってきた HTML の冒頭（<!doctype html> など）を確認する。
  3. リダイレクトを追従する例。 
    curl -I -L http://example.com/
    • -L を付けると 301/302 を自動で追いかける。

ポイント

  • GET は取得、POST はデータ送信であり、API では PUT/PATCH/DELETE もよく利用される。
  • ヘッダーは「手紙の封筒」、本文は「手紙の中身」のイメージで捉えると理解しやすい。

ステップ3

HTTPS とセキュリティの基礎を掴む

  1. アドレス欄の鍵アイコンをクリックし、証明書情報を確認する。
    • 発行者（CA）、有効期限、対象ドメイン（CN/SAN）をざっくりと確認する。
  2. curl で TLS ハンドシェイクの概要を確認する（詳細表示は参考程度）。 
    curl -I https://example.com/ -v
    • * SSL connection using TLS... のような行が出れば暗号化通信が行われている。

なぜ HTTPS が必要か

  • 暗号化：第三者に内容を盗み見られにくくする。
  • 完全性：途中改ざんが検出される。
  • 真正性：サイトの正当性を証明し、なりすましを防ぐ。

ベストプラクティス

  • ステータスコードは意味を正しく使い分ける（成功=200台、リダイレクト=300台、クライアントエラー=400台、サーバーエラー=500台）。
  • Content-Type と文字エンコーディングを明確にする（例：text/html; charset=utf-8）。
  • キャッシュ制御を設計する（Cache-Control、ETag、Last-Modified）。
  • HTTPS を標準にし、Strict-Transport-Security（HSTS）の設定を実運用で検討する。
  • API では GET に副作用を持たせず、POST/PUT/PATCH を正しく使う。
  • 本番前に開発者ツールと curl で挙動を確認し、リダイレクトループや 404 を解消する。

よくある質問

Q. まず覚えるべきステータスコードは？ A. 200（成功）、301/302（リダイレクト）、404（見つからない）、500（サーバーエラー）を最優先で押さえる。

Q. HTTP/1.1 と HTTP/2/3 の違いは？ A. 大雑把に言うと並行性と効率の違い。HTTP/2 は 1 つの接続で多重化し、HTTP/3 はさらに遅延に強い（QUIC/UDP）。

Q. 開発中にどこを見れば原因が分かる？ A. ブラウザの Network タブでステータス・ヘッダー・本文をチェックし、サーバーログ（アクセス/エラー）も併読する。

Q. 常に HTTPS が必要？ A. 近年は原則必須。フォームやクッキーを扱うサイトは特に重要であり、SEO やブラウザ警告の観点からも推奨される。

まとめ

  • HTTP は「ブラウザ⇔サーバー」の会話の仕組みである。
  • 開発者ツールと curl を使い、リクエスト/レスポンス、ステータス、ヘッダー、HTTPS を体験的に理解しよう。
  • 次のアクション：手元のポートフォリオサイトで Network タブを開き、キャッシュ制御とステータスコードが適切かを確認する。