もうルーターはいらない？Navigation APIで創る “素の”クライアントサイドルーター

window.navigation.addEventListener('navigate', (event) => {
  // 外部サイト・ダウンロード・インターセプト不可・ハッシュ遷移は素通し
  const url = new URL(event.destination.url);
  if (
    url.origin !== location.origin ||       // クロスオリジン判定
    event.downloadRequest !== null ||       // ダウンロード判定
    event.canIntercept === false ||         // インターセプトできない遷移を判定
    event.hashChange                        // ハッシュ(#fragment)変更のみの遷移を判定
  ) {
    return;
  }

  // リンクのクリックやバック/フォワードボタンでの遷移を横取りする
  event.intercept({
    async handler() {
      // ページのコンテンツを非同期で取得
      // この例では、/about.html のような静的ファイルを想定
      const response = await fetch(url.pathname);
      const content = await response.text();

      // コンテンツをレンダリングする
      document.getElementById('content').innerHTML = content;

      // タイトル更新（取得したHTMLから<title>を解析）
      const m = content.match(/<title>([^<]*)<\/title>/i);
      document.title = m?.[1] ?? '新しいページ';
    },
  });
});

const router = {
  // Navigation APIが使えるかどうかをチェック
  isSupported: 'navigation' in window,

  init() {
    if (this.isSupported) {
      window.navigation.addEventListener('navigate', (event) => {
        // ナビゲーションイベントを横取り
        const url = new URL(event.destination.url);
        if (url.origin !== location.origin) {
          return;
        }
        event.intercept({
          async handler() {
            // SPAのルーティング処理
            await this.handleRoute(url.pathname);
          },
        });
      });
    } else {
      // 非対応ブラウザ用のフォールバック処理
      // 従来のHistory APIやaタグのクリックイベントで対応
      document.body.addEventListener('click', (event) => {
        const anchor = event.target.closest('a');
        if (
          anchor &&
          anchor.origin === location.origin &&
          !anchor.hasAttribute('download') &&
          anchor.target !== '_blank' &&
          !event.defaultPrevented &&
          event.button === 0 &&
          !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey
        ) {
          event.preventDefault();
          history.pushState({}, '', anchor.href);
          this.handleRoute(anchor.pathname);
        }
      });

      // 戻る/進むボタンに対応
      window.addEventListener('popstate', () => {
        this.handleRoute(location.pathname);
      });
    }
  },

  async handleRoute(pathname) {
    const routeContent = await this.fetchContent(pathname);
    document.getElementById('content').innerHTML = routeContent;
  },

  async fetchContent(pathname) {
    // ページコンテンツを取得する関数
    // ...
  },
};

router.init();