URL の秘密とは?ウェブ開発者のためのインターネットのアドレス体系の楽しいガイド

開発者向けのガイドで、興味深いURLの世界に飛び込みましょう。

友達から送られてきたリンクを、または「スニーカー50%OFF」のサスなバナー広告を、まるでデジタルのレmmングのようにただクリックした経験はありませんか?

私もあります。

今日はそのカバーを剥ぎ取ります。その文字列を、サイバースペースへの完全に解説付きの冒険に変えましょう。

無害そうに見えるURL?

それは単なる文字列ではありません。

それはテレポーテーションデバイスです。

宝の地図です。

デジタル多次元宇宙の隠れたコーナーへのSFの旅行チケットです。

虚拟护照を手にして、いざ出発です。

最初に見ৎもり——URLとは何?

URL — Uniform Resource Locator — は基本的にインターネットの郵便番号です。ブラウザがどこへ行くべきか、何を求めるべきか、そしてディナーの前に安全に戻ってくるために必要なものです。

例えば旅行を計画すると考えてください:

  • どの国を訪れる? → ホスト
  • どの通りと家の番号? → パス
  • 入るための秘密のノック? → ポート
  • VIPアクセスコード? → ユーザー名:パスワード
  • 青のソファではなく赤のソファにしたい? → クエリパラメータ
  • イントロをスキップしてコメント欄に直接行きたいたい? → フラグメント

この堂々たるURLの構造を見ていきましょう:

https://alice:1234@shop.example.com:8080/products/sneakers?color=red&size=42#reviews  

怖がる必要はありません、これはデジタルの搭乗券です。まるでトーキョーのインスタ映えするカフェにたどり着く方法を説明する旅行ブロガーのように、一つずつ分解していきましょう。

1. スキーム——あなたの移動手段

https://

これはあなたの乗り物です。移動手段です。スケッチな市バス(http)に乗るのか、プライベートアーマードトレインに乗ってサングラスと暗号化されたお菓子を食べる(https)のか、どちらですか?

  • http:暗号化されていない。ラッシュアワーでコンバーチブルに乗ってラップトップを開いてるようなものです。
  • https:暗号化されている。外交官のクーリエを通じて鍵のかかったスーツケースで情報を送信するようなものです。

これを考えるなら:
普通の郵便(http)vs GPSトラッカーと署名が必要なFedEx(https)。

プロのアドバイス:HTTPSは単なるおしゃれな機能だけではありません。クレジットカード番号を入力するサイトで普通のhttpを見たら、逃げましょう。全力疾走で後ろを振り返らないで。

チップ:スキームとプロトコルの関係について

これらは似ているように聞こえますが、同じではありません。

スキームとは?

スキームはURI(Uniform Resource Identifier)の最初の部分であり、ブラウザがリソースを取得するためにどの乗り物を使うかを指示します。

例えば:

https://example.com  
↑
その部分がスキームです。

野生で見るスキーム:

  • http / https
  • ftp
  • mailto
  • file
  • data
  • tel
  • ws(WebSocket)
  • urn

➡️ スキームは単なるhttpだけではありません。 ブラウザがリソースに 접근する方法を伝えるためのあらゆる種類の「アクセスコード」です。

これは次のように言えます:

「メールで送るべきですか?ストリーミングしますか?古びたFTPサーバーからダウンロードしますか?それともtel:を使って誰かの祖母に電話しますか?」

それでは、スキームとプロトコルの違いは何ですか?

ここで話が面白くなります。

ほとんどの場合、スキームは特定の通信プロトコルに対応しています、次のように:

スキーム 基本となるプロトコル
http HTTPプロトコル
https HTTP + TLS(いわゆる安全なHTTP)
ftp FTPプロトコル
ws WebSocketプロトコル
mailto 実際のネットワークプロトコルではなく——フォーマット

⚠️ ですが、骗されないでください:すべてのスキームが実際のプロトコルではありません。

一部、mailto:data:のように、どのようにコミュニケーションするかではなく、データの見た目どう処理するかを表すものです。

✅ それでは、プロトコルとは何ですか?

プロトコルは、データをクライアント(あなた)とサーバー(雲の上の魔法のようなマシン)の間で送受信するルールの集合です。

一般的なプロトコルには:

  • HTTP / HTTPS
  • FTP
  • SMTP
  • WebSocket
  • TCP / UDP(これらは配管の下にある配管です)

スキームが旅行スタイル(「私はファーストクラスで飛行機に乗ります」)を表すのなら、プロトコルは航空交通管理(「さあ、正確な手順に従って安全に着陸してください」)です。

スキームはリソースにアクセスする方法を示します。プロトコルはデータが実際にどのようにして動くかを示します。両者はよく関連していますが、同じではありません

