URL の構造 - スキーム・ホスト・ポート・パス・クエリ・フラグメント

URLとは

URL（Uniform Resource Locator）は、インターネット上のリソース（Webページ、画像、APIエンドポイントなど）の場所を示す住所です。ブラウザのアドレスバーに入力する文字列がURLです。

なぜ重要か: URLは人間が覚えやすく、機械が解釈できる統一された形式でリソースを指定します。Webの基盤となる技術の一つです。

URLの基本構造

完全なURLは以下の要素で構成されます。

https://user:pass@www.example.com:443/path/to/page?key=value&lang=ja#section
└─┬─┘ └───┬───┘ └──────┬──────┘└┬┘└─────┬─────┘└──────┬──────┘└───┬───┘
scheme  userinfo      host      port   path        query      fragment

各要素の役割

scheme（スキーム）

使用するプロトコルを指定します。大文字小文字は区別されません（慣例として小文字）。

主要なスキーム

# 具体例
https://example.com/         # Webページ
ftp://ftp.example.com/files  # FTPサーバー
mailto:info@example.com      # メール送信
file:///C:/Users/doc.pdf     # ローカルファイル

セキュリティのヒント: 2024年以降、主要ブラウザはhttp://を「安全でない」と警告します。本番環境では常にhttps://を使用しましょう。

userinfo（ユーザー情報）

ユーザー名とパスワードを含む認証情報です。user:password@の形式で記述します。

ftp://admin:secret123@ftp.example.com/files
└───┬───────┘
  userinfo

host（ホスト）

サーバーのドメイン名またはIPアドレスを指定します。

ドメイン名の例

www.example.com       # サブドメイン.ドメイン.TLD
api.example.co.jp     # 日本のドメイン
localhost             # ローカルマシン

IPアドレスの例

http://192.168.1.1/          # プライベートIPv4
http://[2001:db8::1]/        # IPv6（[]で囲む）

IPv6の注意: IPv6アドレスは:を含むため、URLでは[]で囲みます。例: http://[::1]:8080/

port（ポート番号）

サーバーの待ち受けポート番号です。省略すると各プロトコルのデフォルトが使われます。

デフォルトポート

# ポート番号を明示する例
http://localhost:3000/        # 開発サーバー
https://api.example.com:8443/ # カスタムポート

path（パス）

サーバー内のリソースへのパスです。/で区切られた階層構造です。

/index.html              # ファイル
/products/123            # RESTful API（IDが123の商品）
/blog/2025/01/post       # 階層構造
/                        # ルート

パスの正規化

# これらは同じリソースを指す
/path/./to/../page  →  /path/page
/path//to///page    →  /path/to/page

大文字小文字の扱い: UNIXサーバーでは/Pathと/pathは別物です。Windowsサーバーでは同一です。移植性のため小文字を推奨します。

query（クエリ文字列）

?の後に記述するパラメータです。key=valueの形式で、複数のパラメータは&で区切ります。

?search=keyword                     # 単一パラメータ
?name=John&age=30&city=Tokyo        # 複数パラメータ
?tags[]=web&tags[]=api              # 配列形式

クエリパラメータの用途

特殊文字のエンコーディング

// JavaScriptでのエンコード
encodeURIComponent('Hello World') // → "Hello%20World"
encodeURIComponent('日本語')       // → "%E6%97%A5%E6%9C%AC%E8%AA%9E"
encodeURIComponent('?&=')          // → "%3F%26%3D"

fragment（フラグメント）

#の後に記述するページ内の位置です。サーバーには送信されず、ブラウザ内でのみ使用されます。

https://example.com/page#section-3    # ページ内のセクションへジャンプ
https://example.com/docs#installation  # アンカーリンク

フラグメントの用途

サーバーとの通信: フラグメントはHTTPリクエストに含まれません。サーバーはフラグメント部分を認識できません。

URIとURLの違い

URI（Uniform Resource Identifier）はURLを含む上位概念です。

URI
├── URL（場所で識別）: https://example.com/page
└── URN（名前で識別）: urn:isbn:978-4-12-345678-9

実務では: ほとんどの場合「URL」と呼べば十分です。厳密な議論では「URI」を使います。

パーセントエンコーディング

URLで使えない文字や予約文字を%XX形式でエンコードします。

エンコードが必要な文字

# 実際の例
https://example.com/search?q=Hello%20World     # 空白
https://example.com/search?q=%E6%A4%9C%E7%B4%A2  # 「検索」
https://example.com/path?url=https%3A%2F%2Fother.com  # URL自体を含む

相対URLと絶対URL

絶対URL

完全なURL（scheme、host を含む）です。

https://www.example.com/path/to/page

相対URL

現在のページを基準にした相対パスです。

# ベースURL: https://example.com/docs/guide/index.html

./images/logo.png     → https://example.com/docs/guide/images/logo.png
../api/users          → https://example.com/docs/api/users
/about                → https://example.com/about
?page=2               → https://example.com/docs/guide/index.html?page=2
#section              → https://example.com/docs/guide/index.html#section

相対URLの種類

URLの例

Webページ

https://www.example.com/blog/2025/01/post?page=2#comments

API エンドポイント

https://api.example.com/v1/users/123?fields=name,email

ローカル開発環境

http://localhost:3000/admin/dashboard?debug=true

メールアドレス

mailto:contact@example.com?subject=Hello&body=Message

データURI（Base64エンコード画像）

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

URLの検証と解析

JavaScriptでの解析

const url = new URL('https://user:pass@example.com:8080/path?key=value#section');

console.log(url.protocol);   // "https:"
console.log(url.hostname);   // "example.com"
console.log(url.port);       // "8080"
console.log(url.pathname);   // "/path"
console.log(url.search);     // "?key=value"
console.log(url.hash);       // "#section"
console.log(url.username);   // "user"
console.log(url.password);   // "pass"

Pythonでの解析

from urllib.parse import urlparse

url = urlparse('https://example.com:8080/path?key=value#section')

print(url.scheme)    # 'https'
print(url.netloc)    # 'example.com:8080'
print(url.path)      # '/path'
print(url.query)     # 'key=value'
print(url.fragment)  # 'section'

よくある間違いと注意点

エンコード漏れ

❌ https://example.com/search?q=Hello World       # 空白がそのまま
✅ https://example.com/search?q=Hello%20World     # 正しくエンコード

二重エンコード

❌ encodeURIComponent(encodeURIComponent("検索"))  # %25E6%25... （二重）
✅ encodeURIComponent("検索")                       # %E6%... （正しい）

ポート番号の誤解

https://example.com:80/   # HTTPSなのにポート80（誤り）
http://example.com:443/   # HTTPなのにポート443（誤り）

まとめ

URLはscheme://userinfo@host:port/path?query#fragmentの要素で構成されます。schemeとhostは必須で、他はオプションです。特殊文字はパーセントエンコーディングでエスケープし、相対URLを使うことでコードの保守性を高められます。URLはWebの基盤技術であり、正しく理解することで堅牢なWebアプリケーションを構築できます。

参考リソース

• RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax
• MDN - What is a URL?
• WHATWG - URL Standard
• MDN - encodeURIComponent()