ウェブの仕組みを理解することで、「なぜページが表示されないのか」「なぜHTTPSが必要なのか」「404エラーは何を意味するのか」といった疑問に自分で答えられるようになります。フロントエンド・バックエンドを問わず、すべてのウェブエンジニアに必要な基礎知識です。
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つを覚えておけば、実務での大半の場面に対応できます。
関連リンク
このページの外部仕様・背景情報は、参考文献を参照してください。[1]
参考文献
- MDN Web Docs, Learn web development