038. hx-replace-url（履歴を残さず、今のURLだけを書き換える）

原理：足跡を残さないスマートな更新

「戻る」必要のない変化

前回の hx-push-url は、新しいURLを「履歴（歴史）」に刻むためのものでした。これによって「戻るボタン」で前の状態に戻れるようになります。

しかし、時には「URLは今風に書き換えたいけれど、わざわざ履歴には残さなくていいな」という場面があります。 - 検索窓で一文字ずつ打つたびにURLにキーワード（?q=a, ?q=ab...）を反映させたいが、戻るボタンを一回押すたびに「一文字前」に戻るのは面倒くさい。 - フォームの入力ステップ（Step 1 → Step 2）を進めている最中に、URLだけを最新状態に合わせたい。

hx-replace-url（リプレイス・ユーアールエル）属性は、ブラウザの履歴を増やさずに、現在のアドレスバーにあるURLだけをサッと書き換えるための機能です。これを使えば、ユーザーの「戻るボタン」の歴史を汚すことなく、常に最新の住所を提示し続けることができます。

実践：さりげなく、されど正確なURL管理

1. リアルタイム検索とURLの連動

検索ワードをURLに反映させたいが、戻るボタンの利便性も守りたい場合の例です。

<!-- 
  hx-trigger: 入力が終わってから500ms待って送信
  hx-replace-url: 通信先のURL（/search?q=...）で今のURLを置き換える
-->
<input type="text" name="q" 
       hx-get="/api/search" 
       hx-trigger="keyup delay:500ms changed" 
       hx-target="#results"
       hx-replace-url="true">

※ true と書くと、hx-get で送信した先のURL（パラメータ付き）が、今のURLの上に上書きされます。

2. ステップ形式のフォーム

「次へ」を押したときに、履歴は増やさずに今のページURLだけを「Step 2」に更新する例です。

<button hx-post="/api/signup/step2" 
        hx-target="#form-container"
        hx-replace-url="/signup/step2">
    次へ進む
</button>

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

判断: 「このURLの変化は、ユーザーが『戻る』で戻りたい価値があるか？」と自問します。答えが No なら、hx-replace-url の出番です。
記述: true または "/具体的なパス" を指定します。
注意点: 履歴を「置き換える」ため、前のURLには二度と戻れなくなります（履歴から消えます）。使いどころを慎重に選びましょう。

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

hx-push-url（追加）

動作: [ 古いURL ] → [ 新しいURL ] と、歴史が積み重なる。
効果: 戻るボタンを押すと「古いURL」に戻れる。
用途: 記事詳細、別のページへの移動など。

hx-replace-url（上書き）

動作: [ 古いURL ] を [ 新しいURL ] で上書きして消す。
効果: 戻るボタンを押しても「古いURL」を飛び越して、さらにその前に戻る。
用途: 入力中、検索の途中、一時的な状態変更など。

まとめ：初心者のための「履歴の整理術」

hx-replace-url は、あなたのWebサイトの「使い勝手」を細やかに調整する属性です。

戻るボタンを「渋滞」させない: 無駄な履歴を増やさないことは、ユーザーのブラウザ操作を快適に保つための「マナー」です。
常に最新のURLを: 万が一のページ更新（リロード）に備えて、URLを最新状態に保っておくことは、hx-push-url と同じくらい重要です。
意図を明確に: 「ここは歴史に残すべきか？」という問いは、そのまま「この情報の重要度はどれくらいか？」という設計の問いに繋がります。

足跡を消しながら、常に最前線の「住所」を。hx-replace-url を使って、ユーザーの歴史をスマートに保ちながら、正確な情報へのアクセスを提供してください。次の記事では、通信の設定をより細かくチューニングする hx-request（039. hx-request）の世界をご紹介します。