基本的なURLをコンポーネントに分解する

URLの構造

すべてのURLはRFC 3986で定義された標準構造に従います。この構造を理解することは、Web開発、API連携、ネットワークリクエストのデバッグの基本です。

URL構造

  https://www.example.com:443/path/to/page?key=value&foo=bar#section
  \___/   \_____________/\__/\_____________/\_________________/\_______/
    |           |          |       |               |              |
 プロトコル  ホスト名     ポート  パス名        クエリ文字列    ハッシュ

コンポーネントの解説

• プロトコル (https:) — ブラウザの通信方法を指示するスキーム。一般的なプロトコルにはhttp:、https:、ftp:、file:があります。

• ホスト名 (www.example.com) — サーバーのドメイン名またはIPアドレス。DNSを通じてサーバーの実際のIPアドレスに解決されます。

• ポート (:443) — ネットワークポート。デフォルトポート（HTTPの80、HTTPSの443）は通常URLから省略されますが、バックグラウンドでは常に使用されます。

• パス名 (/path/to/page) — サーバー上の特定リソースへのパス。モダンなWebフレームワークではファイルパスではなくルートであることが多いです。

• クエリ文字列 (?key=value&foo=bar) — &で区切られたキーバリューペアでサーバーにデータを渡します。クエリ文字列は?で始まります。

• ハッシュ / フラグメント (#section) — ページ内のセクションへのクライアントサイド参照。ハッシュはサーバーに送信されません。

ブラウザのURL API

ブラウザにはパース用の組み込みURLクラスがあります：

const url = new URL("https://example.com/path?q=test#top");
console.log(url.protocol);   // "https:"
console.log(url.hostname);   // "example.com"
console.log(url.pathname);   // "/path"
console.log(url.search);     // "?q=test"
console.log(url.hash);       // "#top"

このAPIはPunycodeドメイン、IPv6アドレス、パーセントエンコードされた文字などのエッジケースを自動的に処理します。