037. hx-push-url（アドレスバーのURLも一緒に更新する）

原理：部分更新に「住所」を与える

見た目だけが変わる「不安」を解消

HTMXの得意技は、ページの一部だけをサッと書き換えること。しかし、これだけでは困ることが一つあります。例えば、「最新ニュース」ボタンを押して画面の中身が最新版に変わったとしても、ブラウザのアドレスバー（URL）が「トップページのまま」だったらどうでしょう？

ユーザーがそのページを誰かに教えようとURLをコピーしても、相手には最新ニュースが表示されません（トップが表示される）。
ブラウザを更新（リロード）すると、せっかく表示したニュースが消えて、再びトップに戻ってしまいます。
前回の記事で触れた「戻るボタン」も、URLが変わらなければ機能しません。

hx-push-url（プッシュ・ユーアールエル）属性は、画面の部分更新と同時に、ブラウザのアドレスバーにあるURLを新しく「書き換え、履歴に追加」するための魔法のスイッチです。これを使うことで、部分更新でありながら、ユーザーには「新しいページに移動した」という確信と、再訪のための「住所」を提供できます。

実践：共有可能で、戻れる部分更新

1. タブの切り替えにURLを与える

「商品詳細」や「口コミ一覧」のタブを切り替えたときに、URLもそれらしく変える例です。

<!-- 
  hx-get: 詳細情報を取得
  hx-target: 中央のメインエリアに流し込む
  hx-push-url: URLを "/products/123/reviews" に書き換える（履歴に残る）
-->
<button hx-get="/api/products/123/reviews" 
        hx-target="#tab-content" 
        hx-push-url="/products/123/reviews">
    口コミを見る
</button>

2. 自動的にサーバーのURLを使用する（true）

いちいちURLを手書きしなくても、hx-get で指定したURLをそのままアドレスバーに反映させることもできます（これが一番便利です！）。

<nav hx-push-url="true">
    <a href="/faq" hx-target="#main">FAQ</a>
    <a href="/contact" hx-target="#main">お問い合わせ</a>
</nav>

※ hx-push-url="true" により、クリックした href の値がそのままURLとして履歴に刻まれます。

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

意義の確認: 「この更新後の状態は、URLとして保存して後から見られるようにすべきか？」を考えます。
設置: hx-push-url="true" または hx-push-url="/具体的なURL" と書きます。
サーバー側の配慮: ここが重要です！URLを書き換えるということは、ユーザーがそのURLを直接叩いて（リロードして）来る可能性があるということです。その際、サーバーは「部分的なパーツ」ではなく「ページ全体」を返せるように設計しておく必要があります。

比較：通常リンク vs hx-push-url

通常のaタグリンク

体験: 一瞬白くなり、再読み込みが発生。
結果: URLは変わる。

HTMXの hx-push-url

体験: ページ遷移なしで、サッと中身が変わる（爆速）。
結果: あたかもページ移動したかのようにURLが変わる。 戻るボタンも効く。

まさに、通常のリンクの「URLが変わる良さ」と、AJAXの「チラつかない快適さ」のいいとこ取りです。

まとめ：初心者のための「信頼されるURL」

hx-push-url は、あなたのWebアプリを「ただの中身の入れ替え」から「正しいWebの作法」へと昇華させる重要な属性です。

「true」を味方に: ほとんどのケースで hx-push-url="true" を使えば、自然な動作になります。
リロードの恐怖に備える: 「URLが変わる＝リロードされる可能性がある」ことを常に意識し、サーバー側でフルページ表示の準備をしておくのがプロの仕事です。
シェアの喜び: ユーザーが、あなたのアプリの「今の状態」をSNSやブックマークで保存できるようにしてあげましょう。

部分更新に、誇り高い「住所（URL）」を。hx-push-url を使って、ユーザーが迷うことなく、何度でも戻ってこれるWebアプリを構築してください。次の記事では、履歴を残さずにURLだけをこっそり直す「hx-replace-url」（038. hx-replace-url）をご紹介します。