121. Navigation Events（遷移プロセスの監視：移動の「始まり」から「終わり」までを見守る）

原理：Webサイトの「移動」を分解する

目に見えない変化の瞬間を捕まえる

HTMXでの「ページ遷移（的な部分更新）」は、実はいくつもの細かいステップが連なって起きています。 1. ボタンが押される（開始）。 2. URLが変わる（履歴の更新）。 3. サーバーからデータが届く（到着）。 4. 画面が書き換わる（適用）。 5. 履歴の保存が終わる（完了）。

「ナビゲーション・イベント（Navigation Events）」とは、この一連のステップごとにHTMXが発する「信号」のことです。これらを監視することで、「移動が始まったら画面を暗くする」「移動が終わったらページの一番上を見る」といった、非常に細やかな制御が可能になります。

実践：スムーズな移動の「伴走」

1. 履歴の復元を察知する（htmx:pushedIntoHistory）

URLが新しく履歴に積まれた瞬間を捕まえて、何かしらの処理（アナリティクスの送信など）を行う例です。

document.body.addEventListener('htmx:pushedIntoHistory', function(evt) {
    console.log("新しいページへの『移動』が履歴に記録されました：", evt.detail.path);
    // ここでGoogleアナリティクスなどに「ページ遷移したよ」と伝えることができます。
});

2. 履歴からの「戻り」を察知する（htmx:historyRestore）

「戻る」ボタンで過去の画面が再現された瞬間に発動するイベントです（118.でも触れました）。

3. ステップ・バイ・ステップ解説

「いつ」やりたいか決める: 「移動の直前」か「URLが変わった直後」か、目的に合わせてイベントを選びます。
イベントリスナーの設置: addEventListener を使って、HTMXが発するイベントを購読します。
アクションの実行: 信号を受け取った瞬間に動かしたいJavaScriptを書きます。

比較：通常のリンククリック vs HTMXイベント

通常のリンク (`<a>`)

特徴: ページ全体が消えて作り直されるため、遷移の「途中」にプログラムで割り込むのが非常に難しい。

HTMXイベント

特徴: ページはずっと生きているため、移動のプロセスを「横から眺める」ことができる。
利点: 「今まさにURLバーが変わった！」「今まさに画面の中身が貼り付いた！」といった、ミリ秒単位のタイミングで指示を出せる。

まとめ：初心者のための「プロセスの管理」

ナビゲーション・イベントを使いこなすと、あなたのWebアプリは単なるページ集ではなく、一つの精密な「機械」のように滑らかに動き始めます。

「afterDraw」を待つ: 画面が完全に書き換わり、ブラウザが描画を終えた瞬間に何かをしたいときは htmx:afterSettle や htmx:load が役立ちます。
アナリティクスとの相性: ページ全体がリロードされないHTMXアプリにおいて、これらのイベントは「どのページが何回見られたか」を正しく計測するための命綱になります。
イベント名の法則: htmx:before...（〜の前）、htmx:after...（〜の後）といった名前の法則性を覚えると、マニュアルを読むのが格段に楽になります。

移動のすべての瞬間に、意図を込める。ナビゲーション・イベントという精密な道具を使って、ユーザーを決して迷わせない、最高にスマートな画面遷移を実現してください。次の記事では、検索エンジンに正しい居場所を伝える「正規URL（122. Canonical URLs）」をご紹介します。