ウェブの仕組み

ウェブの仕組みを理解することで、「なぜページが表示されないのか」「なぜHTTPSが必要なのか」「404エラーは何を意味するのか」といった疑問に自分で答えられるようになります。フロントエンド・バックエンドを問わず、すべてのウェブエンジニアに必要な基礎知識です。

対象読者: インターネットの基礎（IPアドレス・パケット通信）を理解している方

学習時間の目安: 読了 15分 + 実践 10分

前提知識: インターネットとは何かを読んでいること

WWW（World Wide Web）とは何か

WWW（World Wide Web、ウェブ）とは、インターネット上でハイパーテキスト文書（HTML）を公開・閲覧するための情報システムです。1989年にティム・バーナーズ＝リーが考案し、1991年に一般公開されました。

インターネットが「道路網」だとすれば、ウェブは「その道路を走る宅配サービス」にあたります。インターネットという基盤の上で動く数あるサービスの一つです。

ウェブを構成する主要な技術は3つです。

技術	役割
HTML（HyperText Markup Language）	ページの構造・内容を定義するマークアップ言語
HTTP（HyperText Transfer Protocol）	ブラウザとサーバーがデータをやりとりするプロトコル
URL（Uniform Resource Locator）	ウェブ上のリソースの場所を示すアドレス

URLの構造

URLはウェブ上のリソース（ページ・画像・ファイルなど）の場所を示す住所です。

https://www.example.com:443/docs/guide?lang=ja&page=1#section2
│       │               │   │          │              │
│       │               │   │          │              └── フラグメント（ページ内アンカー）
│       │               │   │          └────────────────── クエリパラメータ
│       │               │   └───────────────────────────── パス（リソースの場所）
│       │               └───────────────────────────────── ポート番号（省略可能）
│       └───────────────────────────────────────────────── ドメイン名
└───────────────────────────────────────────────────────── スキーム（プロトコル）

各パーツの役割を整理します。

パーツ	例	役割
スキーム	`https`	使用するプロトコル。`http` または `https`
ドメイン	`www.example.com`	サーバーの名前（内部でIPアドレスに変換される）
ポート	`443`	サーバーの接続口の番号。HTTPSは443、HTTPは80が既定値
パス	`/docs/guide`	サーバー内のリソースの場所
クエリパラメータ	`?lang=ja&page=1`	追加情報。`?`から始まり`&`で区切る
フラグメント	`#section2`	ページ内の特定の位置（サーバーには送信されない）

HTTPとHTTPSとは

HTTP（HyperText Transfer Protocol）は、ブラウザとウェブサーバーがデータをやりとりするプロトコルです。「リクエスト（要求）を送ると、レスポンス（応答）が返ってくる」というシンプルな仕組みで動いています。

HTTPS（HTTP Secure）はHTTPに暗号化（TLS/SSL）を加えたものです。通信内容が暗号化されるため、第三者が通信を盗み見ても内容が分かりません。

	HTTP	HTTPS
暗号化	なし	TLS/SSLで暗号化
ポート	80	443
URLの始まり	`http://`	`https://`
使用場面	ローカル開発など	本番環境（必須）

現在、ブラウザはHTTPのページに「保護されていない通信」と警告を表示します。ウェブサービスを公開する場合、HTTPSの使用が事実上必須となっています。

HTTPメソッド入門

HTTPのリクエストには「何をしたいか」を示す メソッド があります。代表的なものを紹介します。

メソッド	用途	例
GET	データの取得	ページを閲覧する、検索する
POST	データの送信・作成	フォームを送信する、新規投稿する
PUT	データの更新（全体）	プロフィールを更新する
PATCH	データの更新（一部）	メールアドレスだけ変更する
DELETE	データの削除	投稿を削除する

GETとPOSTの直感的な違い

GET: 「見せてください」。URLにパラメータが含まれ、ブックマークや共有ができる。副作用（データの変更）がない。
POST: 「送ります」。フォームデータ・パスワードなどをリクエストの本文（Body）に入れて送る。URLには表れない。

GET  /users?name=taro     # 「taro」というユーザーを検索する
POST /users               # 新しいユーザーを作成する（本文に名前・メールなどのデータ）

ステータスコード入門

HTTPレスポンスには、処理の結果を示す3桁の数字 ステータスコード が含まれます。

分類	範囲	意味
成功	200番台	リクエストが正常に処理された
リダイレクト	300番台	別のURLへ移動が必要
クライアントエラー	400番台	リクエスト側の問題
サーバーエラー	500番台	サーバー側の問題

よく見かける代表的なコードを覚えておくと便利です。

コード	名前	意味
200	OK	成功。通常のページ表示
301	Moved Permanently	URLが恒久的に変更された
302	Found	URLが一時的にリダイレクト
400	Bad Request	リクエストの形式が不正
401	Unauthorized	認証が必要
403	Forbidden	アクセス権限がない
404	Not Found	リソースが見つからない
500	Internal Server Error	サーバー内部エラー

ブラウザがページを表示するまでの流れ

URLを入力してEnterを押すと、以下の処理が順番に実行されます。

1. DNS解決
   ブラウザが「www.example.com」のIPアドレスをDNSサーバーに問い合わせる
   → 「203.0.113.1」というIPアドレスを取得
         ↓
2. TCP接続の確立
   ブラウザがIPアドレス(203.0.113.1)のポート443にTCP接続を要求
   ※ HTTPSの場合はTLSハンドシェイク（暗号化の準備）も実行
         ↓
3. HTTPリクエストの送信
   ブラウザが「GET / HTTP/1.1」などのリクエストをサーバーへ送信
         ↓
4. サーバーによる処理
   サーバーがリクエストを受け取り、HTMLファイルやデータを準備
         ↓
5. HTTPレスポンスの受信
   サーバーが「200 OK」とともにHTMLデータをブラウザへ返す
         ↓
6. HTMLの解析（パース）
   ブラウザがHTMLを読み込み、DOM（Document Object Model）ツリーを構築
         ↓
7. 追加リソースの読み込み
   HTML内で参照されているCSS・JavaScript・画像などを追加で取得
         ↓
8. レンダリング（描画）
   DOM・CSSを組み合わせてページを画面に表示

この一連の流れは、高速なウェブサイトでは1秒以内に完了します。

まとめ

WWW はインターネット上で動くHTML文書の情報システム
URL はスキーム・ドメイン・パス・クエリなどのパーツで構成される
HTTP はリクエスト/レスポンスモデルで動作し、HTTPS は通信を暗号化する
HTTPメソッド（GET・POST など）はリクエストの目的を示す
ステータスコード（200・404・500 など）はレスポンスの結果を示す

よくある質問

Q: http:// と https:// はどちらを使うべきですか？

A: 本番環境では常にHTTPSを使います。HTTPは通信内容が暗号化されないため、パスワードやクレジットカード番号などが第三者に盗み見られる可能性があります。現代のホスティングサービス（Vercel・Netlify など）はHTTPSを自動的に設定します。

Q: 404エラーが表示されたとき、何を確認すればよいですか？

A: まずURLのスペルミスを確認します。次にページが削除・移動されていないかを確認します。開発中であればサーバーが起動しているか、ファイルのパスが正しいかを確認します。

Q: ステータスコードは暗記する必要がありますか？

A: 100・200番台のすべてを暗記する必要はありません。200（成功）・301/302（リダイレクト）・400・401・403・404（クライアントエラー）・500（サーバーエラー）の7つを覚えておけば、実務での大半の場面に対応できます。

参考資料

このページへのリンク（英語）: How the Web Works