112. hx-push-url（URLを履歴に保存する：画面遷移を「本物」にする）

原理：URLバーという名の「日記帳」に書き込む

画面を書き換えたら、URLも書き換える

HTMXで「商品一覧」から「商品詳細」に画面を切り替えたとき、画面の中身は変わっても、ブラウザの上のURLバーが「一覧」のままでは困ります。「hx-push-url（エイチエックス・プッシュ・ユーアールエル）」は、「指定した通信が成功したとき、ブラウザのURLも更新し、さらに履歴に新しい一行（日記）を追加する」ための属性です。

これを使うことで、ページをリロード（再読み込み）することなく、あたかも新しいページに移動したかのような「正式な履歴」を作ることができます。

実践：滑らかな遷移と「戻る」ボタンの両立

1. URLを自動で更新する

通信先のURLをそのまま新しいURLとして採用する、最もシンプルな例です。

<!-- 
  hx-push-url="true" : 
  hx-get で送った "/blog/article-1" が新しいURLとしてブラウザに残ります。
-->
<a hx-get="/blog/article-1" 
   hx-target="#main-content" 
   hx-push-url="true">
    記事を読む
</a>

2. 任意のURLを指定する

通信する場所と、ブラウザのURLバーに出したい住所を分けたい場合の指定です。

<button hx-get="/api/search?q=apple" 
        hx-target="#results" 
        hx-push-url="/search/results?q=apple">
    検索実行
</button>

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

「移動」として扱いたいボタンを探す: 検索、詳細表示、タブ切り替えなど、後で戻ってきたいアクションを選びます。
属性の追記: hx-push-url="true" または hx-push-url="/好きなパス" を書きます。
結果の確認: ボタンを押したあと、URLが変わること、そしてブラウザの戻るボタンが有効（青くなる）ことを確認します。

比較：hx-boost vs hx-push-url

hx-boost (024.)

特徴: 既存の <a> タグを全てHTMX化し、URL更新も履歴保存も「自動で全部」やってくれる。
用途: サイト全体を高速化したいとき。

hx-push-url (今回)

特徴: 履歴を残すかどうかを「一つひとつのボタンごと」に細かく選べる。
用途: 複雑なダッシュボードなどで、特定の操作だけを履歴に残したいとき。

まとめ：初心者のための「履歴の積み方」

hx-push-url は、あなたのアプリに「時間の流れ」を作ります。

「true」は魔法の言葉: 迷ったらまずは hx-push-url="true" と書いておけば、HTMXがよしなにやってくれます。
履歴の増やしすぎに注意: ページ内の小さなタブ（「説明」「口コミ」など）を切り替えるたびに履歴を作ると、戻るボタンを連打しなければならなくなり、逆に使いにくくなることがあります。本当に「一つの大きな移動」と言える場面に絞りましょう。
更新されるのはURLバーだけ: 実際の遷移はHTMXによる部分更新なので、ページのヘッダーやロゴなどはそのまま残ります。この一瞬の「静止」が、SPAらしい美しさを生みます。

URLを刻み、記憶を繋ぐ。hx-push-url を使って、高速な部分更新とWeb標準の履歴管理が完璧に調和した、プロフェッショナルなナビゲーションを実現してください。次の記事では、履歴を積み上げずにURLだけを変える「hx-replace-url（113. hx-replace-url）」をご紹介します。