次回、https://を見た時、次のことがわかるでしょう:
それは単なるおしゃれな「セキュア」バッジだけではありません。ブラウザがコーヒーカップを持ちながら「任せてください」と言っている間に、表面の下で行われているプロトコルハンドシェイクがあることを知るでしょう。

2. ユーザー情報——あなたのVIPクレデンシャル

alice:1234@

サイトがあなたを入れる前に、ドアでパスワードを囁く必要があるかもしれません。

  • alice:ユーザー名
  • 1234:パスワード(はい、これはひどいパスワードです——変更しましょう)
  • @:秘密のアイデンティティの終わりとドメインの開始を示します

今では、ブラウザは「パスワードをここに入れないでください」と言っていますし、多くのブラウザは完全にブロックしています。URLにクレデンシャルを含めるのは、ネットフリックスのログインを玄関に書いているようなものです。

これを考えるなら:
スピークイージーに入るために、トレンチコートを着た男に「バナナパンケーキ」と囁くようなものです。

3. ホスト——あなたの目的地

shop.example.com

これが目標です。最終目的地です。デジタルの街へ向かうデスティネーションです。

  • example.com = メインサイト
  • shop. = サブドメイン(建物内の部署のようなもの)
  • DNSはこれを探してIPアドレスに変換します、マシンは人間の言葉を理解しないからです

これを考えるなら:
ポストカードを送る時、shop.example.comは「フランス、パリ」の部分です。

4. ポート——どのドアをノックしますか?

:8080

ホストは巨大なスカイシップかもしれません。ポートはどのドアや窓から這い込むかを示します。

  • HTTPのデフォルトポート:80
  • HTTPS:443
  • でももし80803000のような番号を見たら、テストサーバーや開発ビルト、またはインターンによってダクトテープで固定されたサーバーかもしれません

アナロジー時間:
マナーに着いて「こんにちは」と叫びますが、65,000のドアがあります。ポートはどのインターホンを押すべきかを教你します。

5. パス——どこへ精确に行きますか?

/products/sneakers

これはあなたの店内GPSです。ウェブサイトのデジタル通路を通じたパスです。

  • /products = 製品セクション
  • /sneakers = スニーカーの棚、一番上段、左から3つ目の箱

これを考えるなら:
IKEAに入店してオンラインで見た特定のスウェーデンのソファを見つけようとする。パスなしでは見つけるのは大変です。

6. クエリパラメータ——あなたのカスタムオーダー

?color=red&size=42

ここからが個人的な部分です。単なるブラウジングではなく、特別なオーダーを出します。

  • ?はクエリのパーティを開始します
  • color=red:レッドの靴が欲しい
  • size=42:大きな足、大きなスタイル

開発者の用語で言うと:
クエリ文字列はフィルタ検索設定好みです。あなたのブラウザはサーバーに次のように伝えます:

「こんにちは、このページのそのバージョンが欲しいのです。」

7. フラグメント——ページのどの部分に着きますか?

#reviews

サイトに到着しましたが、イントロビデオをスキップして肝心の部分に直接飛び込むたいです。

フラグメントは次のことを助けます:

  • 「レビュー」セクションにジャンプ
  • 特定のFAQに着地
  • ネアンデルタ人のようにスクロールするのを避ける

注意:フラグメントはサーバーに送られません。ブラウザが処理するだけです。サーバーは最初にレビューを見ていること都不知道です。

実際の例:
100階建ての建物に入ると、すぐに47階、Bルームにエレベーターで行くようなものです。

それでは、この全体のURLは実際に何を言っているのでしょうか?

全部組み合わせると:

https://alice:1234@shop.example.com:8080/products/sneakers?color=red&size=42#reviews  

これは次のようになります:

「こんにちは、私はaliceです、shop.example.comセキュアバージョンにアクセスしています、ポート8080を経由しています。
私は製品セクションスニーカーを見にきました、特にレッドでサイズ42のものです。
あ、そして直接レビューのセクションに連れて行ってください——コメントはマーケティングより信用できるからです。」

これは、コードで書かれた特定の靴へのラブレターです。

結論:あなたのインターネット旅行の行程表

部分 何を意味する
スキーム 旅行方法 (https)
ユーザー情報 誰が尋ねているか(ユーザー名+パスワード)
ホスト 行先(ドメイン)
ポート どの入り口を使っているか
パス 内部どこに向かっているか
クエリ 特殊な好み?
フラグメント ページのどの部分に着地するか

次回URLを見た時、パニックに陥らないでください。目を glazed over(無表情)にしないでください。寄りかかって囁いてください:

「ああ、はい。那是レッドのスニーカー、サイズ42への旅行です……そしてレビューのセクションで未加工の真実です。」

インターネットは魔法ではありません。
それはただ、本当に本当に WELL-LABELLED の荷物です。