【完全初心者向け】URLの構造を徹底解説！

はじめに

Web制作を始めたばかりのとき、「URLの後ろの#って何？」「?id=123みたいなのは何を意味してるの？」と疑問に思ったことはありませんか？

「URLをちゃんと理解しないまま、なんとなく使っている」という方も多いのではないでしょうか。

本記事では、URLの構造を初めて学ぶ方を対象に、各パーツの役割から実際の活用方法まで、わかりやすく解説します。

URLの基本構造からクエリパラメータやハッシュの使い方まで、実際の例を交えながら丁寧に説明していきますので、ぜひ参考にしてみてください。

URLとは何か？

URL（Uniform Resource Locator）は、インターネット上の情報の「住所」のようなものです。

簡単に言えば、「どこのサーバーの、どのファイルを見たいか」を指定する文字列です。

URLの基本的な構成要素

プロトコル – 通信方法を指定（http、https）
ドメイン – サーバーの場所を示す
パス – ファイルやページの場所
クエリパラメータ – 追加情報を送信
ハッシュ（フラグメント） – ページ内の特定位置

なぜURL構造を理解すべきなのか

フォーム送信の仕組みが理解できる
SEO対策で有利になる
APIとの通信が理解しやすくなる
デバッグが効率的にできる
ユーザビリティの高いサイトが作れる

URLの各パーツを詳しく解説

完全なURLの例

まず、実際のURLを見てみましょう：

https://example.com:8080/products/item.html?id=123&color=red#reviews

このURLを分解すると、以下のような構成になっています。

1. プロトコル（https://）

プロトコルは、ブラウザとサーバーがどのような方法で通信するかを指定します。

http:// – 暗号化されていない通信
https:// – SSL/TLSで暗号化された安全な通信
ftp:// – ファイル転送用
file:// – ローカルファイルへのアクセス

現在では、セキュリティの観点からほぼすべてのWebサイトでhttpsが使用されています。

GoogleもHTTPSサイトを検索順位で優遇しているため、Web制作では必須の知識です。

2. ドメイン名（example.com）

ドメイン名は、インターネット上でサーバーを識別する名前です。

www.example.co.jp
└─┘ └──────┘ └┘└┘
 │      │     │ │
 │      │     │ └─ トップレベルドメイン（TLD）
 │      │     └─── セカンドレベルドメイン
 │      └───────── 第2レベルドメイン
 └──────────────── サブドメイン

サブドメインは任意で設定でき、「blog.example.com」「shop.example.com」のように、サービスごとに分けることができます。ドメインはDNSサーバーによってIPアドレスに変換され、実際のサーバーにアクセスします。

3. ポート番号（:8080）

ポート番号は、サーバー上の特定のサービスを指定する番号です。

https://example.com:8080/
                    └──┘
                     ポート番号

HTTP: デフォルトは80番（省略可能）
HTTPS: デフォルトは443番（省略可能）
開発時によく使うポート: 3000、8000、8080など

通常のWebサイトではポート番号は省略されますが、開発環境では「localhost:3000」のように明示的に指定することが多いです。

パス・クエリパラメータ・ハッシュの違い

パス（/products/item.html）

パスは、サーバー上のリソースの場所を示します。

https://example.com/products/category/item.html
                   └─────────────────────────┘
                            パス部分

パスの特徴：

ディレクトリ構造を表現
SEOに影響する重要な要素
階層構造で情報を整理
拡張子（.html、.php）は省略可能

最近のWebアプリケーションでは、「/users/profile」のように拡張子を省略した、分かりやすいURL設計が主流です。これをクリーンURLやフレンドリーURLと呼びます。

クエリパラメータ（?id=123&color=red）

クエリパラメータは、サーバーに追加情報を送信する仕組みです。

https://example.com/search?q=javascript&category=web&sort=new
                          └──────────────────────────────┘
                                クエリパラメータ部分

クエリパラメータの基本構造

