023. hx-swap（古いものと新しいものを入れ替える「作法」）

原理：「どうやって」置き換えるかというルールの決定

入れ替えのバリエーションを知る

サーバーから新しいHTMLが届き、着弾地点（ターゲット）が決まりました。最後の手順は、そこに新しいHTMLを「どうやって流し込むか」です。

「古い内容を完全に消して、新しいものにするのか？」「今あるものの後ろに、そっと付け足すのか？」「自分自身を消して、相手に成り代わるのか？」この「入れ替えの作法」を司るのが hx-swap 属性です。

この属性を使いこなすことで、単なる画面更新を超えた、流動的でリッチなユーザー体験を作り出すことができます。チャット画面なら「末尾に追加」、TODOリストなら「上に追加」、ボタンの切り替えなら「丸ごと置換」というように、場面に合わせた最適な「魔法の発動形式」を選びましょう。

実践：多様な「スワップ（交換）」モード

1. innerHTML（デフォルト）：中身を入れ替える

最もよく使われる、ターゲットの内側だけを書き換えるモードです。

<div id="display-area">
    <p>ここに古いメッセージがあります</p>
</div>

<button hx-get="/api/msg" hx-target="#display-area" hx-swap="innerHTML">
    メッセージを更新
</button>

※ hx-swap を書かない場合もこれになります。

2. outerHTML：自分自身を入れ替える

ターゲットそのものを消し去り、届いたHTMLにすり替えるモードです。

<div id="login-form">
    <button hx-post="/login" hx-target="#login-form" hx-swap="outerHTML">
        ログイン実行
    </button>
</div>

成功すると、#login-form 自体が消え、サーバーから届いた「マイページへのリンク」などに完全に置き換わります。

3. beforeend / afterbegin：リストへの追加

「無限スクロール」や「チャット」で必須の、既存の内容を壊さずに追加するモードです。

<ul id="message-list">
    <li>最初のメッセージ</li>
</ul>

<!-- 常にリストの最後に新着を追加していく -->
<button hx-get="/api/new-msg" hx-target="#message-list" hx-swap="beforeend">
    もっと見る
</button>

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

目的の確認: 「更新（既存を消す）」なのか「追加（既存を残す）」なのか、まずはここを決めましょう。
アニメーションの調整: swap:500ms のように待ち時間を足すことで、CSSアニメーションのための余韻を作ることができます。
スクロール制御: show:top や show:bottom を付け足すと、更新後に自動で画面をスクロールさせて、新しいコンテンツをユーザーの視界に入れることができます。

比較：JSでの手動DOM操作 vs hx-swapの宣言

JavaScriptでの追加処理

const list = document.getElementById('message-list');
const newItem = document.createElement('li');
newItem.textContent = receivedText;
list.appendChild(newItem); // または insertAdjacentHTML

「中身を作る」「場所を探す」「メソッド（appendChildなど）を選ぶ」という複数の手順が必要です。

HTMXの hx-swap

<button hx-swap="beforeend">

属性一つで、裏側の複雑なDOM操作をHTMXが完璧に代行します。間違いが起きにくく、コードの意図がこれ以上ないほど明確です。

まとめ：初心者のための「変容」のルール選び

hx-swap は、あなたのWebサイトに「時間」と「流れ」を生み出す属性です。

リストには beforeend: 新しいものが下に追加される自然な流れを作りましょう。
ボタンの変身には outerHTML: 「押したら消える」「別のものになる」という思い切った変化を楽しみましょう。
CSSと組み合わせる: スワップの瞬間にふわっと表示させるような演出を加えると、初心者のサイトがプロ級のアプリに化けます。

どうやって、古い自分を脱ぎ捨てるか。その「変化の形」を hx-swap で定義してください。次の記事では、自分自身の変化に紛れて、別の場所もこっそり書き換えてしまう、より高度でテクニカルな「hx-swap-oob」（024. hx-swap-oob）の世界をご紹介します。