ハッシュベースルーティングとフラグメント識別子
URLハッシュ(フラグメント識別子)の仕組み、シングルページアプリケーションルーティングでの役割、アンカーナビゲーション、ハッシュがサーバーに送信されない理由を理解します。
Hash & Routing
詳細な説明
URLハッシュ / フラグメント識別子
ハッシュ(フラグメント識別子とも呼ばれる)は、URLの#記号に続く部分です。固有の特性があります:HTTPリクエストでサーバーに送信されることはありません。
基本的な動作
https://docs.example.com/guide/setup#installation
\_________/
ハッシュ
ブラウザがこのURLをリクエストする際に送信するのは:
GET /guide/setup HTTP/1.1
Host: docs.example.com
#installationの部分は完全にクライアントサイドに留まります。
SPAハッシュルーティング
シングルページアプリケーション(SPA)は、ハッシュの変更がページリロードを引き起こさないため、クライアントサイドルーティングにハッシュを使用します:
https://app.example.com/#/dashboard
https://app.example.com/#/users/123
https://app.example.com/#/settings?tab=profile
ハッシュ vs History APIルーティング
| 機能 | ハッシュルーティング | History API |
|---|---|---|
| URL外観 | example.com/#/page |
example.com/page |
| サーバー設定 | 不要 | index.htmlへのフォールバックが必要 |
| SEO | 低い(検索エンジンがハッシュを無視する可能性) | 良好 |
| ページリロード | なし | なし |
| SSR | 不可能 | 可能 |
重要な特性
- ハッシュには
#文字が含まれる:url.hashは"#section"を返し、"section"ではない - 空のハッシュ(
#)はハッシュなしとは異なる - ハッシュにはクエリのようなパラメータを含めることができる:
#/page?key=value(ただしこれは実際のクエリパラメータではない)
ユースケース
ハッシュベースルーティングは、サーバーサイドのURLリライティングなしで静的ホスティング(GitHub Pages、S3静的ホスティング、基本的な共有ホスティング)にデプロイされるアプリケーションで今も広く使用されています。ドキュメントサイト、Wiki、コンテンツの多いWebサイトでのスムーズスクロールナビゲーションにも使用されます。ハッシュの仕組みを理解することは、SPAでブックマーク可能なビューを構築するために不可欠です。