「?」で開始
「パラメータ名=値」の形式
複数の場合は「&」で連結
日本語などは自動的にURLエンコードされる

実際の使用例

// JavaScriptでクエリパラメータを取得
const urlParams = new URLSearchParams(window.location.search);
const searchWord = urlParams.get('q'); // "javascript"
const category = urlParams.get('category'); // "web"

クエリパラメータは、検索結果のフィルタリング、ページネーション、トラッキングパラメータなど、様々な用途で使用されます。

ハッシュ（#reviews）

ハッシュ（フラグメント）は、ページ内の特定の位置を指定します。

https://example.com/article#section3
                           └───────┘
                           ハッシュ部分

ハッシュの特徴と使い方

ページ内リンク – 同じページ内の特定セクションへジャンプ
サーバーには送信されない – クライアント側のみで処理
ブラウザの履歴に残る – 戻るボタンで前の位置に戻れる

HTMLでの実装例

<!-- ジャンプ先の設定 -->
<h2 id="section3">セクション3の見出し</h2>

<!-- ページ内リンクの設置 -->
<a href="#section3">セクション3へジャンプ</a>

<!-- 別ページの特定位置へのリンク -->
<a href="/article#section3">記事のセクション3へ</a>

最近では、SPAでのルーティングやスムーズスクロール実装でも活用されています。

実践的なURL活用テクニック

フォーム送信時のURL

GETメソッドとPOSTメソッドでURLの扱いが異なります。

<!-- GETメソッド：URLにパラメータが追加される -->
<form action="/search" method="GET">
  <input name="q" type="text">
  <button type="submit">検索</button>
</form>
<!-- 送信後のURL: /search?q=検索ワード -->

<!-- POSTメソッド：URLは変わらない -->
<form action="/login" method="POST">
  <input name="email" type="email">
  <input name="password" type="password">
  <button type="submit">ログイン</button>
</form>
<!-- 送信後のURL: /login（パラメータは表示されない） -->

GETは検索やフィルタリングなど、URLを共有したい場合に使用し、POSTはログインや会員登録など、セキュアな情報を扱う場合に使用します。

JavaScriptでのURL操作

// 現在のURLを取得
const currentUrl = window.location.href;

// URLの各部分を取得
console.log(window.location.protocol); // "https:"
console.log(window.location.hostname); // "example.com"
console.log(window.location.pathname); // "/products/item.html"
console.log(window.location.search);   // "?id=123&color=red"
console.log(window.location.hash);     // "#reviews"

// URLを変更（ページ遷移なし）
window.history.pushState(null, '', '/new-path?param=value');

// クエリパラメータを操作
const params = new URLSearchParams(window.location.search);
params.set('color', 'blue');
params.append('size', 'L');
const newUrl = `${window.location.pathname}?${params.toString()}`;

これらのメソッドを使うことで、動的にURLを操作し、SPAやフィルター機能を実装できます。

SEOを意識したURL設計

良いURL設計の例：

https://shop.example.com/products/shoes/running/nike-air-max
階層構造が明確
意味のある単語を使用
ハイフンで単語を区切る

避けるべきURL設計：

https://example.com/p?id=12345&cat=3&subcat=15
意味不明なパラメータ
数字のみのID
アンダースコアの使用

検索エンジンは、URLからもページの内容を判断するため、分かりやすく意味のあるURL設計が重要です。

まとめ

URLの構造を理解することで、Web制作の幅が大きく広がります。

今回学んだポイント：

プロトコル、ドメイン、パス、クエリパラメータ、ハッシュの役割
各パーツの実践的な使い方
SEOやセキュリティを考慮したURL設計

まずは自分のプロジェクトで、適切なURL設計を意識してみてください。クエリパラメータを使った検索機能や、ハッシュを使ったページ内リンクなど、小さなところから実装してみましょう。

URLは単なる文字列ではなく、Webアプリケーションの重要な構成要素です。この知識を活かして、より良いWebサイトを作っていきましょう！