【ナビゲーションエーピーアイ】

Navigation API とは？

最終更新: 2026年10月4日

💡 リンクや「戻る」の遷移を、一つの入口で扱う

ブラウザのページ遷移や履歴をJavaScriptから扱うWeb API。遷移イベントをまとめて受け取り、可能な遷移を同じ文書内の画面更新に置き換えるなど、SPAのルーティングを支える。

📌 このページのポイント

canInterceptとアプリ側の対象判定をまとめた概略。通常のinterceptのhandlerはURL・履歴の更新後に実行され、データ取得やDOM更新を行います。

ひよこ

SPAって、URLが変わるのにページ全体を読み直さないよね？

ペンギン先生

JavaScriptで画面の内容を差し替えているんだ。従来はHistory APIで履歴やURLを扱い、リンクのクリックや「戻る」への対応を組み合わせていた。Navigation APIは、こうした遷移をまとめて扱うための仕組みだよ。

ひよこ

どうやって遷移を受け取るの？

ペンギン先生

window.navigationに、addEventListener("navigate", ...)でリスナーを登録するよ。「navigate」という名前のイベントと、遷移を開始するnavigation.navigate()メソッドは別のものなんだ。

ひよこ

どんな遷移でも自由に変えられるの？

ペンギン先生

制限があるよ。event.canInterceptがtrueかを確認し、自分のアプリが扱う遷移だけevent.intercept()で置き換える。別のオリジンへの遷移などは置き換えられないので、通常のブラウザの処理に任せるんだ。

ひよこ

intercept()を呼ぶと、データも画面も自動で変わる？

ペンギン先生

データ取得やDOMの更新は自分で書くよ。intercept()に渡す通常のhandlerは、URLと履歴が更新された後に呼ばれる。その中で非同期処理と描画を行い、成功や失敗、スクロールやフォーカスの扱いも整えるんだ。

ひよこ

ルーティングライブラリは、もう不要なの？

ペンギン先生

APIは遷移の土台を提供するものだよ。URLに対応する画面を選ぶ処理やデータ取得の設計は必要で、フレームワークと組み合わせることもある。MDNでは2026年1月から主要ブラウザの新しい版で利用可能とされているけれど、古い版や個別機能の対応も確認しよう。

まとめ：ざっくりこれだけ覚えればOK！

「Navigation API」って出てきたら「ブラウザの遷移と履歴を扱い、SPAの画面更新を支えるAPI」と思えばだいたいOK！

📖 おまけ：英語の意味

「Navigation API」＝ナビゲーションAPI

💬 navigate（ナビゲートする・移動する）からきていて、ブラウザの「どこへ移動するか」をプログラムから操れる仕組み、という意味だよ

参考資料