女性向けエンジニアスクール
3秒でわかる
Web上の資源がどこにあるかを示す住所の文字列。方式・ホスト・パス・クエリを組み合わせ、1つの資源を一意に指し示します。
30秒図解
もう少し詳しく
どういうものか
URLは、インターネット上のページや画像やAPIがどこにあるかを示す文字列です。Uniform Resource Locatorの略で、決まった区切りで並んだいくつかの部品からできています。部品の位置には意味があり、どこに何を書くかでブラウザやサーバーの動きが変わります。
https://shop.example.com:443/items/42?color=red&size=m#reviews
└─┬─┘ └──────┬───────┘└┬┘└───┬───┘└──────┬──────┘└──┬──┘
スキーム ホスト ポート パス クエリ フラグメントスキームは通信の方式、ホストは相手のサーバー、パスはそのサーバーの中での位置、クエリは追加の条件、フラグメントはページ内の位置を表します。
なぜ必要か
同じ画像が世界中の無数のサーバーに置かれていても、URLが1つに定まっていれば取り違えずに取ってこられます。リンク、ブックマーク、共有、検索エンジンの索引はすべて、この一意性の上に成り立っています。フォームの送信先やAPIの呼び出し先を指定できるのも、住所の書き方が世界共通で決まっているためです。
具体例
// 手で文字列を連結せず、URL と URLSearchParams を使う
const url = new URL("https://api.example.com/search");
url.searchParams.set("q", "東京 カフェ"); // 空白も日本語も自動で<a href="/glossary/escape" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">エスケープ</a>される
url.searchParams.set("page", "2");
console.log(url.toString());
// https://api.example.com/search?q=%E6%9D%B1%E4%BA%AC%20%E3%82%AB%E3%83%95%E3%82%A7&page=2
console.log(url.hostname); // api.example.com
console.log(url.pathname); // /searchつまずきやすいところ
クエリの値に空白や記号や日本語をそのまま入れると、意図しない場所で区切られて壊れます。とくに & を含む値を連結すると、そこから別のパラメータとして解釈されます。文字列連結ではなく URLSearchParams に任せると、必要な変換が自動で行われます。もうひとつは、フラグメントはサーバーへ送られないという性質です。ページ内リンクとして使う分には問題ありませんが、これを認証情報の受け渡しに使ってもサーバー側では受け取れません。末尾スラッシュの有無を別のURLとして扱うサーバーもあり、リダイレクトが挟まってPOSTの中身が落ちる原因になります。
似た用語との違い
| 語 | 意味 |
|---|---|
| URL | 資源の場所を示す文字列 |
| URI | 場所または名前で資源を識別する上位の概念 |
| ドメイン | URLのうちホストにあたる部分 |
| パス | サーバー内での位置を表す部分 |
