Navigation APIについて

2025年12月6日（更新: 2025年12月7日）

Web
ブラウザ

はじめに

12月1日から25日まで、毎日1記事ずつ公開していくアドベントカレンダー企画です。この連載では、Web標準とDDDについて学びを深めていきます。第6回は「Navigation API」がテーマです。 Navigation APIとは何か、実際どのように実装するのかを学んでいきます。

Navigation APIはブラウザのナビゲーションアクションやアプリケーションの履歴を管理する機能を提供しています。Navigation APIはHistory APIの後継として実装されたAPIです。 History APIにはいくつか指摘された問題がありました。

pushStateの第二引数を削除すべきという話はWebAPI共通の悩みのような気もしています。設計したものが実際に良いものかどうかをテストするために、実世界でテストをしなければいけませんが、そのテストが終わる頃には変更出来る頃合いを過ぎていました。 WebAPIはリリースしたら全世界で利用されるので、既存機能の改善は中々難しいですね。

<html>
  <body>
    <button id="navigationBtn">navigation()</button>
  </body>
</html>
<style>
  h1 {
    color: orange;
  }
</style>
<script>
  navigation.addEventListener('navigate', (event) => {

    //　ナビゲーションが発生した際の同一ドキュメント内（SPA）ナビゲーション動作を実装するために使用される。
    event.intercept({
      handler: async () => {
        // state を設定
        navigation.updateCurrentEntry({ state: { foo: "bar" } });
      }
    });
  });

  document.getElementById('navigationBtn')?.addEventListener('click', async () => {
    // URLを/navigation/page1に設定
    await navigation.navigate('/navigation/page1/', { 
      info: "transition", 
      history: "push" 
    }).finished;

    // { foo: "bar" }
    console.log('State:', navigation.currentEntry.getState()); 
  });
</script>

クイズ

上記の実装の状態で、navigation/page1の表示対象となるpage1.htmlがある場合、画面はpage1.htmlに自動で遷移するでしょうか。

:::details 回答 URLはnavigation/page1になりますが、自動でpage1.htmlには遷移しません。理由としてはevent.intercept()がブラウザの遷移を防いでいるからです。手っ取り早くpage1.htmlを表示させたいのであれば、event.intercept()に関わる処理を削除することでpage1.htmlに遷移します。

<script>
  document.getElementById('navigationBtn')?.addEventListener('click', async () => {
    await navigation.navigate('/navigation/page1/', { 
      info: "transition", 
      history: "push" 
    }).finished;
    
    console.log('State:', navigation.currentEntry.getState());
  });
</script>

:::

まとめ

今回はHistory APIの後継として実装されたNavigation APIを紹介しました。 event.intercept()などの挙動だけでもSPA向きなAPIだなと感じています。

参考

https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigation-api https://developer.mozilla.org/en-US/docs/Web/API/NavigateEvent/intercept https://html5doctor.com/interview-with-ian-hickson-html-editor/#:%7E:text=My%20biggest%20mistake%E2%80%A6there%20are%20so%20many%20to%20choose%20from!%20pushState()%20is%20my%20favourite%20mistake https://qiita.com/Kyo18/items/bc33272725a6f4828da4 https://github.com/dvoytenko/web-history-api/blob/master/problem.md

Navigation APIについて

はじめに

Navigation APIとは

Navigation APIの実装例

クイズ

まとめ

参考