0Pricing
HTML Academy · レッスン

ハッシュベースとパスベースのルーティング

ハッシュルーティングとpushStateベースの履歴ルーティングを比較します

「ハッシュベースとパスベースのルーティング」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

SPA の URL に対する 2 つの方式

SPA では、ブラウザーが取得しない URL が必要です。方法は 2 つあります。ハッシュベースはフラグメント（# より後ろのすべて）を使用します。フラグメントはブラウザーからサーバーに送信されません。パスベースは pathname と History API の仕組みを使用します。

ハッシュベースのルーティング

URL は https://example.com/#/about のようになります。サーバーに見えるのは / だけで、すべての URL に対して同じ HTML を返します。クライアント側の JavaScript が location.hash を読み取り、描画するビューを決定します。シンプルで、サーバー設定も必要ありません。

hashchange イベント

ハッシュベースのルーターは hashchange イベントを監視します。このイベントは location.hash が変わるたびに発生します。window.location.hash の読み取りと組み合わせれば、クライアント側のルーティングに必要な API はこれだけであり、History API は関与しません。

window.addEventListener("hashchange", () => {
  const route = location.hash.slice(1) || "/";
  renderPage(route);
});

パスベースのルーティング

URL は https://example.com/about のようになり、サーバーで描画された URL と見分けがつきません。History API の pushState は再読み込みせずにパスを変更し、戻る・進む操作では popstate が発生します。クリックを横取りすることで、<a> を SPA のナビゲーションに変えられます。

サーバー設定が必要

パスベースのルーティングでは、ユーザーが直接入力または再読み込みする可能性のあるすべてのパスに対して、サーバーが SPA の index.html を返す必要があります。そうしないと、/about を再読み込みしたときに 404 になります。設定では、まずファイルを試し、見つからなければ index.html にフォールバックします（Nginx の history fallback、Vite 開発環境の vite-plugin-history-api）。

# Nginx config
location / {
  try_files $uri $uri/ /index.html;
}

SEO と共有

検索エンジンや多くのツールはハッシュフラグメントをまったくクロールできません。/#/about のコンテンツは古いクローラーからは見えません（Google はヘッドレスレンダリングで対応しますが、他のサービスでは対応しない場合があります）。パスベースの URL は通常どおりクロールされるため、SEO の面では明らかに優れています。

ユーザーから見た印象

ハッシュ URL は目に見えて「奇妙」なので、ユーザーは # に気付き、リンクを信頼しなかったり、完全な URL をコピーし忘れたりする可能性があります。パス URL は他の Web URL と同じように見えるため、ユーザーの期待に沿っています。この理由だけでも、現在の SPA ではほとんどの場合パスベースのルーティングが選ばれます。

実装の複雑さ

ハッシュベースでは、JavaScript は約 10 行（hashchange リスナーと描画処理）で済みます。パスベースでは、pushState の呼び出し、popstate リスナー、リンクのクリックの横取り、サーバー側のフォールバックが必要です。ハッシュは最も軽量な選択肢ですが、パスではより良いユーザー体験のために追加のインフラストラクチャが必要です。

静的ホスティングに関する考慮事項

静的ホスト（GitHub Pages のデフォルト設定など）ではサーバー側のフォールバックを実行できないため、パスベースのルーティングは再読み込み時に機能しません。回避策として、404.html によるリダイレクト、Netlify や Vercel など SPA のフォールバックに対応したホストの利用、または静的ホストだけで運用するプロジェクトではハッシュベースを受け入れる方法があります。

ハイブリッド方式

両方を組み合わせるアプリもあります。メインのルートにはパスベースを使い、ページ内のセクション（モーダルやタブのアンカーなど）にはハッシュを使います。これらの状態では hashchange イベントが引き続き発生するため、メイン URL に余分な履歴を追加せず、ページ内の状態を扱う History ベースのルーターを補完できます。

2 つの方式間の移行

ハッシュベースからパスベースに移行するには、内部リンクをすべて書き換え、サーバーのフォールバックを追加し、hashchange の処理を popstate に置き換えます。さらに、一度だけ実行されて history.replaceState を呼び出す小さなブートストラップスクリプトで、古いハッシュ URL を対応するパス URL にリダイレクトします。

選択基準

次の場合はハッシュベースを選択します。書き換えに対応していない静的ホスト、SEO が重要でない社内管理ツール、埋め込みウィジェットです。次の場合はパスベースを選択します。ユーザー向けのもの、SEO のインデックス登録が必要なもの、ソーシャルメディアで共有するものです。つまり、ほとんどのアプリが該当します。

理解度チェック

ハッシュベースのルーティングでは必要ないサーバー設定が、パスベースの SPA ルーティングで必要なのはなぜですか。

まとめ

ハッシュベースのルーティング（/#/about のような URL）はサーバー設定を必要としませんが、SEO に弱く、見た目のよくない URL になります。パスベースのルーティング（/about のような URL）は index.html へのサーバーのフォールバックが必要ですが、すっきりして SEO に適し、共有しやすい URL になります。現在、一般公開する SPA ではパスベースが使われていますが、静的ホスト上のプロジェクトや内部向けプロジェクトでは、シンプルさを理由にハッシュベースが選ばれることもあります。

よくある質問

「ハッシュベースとパスベースのルーティング」レッスンは無料ですか？

はい。「ハッシュベースとパスベースのルーティング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「ハッシュベースとパスベースのルーティング」で何を学びますか？

ハッシュルーティングとpushStateベースの履歴ルーティングを比較します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「ハッシュベースとパスベースのルーティング」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. pushStateとreplaceState
  2. popstateイベント
  3. ハッシュベースとパスベースのルーティング
  4. Navigation API：モダンブラウザー
← HTML Academyに戻る