ハッシュベースルーティングとフラグメント識別子

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でブックマーク可能なビューを構築するために不可欠です。

試してみる — URL Parser & Builder

フルツールを開く