113. hx-replace-url（URLを置き換える：履歴を汚さず、住所だけを正す）

原理：履歴の「上書き」

「戻る」ボタンを邪魔したくない情報の更新

前回の hx-push-url は、履歴に新しいページを「追加」しました。しかし、時には「URLは今の中身に合わせたいけれど、わざわざ別ページとして履歴に残すほどではない」という場面があります。 - 検索フィルターをカチカチと切り替えている最中の状態。 - 画面を下にスクロールして、自動的に「今いる章」のURLに番号が変わるとき。これらをすべて「Push（追加）」してしまうと、ユーザーが「戻る」ボタンを押したときに、一歩前の微細な状態に戻るだけで、本来戻りたかった「前のページ」に中々たどり着けなくなります。

「hx-replace-url（エイチエックス・リプレイス・ユーアールエル）」は、「今の履歴を新しいURLで『上書き』し、履歴の数（スタックの高さ）は増やさない」ための属性です。

実践：スマートなURLの状態維持

1. フィルターの状態をURLに反映する

商品の絞り込み（カテゴリ変更など）をするとき、履歴を増やさずに現在のURLを正しく保つ例です。

<!-- カテゴリを切り替える -->
<select name="category" 
        hx-get="/shop/filter" 
        hx-target="#item-list" 
        hx-replace-url="true">
    <option value="all">すべて</option>
    <option value="electronics">家電</option>
    <option value="books">本</option>
</select>

※ これにより、URLは /shop/filter?category=books に変わりますが、戻るボタンを押すと「ショップに来る前のページ」に一気に戻れます。

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

「一時的な状態」を探す: 絞り込み、並び替え、モーダルの開閉など、「戻るボタンで戻らなくてもいいけれど、リロードした時はこの状態を保っていてほしい」場所を見つけます。
属性の追記: hx-replace-url="true" または hx-replace-url="/新しいURL" を書きます。
動作の確認: URLが変わること、そして「戻る」ボタンを押したときに期待通りの「大きな戻り」ができるかを確認します。

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

hx-push-url (Push)

意味: 新しいページへの「移動」。
履歴: 増える。
用途: 記事を読む、検索結果ボタンを押す。

hx-replace-url (Replace)

意味: 現在のページ内の「微調整」。
履歴: 増えない（今のが書き換わるだけ）。
用途: ソート順の変更、フィルタリング、ページネーション。

まとめ：初心者のための「履歴の節約」

hx-replace-url は、ブラウザの履歴を綺麗に保ちつつ、URLの有用性を維持するための「プロの気遣い」です。

「共有」と「戻る」のバランス: URLさえ正しくなっていれば、ユーザーはそのURLをコピーして誰かに送ることができます。hx-replace-url を使えば、履歴を汚すことなく、この「共有可能性」を確保できます。
SPAらしいスムーズさ: ユーザーが知らぬ間にURLが「今の状態」に寄り添って変わっていく。このさりげなさが、アプリの高級感を生みます。
迷ったら「Replace」: 履歴が増えすぎて困ることは多いですが、置き換えて困ることは稀です。細かい状態変化には、積極的にこちらを使いましょう。

履歴を磨き、使い勝手を守る。hx-replace-url を使いこなして、便利さとシンプルさが究極の次元で両立した、気の利いたWebアプリを構築してください。次の記事では、履歴を制する者が必ず突き当たる壁「戻る・次へへの対応（114. Back/Forward Support）」をご紹介します。