Navigation API：モダンブラウザー
Navigation APIでナビゲーションを介入・カスタマイズします
「Navigation API：モダンブラウザー」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
現代的な代替手段
Navigation API は History API を置き換える、より新しく強力な API です。ナビゲーションをインターセプト、キャンセル、待機が可能な第一級オブジェクトとして扱います。これは、2024 年時点で SPA が実際に必要としているルーティング処理に近い仕組みです。
window.navigation オブジェクト
window.navigation では、エントリ一覧、現在のエントリ、navigate イベントを利用できます。navigation.entries() は現在の履歴にあるすべてのエントリを返し、navigation.currentEntry はアクティブなエントリを示します。History API の分かりにくい length や読み取り専用の state と比較すると分かりやすいでしょう。
navigate イベント
navigation.addEventListener("navigate", handler) を監視すると、同一ドキュメント内のあらゆるナビゲーション（リンクのクリック、フォーム送信、戻る・進む操作、プログラムによるナビゲーション）を横取りできます。これにより、クリックの横取り、popstate、フォーム送信のリスナーを個別に組み合わせる必要がなくなり、1 つのフックで処理できます。
navigation.addEventListener("navigate", (e) => {
if (!e.canIntercept) return;
e.intercept({
handler: async () => {
await renderPage(new URL(e.destination.url).pathname);
}
});
});intercept と handler
e.intercept({ handler }) を呼び出すと、ナビゲーションを引き受けます。handler は Promise を返します。handler が保留中の間、ナビゲーションは「進行中」であり、URL はすでに更新されています。これにより、URL の変更とビューの描画がずれるという従来の競合状態を統一的に扱えます。
canIntercept の確認
すべてのナビゲーションを横取りできるわけではありません（クロスオリジンへの遷移やダウンロードなど）。intercept を呼び出す前に e.canIntercept を確認してください。この防御的なガードは 1 行で記述でき、SPA のナビゲーションと実際のクロスオリジンへの離脱を区別します。
navigation.navigate メソッド
navigation.navigate(url, options) はクリックと同等のナビゲーションをプログラムで実行します。返されるオブジェクトには committed と finished の Promise があり、URL の変更や handler の完全な完了を待機できます。
エントリの state とキー
各ナビゲーションエントリには、再読み込みをまたいで安定した key と、セッションごとの id があります。永続的な状態（保存したスクロール位置やフォームの下書きなど）には key を使用し、一時的な状態には id を使用します。History API で扱える state は分かりにくい単一のデータだけでした。
戻る操作と進む操作
navigation.back() と navigation.forward() は traverseTo の便利なラッパーです。どちらも同じ { committed, finished } の Promise ペアを返すため、後続の処理を行う前に戻るナビゲーションの完了を待機できます。
ナビゲーションの中止
最初のリンクのレンダリング中にユーザーが2つ目のリンクをクリックすると、進行中のナビゲーションを中止できます。ハンドラーは e.signal を介して AbortSignal を受け取るため、それを fetch 呼び出しに渡すと、新しいナビゲーションの開始時に古い処理がキャンセルされます。
e.intercept({
handler: async () => {
const data = await fetch(url, { signal: e.signal });
renderPage(await data.json());
}
});History だけではいけない理由
History API は動作しますが、扱いにくい面があります。状態の変更とビューのレンダリングが分離され、クリック処理を手動で行う必要があり、複数のリスナー間の連携も壊れやすく、スクロール位置の復元も不完全です。Navigation API は最初から SPA のニーズを想定して設計されており、これらをすべて解決します。
ブラウザーの対応状況
Chrome と Edge は Navigation API に対応しています。Safari と Firefox の対応は遅れています（2026年初頭時点）。そのため、機能検出（"navigation" in window）を行い、利用できない場合は History + popstate にフォールバックするコードを提供してください。SvelteKit や TanStack Router などのフレームワークは、すでにこの検出処理をラップしています。
導入するタイミング
Chromium を優先するユーザーを対象とした新規プロジェクトでは、History へのフォールバックを受け入れたうえで、今すぐ導入してください。幅広いユーザーを対象とする一般公開サイトでは、Safari と Firefox が対応するまで待つか、両方を抽象化するルーターライブラリを使用してください。よりシンプルな API を利用できる価値は、待つだけのことがあります。
理解度チェック
History API で popstate と手動のクリックインターセプトを組み合わせる方法と比べて、Navigation API の navigate イベントにはどのような主な利点がありますか？
まとめ
Navigation API は、intercept と abort のセマンティクス、エントリごとに安定したキー、非同期ハンドラーの await を備えた単一の navigate イベントに SPA のナビゲーションを統合します。History + popstate + クリックインターセプトを組み合わせた継ぎはぎの実装を置き換えられます。現在は Chromium 系ブラウザーで対応されています。Safari と Firefox が対応するまでは、機能検出を行い、クロスブラウザー対応のコードでは History にフォールバックしてください。
よくある質問
「Navigation API：モダンブラウザー」レッスンは無料ですか？
はい。「Navigation API：モダンブラウザー」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「Navigation API：モダンブラウザー」で何を学びますか？
Navigation APIでナビゲーションを介入・カスタマイズします ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「Navigation API：モダンブラウザー」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- pushStateとreplaceState
- popstateイベント
- ハッシュベースとパスベースのルーティング
- Navigation API：モダンブラウザー