AI Session Notes - 2026-03-09
History API と SPA fallback
学んだこと
- History API を使う SPA は、URL をきれいに変えつつページ全体を再読込せずに画面遷移できる。
- ただし
pushState ベースのルーティングを静的ホスティングに載せる場合、深い URL への直アクセスで index.html に戻す fallback 設定が必要になる。
- 「アプリ内遷移が動く」ことと「ブックマークした深い URL やリロードが動く」ことは別問題として考えると理解しやすい。
詳細
- SPA の内部遷移では、JavaScript が History API で URL を変更し、
location.pathname を見てどの画面を描画するかを決める。
- 一方で、ブラウザから深い URL を直接開いたとき最初にリクエストを受けるのは配信サーバであり、対応する実ファイルがなければそのまま 404 になる。
- そのため、静的ホスティングでは catch-all rewrite を使って
index.html を返し、返却後にクライアント側の router が現在のパスを解釈する形にする。
/* /index.html 200 のような設定は redirect ではなく rewrite に近く、URL を保持したままエントリ HTML を返す点が重要。#/path のような hash routing はサーバ側に見えるパスが / のままなので、この種の fallback 要件が緩くなりやすい。
参考リンク
メタ情報
- ツール: Codex
- 関連技術: History API, SPA routing, static hosting, Cloudflare Pages, redirects, fallback