URLの構造を理解する — スキーム・ホスト・パス・クエリ・フラグメント
URLはUniform Resource Locatorの略で、インターネット上のリソースの場所を示す文字列です。それぞれの部分には役割があり、APIのエンドポイント設計・SEO・セキュリティに深く関わります。URLの構造を正しく理解することは開発者の基礎スキルです。
URLの各パーツと役割
https://api.example.com:8080/v1/users?limit=20&offset=0#results というURLを例に取ると、https:（スキーム/プロトコル）、api.example.com（ホスト）、:8080（ポート）、/v1/users（パス）、?limit=20&offset=0（クエリ文字列）、#results（フラグメント）に分解されます。フラグメントはサーバーには送信されず、ブラウザ内でのアンカーナビゲーションに使われます。
クエリパラメータのエンコード
クエリパラメータの値にスペース・日本語・記号が含まれる場合はパーセントエンコード（URLエンコード）が必要です。スペースは%20または+に、「日本語」は%E6%97%A5%E6%9C%AC%E8%AA%9Eになります。JavaScriptのURL APIを使うと自動的にエンコード・デコードが行われます。encodeURIComponent()やURLSearchParams APIを活用するとバグを防げます。
URL APIの活用
ブラウザ・Node.js共通のURL APIを使うと文字列操作なしでURLを安全に操作できます。`new URL("https://...")`でパースし、`.hostname`・`.pathname`・`.searchParams`で各パーツにアクセスできます。`url.searchParams.set("key", "value")`でクエリパラメータを追加・更新し、`url.toString()`で文字列に戻すのが安全です。
WebSocketのURL設計
WebSocketのURLはws://（非暗号化）またはwss://（TLS暗号化）スキームを使います。ws://api.example.com/socketのようにHTTPのURLと同じホスト・パス構造を持てます。クエリパラメータで認証トークンを渡すパターン（wss://...?token=xxx）も一般的ですが、セキュリティ上はヘッダーやハンドシェイク時のSubprotocolで認証する方が安全です。