HTMLツール

無料 Navigation APIルータースニペットジェネレーター

SPA向けのNavigation APIルーティングスニペットを生成します。History API不要。

ツールを読み込み中...

Navigation APIルータースニペットジェネレーターとは

Navigation APIは、navigation.addEventListener('navigate', ...)ハンドラを通じてナビゲーションをインターセプトするモダンブラウザAPIです。History APIが後方/前方移動でのみpopstateイベントを発火するのに対し、Navigation APIはリンククリック、フォーム送信、プログラムによるナビゲーション、ブラウザの戻る/進むを含むすべてのナビゲーションタイプをキャプチャします。View Transition APIと統合してアニメーション付きのページ切り替えを実現し、組み込みのスクロール復元とナビゲーションライフサイクル管理を提供します。

クイックアンサー

Navigation APIを使用してクライアントサイドルーティングのJavaScriptスニペットを生成します。URLPatternによるルートパターン、リンククリックとブラウザナビゲーションのインターセプトオプション、アニメーション付きページ遷移のためのView Transition統合、スクロール復元動作を設定できます。Navigation API（Chrome 102+、Safari 16.4+、Firefox 131+）は、統一されたnavigateイベント、キャンセル用のAbortSignal、組み込みのView TransitionサポートでHistory APIを置き換えます。

Last updated: 2026-05-31

制限事項

Navigation APIはまだすべてのブラウザでサポートされているわけではありません。Chrome 102+、Edge 102+、Safari 16.4+、Firefox 131+がサポートしています。古いブラウザではHistory APIまたはサーバーサイドナビゲーションへのフォールバックが必要です。
View Transition統合にはNavigation APIとView Transition APIの両方のサポートが必要です。クロスドキュメントビュー遷移はView Transition APIの新しい機能であり、Navigation APIのベースライン以上の追加ブラウザ要件があります。
Navigation APIは、レイジーローディング、コード分割、データキャッシングなどのアプリケーションレベルの問題を処理しません。これらはルートハンドラ内で別途実装する必要があります。

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

使い方

URLPatternオブジェクトまたは単純なパスマッチャーを使用してルートパターンを定義します。各ルートには、コンテンツを取得してDOMを更新するハンドラ関数を設定できます。
ナビゲーションインターセプトオプションを設定します。すべてのナビゲーション、同一オリジンのナビゲーションのみ、または特定のナビゲーションタイプ（push、replace、reload、traverse）をインターセプトできます。
navigateハンドラ内でdocument.startViewTransitionを使用して、ページ状態間のアニメーション遷移を有効にします。
スクロール復元動作を選択します。前回のスクロール位置への自動復元、各ナビゲーションでトップにスクロール、またはルートごとのカスタムスクロールターゲット。

主な用途

適切な戻る/進むナビゲーションをサポートし、同時ナビゲーションリクエスト間の競合状態がないシングルページアプリケーションルーターを構築します。
プログレッシブに強化されたクライアントサイドナビゲーションを備えたマルチページアプリケーションを作成し、非サポートブラウザでは完全なページロードにグレースフルデグラデーションします。
Navigation APIのnavigateハンドラ内でView Transition APIを使用して、ビュー間のアニメーション付きページ遷移を実装します。

用途

使用例

例

ルートパターンとビュー遷移を備えたSPA

ドキュメントサイトで、アニメーション付き遷移を伴うクライアントサイドナビゲーションを実装します。Navigation APIを使用してリンククリックをインターセプトし、各セクションのURLPatternにマッチさせ、fetch()を呼び出してコンテンツをロードし、DOM更新をdocument.startViewTransitionでラップしてクロスフェードアニメーションを実現し、navigation.updateCurrentEntry({ state })を呼び出してルートごとの検索/フィルター状態を永続化します。

例

プログレッシブエンハンスメントを備えたマルチページアプリ

コンテンツサイトで、完全なSPAに再構築せずに高速なナビゲーションを実現します。navigation.addEventListener('navigate', ...)で同一オリジンナビゲーションをインターセプトし、新しいナビゲーションが開始されたら現在のfetchを中断し（競合状態を防止）、メインコンテンツエリアを更新し、JavaScriptが無効またはNavigation APIが利用不可の場合は完全なページロードにフォールバックするコードを生成します。

よくあるミス

event.preventDefault()を呼び出さずにevent.intercept()を呼び出す。navigateイベントは、ブラウザが独自のナビゲーションを開始するのを防ぐために同期的にインターセプトする必要があります。ハンドラでは必ずpreventDefault()とintercept()の両方を呼び出してください。
event.signalのアボートコントローラを無視する。Navigation APIは各navigateイベントにAbortSignalを提供します。長時間実行されるfetch操作はevent.signalをリッスンして、新しいナビゲーションが開始されたときに古いリクエストをキャンセルし、競合状態を防止する必要があります。
traversalタイプのナビゲーションの処理を忘れる。戻る/進むナビゲーションはnavigationTypeが'traverse'のnavigateイベントを発火します。ルートはpush/replaceとtraverseを区別してスクロール位置を正しく復元し、キャッシュされたコンテンツの再取得を避ける必要があります。

検証

ブラウザコンソールを開き、リンククリックを使用してルート間を移動します。各navigateイベントが正しいnavigationType（push、replace、traverse）で発火し、完全なページリロードなしでDOMが更新されることを確認します。
Networkタブを開き、ルートナビゲーションを開始してから素早く別のルートに移動します。最初のリクエストがAbortSignalを介してキャンセルされていることを、Networkタブで中断またはキャンセルされたHTTPリクエストを確認して検証します。

FAQ

Navigation APIルータースニペットジェネレーターのFAQ

Navigation APIはSPAルーティングにおいてHistory APIとどう違いますか？

History APIは後方/前方移動でのみpopstateイベントを発火します。リンククリック、プログラムによるpushState/replaceState、リロードはキャプチャされないため、これらすべての経路を手動でインターセプトする必要があります。Navigation APIはすべてのナビゲーションタイプ（push、replace、reload、traverse）に対して単一のnavigateイベントを発火し、さらにキャンセル用のAbortSignal、アクセシビリティ用のFocusChangedイベント、組み込みのビュー遷移とスクロール復元サポートを提供します。

Navigation APIは古いブラウザにポリフィルできますか？

Navigation APIはブラウザのナビゲーションエンジンとの深い統合を必要とするため、完全なポリフィルは存在しません。サポートしていないブラウザ（Chrome < 102、Safari < 16.4、Firefox < 131）では、SPAは手動のリンククリックインターセプトを伴うHistory APIにフォールバックするか、完全なサーバーサイドナビゲーションにフォールバックする必要があります。生成されたスニペットには、この目的のための機能検出ガードが含まれています。

View TransitionはNavigation APIとどのように連携しますか？

navigateイベントハンドラ内で、event.intercept()を呼び出した後、DOM更新コードをdocument.startViewTransition(() => { ... })でラップします。ブラウザは古いページ状態と新しいページ状態をキャプチャし、それらの間にクロスフェードアニメーションを作成し、トランジションコールバック内でDOMを更新します。Navigation APIのintercept()のviewTransitionオプションは、サポートブラウザでこれを自動的に処理できます。