URL
初級読み方：ユーアールエル｜英語：URL
ウェブページの住所で、https://example.com/page のような形式だよ。
やさしい説明
URL（ユーアールエル）とは、インターネット上のページの住所です。Uniform Resource Locator の略で、ブラウザのアドレスバーに表示される文字列です。
現実の住所が「東京都渋谷区○○1-2-3」のように構造化されているように、URLも「プロトコル://ドメイン/パス」という構造になっています。
URLを見れば「どのサーバーの」「どのページか」がわかります。リンクを貼るときやAPIにアクセスするときに使います。
URLの構造
https://example.com/blog/hello?page=2#section1
│ │ │ │ │
│ │ │ │ └─ フラグメント（ページ内の位置）
│ │ │ └─ クエリパラメータ（検索条件等）
│ │ └─ パス（ページの場所）
│ └─ ドメイン名（サーバーの名前）
└─ プロトコル（通信方法: https / http）クエリパラメータ（?page=2）は複数つなげられます。2つ目以降は & でつなぎます（例: ?page=2&sort=new）。検索結果ページやフィルター機能によく使われます。
相対パスと絶対パスの違い
<!-- 絶対パス: プロトコルから書く（どこからでも同じ場所を指す） -->
<a href="https://example.com/about">About</a>
<!-- ルート相対パス: / から書く（同じサイト内のどこからでも使える）-->
<a href="/about">About</a>
<img src="/images/logo.png" alt="ロゴ">
<!-- 相対パス: 現在のファイルからの位置 -->
<a href="./contact">お問い合わせ</a> <!-- 同じ階層 -->
<a href="../images/cat.jpg">猫</a> <!-- 1つ上の階層 -->サイト内のリンクには /about のような「ルート相対パス」が最もよく使われます。ファイルを移動してもパスが変わらないのでメンテナンスしやすいです。
いつ使う？
- リンクを作るとき（
aタグのhref属性） - APIにアクセスするとき（
fetch(url)） - 画像・CSS・JSを読み込むとき（
src/href属性） - ページ内アンカーリンク（URL末尾に
#section名）
間違いやすいポイント
❌ 相対パスと絶対パスを混同する
外部サイトへのリンクは必ず https:// から始まる絶対パスで書きます。/about のような相対パスは同じサイト内のページにしか使えません。
❌ 日本語や特殊文字をそのままURLに使う
URLに日本語を含める場合、ブラウザが自動でエンコード（%E3%81%82 のような形式）します。JavaScriptで動的にURLを作るときは encodeURIComponent() を使いましょう。
よくある疑問
Q: URLとドメインの違いは？
A: ドメインはURLの一部です。example.comがドメイン、https://example.com/about/ がURL全体です。
Q: URLの構成要素は？
A: プロトコル(https://) + ドメイン(example.com) + パス(/page) + クエリ(?key=value) + フラグメント(#section) で構成されます。
Q: 相対URLと絶対URLの違いは？
A: 絶対URLはhttps://から始まる完全なURL、相対URLは/pageや./imageのように現在の位置からの相対パスです。同じサイト内なら相対URLが便利です。
関連用語
📖 関連レッスン
レッスンを見る →