〜URLとHTTPを「宅配便」に例えたら全部つながった〜
こんにちは！
35歳、未経験からWebエンジニアを目指して日々奮闘中の者です。
Webの勉強を始めると、必ず目にする「URL」と「HTTP」。
毎日使っているはずなのに、
「これってどういう仕組み？」と聞かれると少し困るあれです。
分かっているようで、うまく言葉にできないやつです。（僕はなりました）
この記事では、そんなモヤモヤを宅配便に例えて、分かりやすく解説します！
この記事はこんな人におすすめ
- プログラミング学習を始めたばかりで、基礎をちゃんと押さえたい方
- URLやHTTPを「なんとなく分かる」で止めている方
- 「それってどういう仕組み？」と聞かれると少し困る方
参考書籍：小森裕介『プロになるためのWeb技術入門』
結論から言うと、ズバリこれです！
URL ＝ 「インターネット上の住所」
HTTP ＝ 「配達のルール」
ブラウザ（ChromeやSafari）という「配達員」に、「この住所（URL）にルール（HTTP）通りに行って、荷物（Webページ）を取ってきて！」とお願いしているだけなんです。
これを念頭に置いて、詳しく見ていきましょう！
1. URLの基本構造（住所の書き方）
URLは単なるファイルだけでなく、画像や動画など様々なものを示すため、業界ではこれらをカッコよく「リソース（資源）」と呼びます。
URLは「情報の位置を統一的な形式で示すもの」です。
URLは大きく「スキーム・ホスト・パス」の3つに分かれています。
【URLの基本構造】
https://example.com/books/index.html
|____| |_________| |______________|
スキーム ホスト パス
🚚 スキーム（配送方法）
「どうやってアクセスするか」という配送方法の指定です。
Webでは主に http: や https: が使われます。
http：普通の宅急便（中身が透けて見える段ボール）
https：厳重なセキュリティ便（通信が暗号化されている）
現在では「可能な限りhttps:を使うこと」が推奨されています。
🏢 ホスト（マンション名・番地）
「接続先のコンピューター」を表します。example.com のようなドメイン名ですね。
ただ、コンピューターは「example.com」と言われても場所が分かりません。
ここで「DNS」という仕組み（インターネットのタウンページ）を使って、「IPアドレス」（コンピューターの住所を特定するための番号）に変換して相手を探します。
だから、ホスト部分に直接 192.168.1.2 のようなIPアドレスを書いても届きます。
📦 パス（部屋番号と荷物）
「相手のコンピューター内のどこに情報があるか」を表します。
/books/index.html なら、「booksっていう部屋（ディレクトリ）の中にある、index.htmlっていう荷物（ファイル）」という意味です。
2. URLの詳細構造（マニアックな宛先指定）
Web開発をしていると、URLをもっと細かく指定する場面が出てきます（RFC3986というルールに基づいています）。全部盛りするとこんな感じです。
【URLの全部盛り（詳細構造）】
https://user:pass@example.com:8080/books/index.html?sort=new#chapter1
|____| |________| |_________| |__| |______________||_______||_______|
スキーム ユーザー/パス ホスト ポート パス クエリ フラグメント
🔑 ユーザーとパスワード（危険なラベル）
認証が必要なサーバーに行く時の情報です。
宛名ラベルに「暗証番号は1234です」と書いて荷物を送るようなものなので、セキュリティ上めちゃくちゃ危険です。
現在http: https:ではほぼ非推奨。他の特殊な通信でたまに使われます。
🚪 ポート（搬入口）
ホストにくっつけて、通信の出入り口を指定します。
「マンションに着いたら、正面玄関じゃなくて裏の8080番の搬入口に来てね」という指示です。
📝 クエリ（配達時のオプション要望）
サーバーに渡すパラメータ（条件）です。パスの後に ? を付けて 名前=値 で書きます。
例：「プレゼント用の包装にして！」＝ ?gift=yes
検索エンジンで「猫」と検索したときのURLをよく見ると、?q=猫 のようなクエリパラメーターがいっぱいくっついていますよ！
🔖 フラグメント（しおり）
サーバーに送る情報ではなく、ブラウザ（手元）で解釈する情報です。
HTML内の特定の位置（アンカー）を表します。
「荷物を開けたら、まず第1章（#chapter1）を読んでね！」という付箋のような役割です。
3. HTTPの基本（配達のやり取り）
住所（URL）の書き方が分かったら、次は配達のやり取り（HTTP）です。
私たちが「リクエスト（要求）」を出し、サーバーが「レスポンス（返答）」をくれます。
🙋♂️ HTTPリクエスト（「これちょうだい！」のお願い）
リクエストは、【リクエストライン】【リクエストヘッダフィールド】【メッセージボディ】の3部構成です。
※ちなみに、ヘッダとボディの間には「ここから下は中身だよ！」と分かるように必ず空行を1行挟むという絶対ルールがあります。
【HTTPリクエスト】
[1. リクエストライン]（注文の概要：何をどうするか）
GET /books/index.html HTTP/1.1
→ 「このファイルをください！」
[2. ヘッダフィールド]（伝票の備考欄）
User-Agent: Chrome
Accept-Language: ja
→ 「Chromeから来てます」「日本語でお願いします」
----------------------------------------
（※ルール：ここに必ず空行が入る）
----------------------------------------
[3. メッセージボディ]（荷物の中身）
（POSTのときだけ入る）
→ 「送るデータ（例：フォームの入力内容）」
📦 HTTPレスポンス（「はい、どうぞ！」の返事）
レスポンスの構造もリクエストとほぼ同じ3部構成です！
【HTTPレスポンス】
[1. ステータスライン]（配達結果の報告：どうなったか）
HTTP/1.1 200 OK (💡ステータスコード）
→ 「お届け完了しました！」
[2. レスポンスヘッダフィールド]（納品書の詳細）
Content-Type: text/html
Content-Length: 1234
→ 「中身はHTMLです」「サイズはこれくらいです」
----------------------------------------
（※ルール：ここに必ず空行が入る）
----------------------------------------
[3. メッセージボディ]（届いた荷物の中身）
<html>...</html>
→ 「実際のWebページの中身（HTML・画像など）」
💡 ステータスコードって何？
ステータスラインにある「200 OK」などの数字は、リクエストの結果を表しています。
特に最初の1桁を見るだけで大体の意味が分かります。
1xx：案内中（ちょっと待ってね〜）
2xx：成功！（無事お届けしました）
3xx：転送（新しい住所はこちらです）
4xx：クライアントエラー（宛先間違ってません？）
5xx：サーバーエラー（ごめん今無理！）
まとめ
長くなりましたが、大事なことは
URLは「住所」、HTTPは「配達ルール」のようなイメージです。
URLは「スキーム・ホスト・パス」で構成されていて、
「?」の後にはオプション（クエリ）が付くことがあります。
HTTPはリクエスト（要求）とレスポンス（返答）のやり取りで、
結果はステータスコード（3桁の数字）で分かるようになっています。
これで、「インターネットの魔法」は卒業です。
URLがどこを指していて、HTTPでどうやってやり取りしているのか。
その流れがイメージできていれば、Webの仕組みがぐっと分かりやすくなってきます。
これをきっかけに、Webの理解が少しでも深まれば嬉しいです。