079. hx-swap-oob（流れ弾更新：サーバー主導で、予期せぬ場所を書き換える）

原理：サーバーから放たれる「追尾ミサイル」

ターゲットの外側まで手を伸ばす

これまでのHTMXは「ここをクリックしたから、ここを変える（hx-target）」という、1対1の非常にシンプルなルールで動いてきました。しかし、現実のアプリケーションでは「ここを変えたいけれど、ついでに画面の全然関係ない場所にある合計金額や、通知ランプも変えてほしい」ということがよくあります。

hx-swap-oob（スワップ・アウト・オブ・バンド：「枠外更新」）は、サーバーからのレスポンスHTMLそのものに「自分はあそこの場所へ届けてほしい！」という特殊なタグを付けておくことで、ターゲット以外の場所を自由自在に書き換える仕組みです。

ターゲットを狙った弾が、ついでに他の的も当てる。そんな「流れ弾」のような、でも計算された更新術です。

実践：一粒で二度美味しいレスポンス

1. カートへの追加と、合計金額の同時更新

「カートに入れる」ボタンを押したとき、ボタンの表示を変えるだけでなく、右上のカートアイコンの数字も一度に更新する例です。

<!-- button.html -->
<button hx-post="/add-to-cart/101">カートに入れる</button>

<!-- サーバーが返すHTMLのイメージ -->
<!-- 1. メインのターゲット（ボタン自体など）への返信 -->
<span>追加しました！</span>

<!-- 2. 全然別の場所にある要素への追尾ミサイル -->
<div id="cart-count" hx-swap-oob="true">
    3個 <!-- この中身が、画面上の id="cart-count" の場所へ自動で飛んでいく -->
</div>

2. 「hx-swap-oob="true"」という魔法の言葉

サーバーが返すHTMLの中に、hx-swap-oob="true" という属性を持つ要素が含まれていると、HTMXはそれを「通常の入れ替え用パーツ」とは別物として扱います。そして、そのタグに付いている IDと同じIDを持つ場所 を画面から探し出し、そこを勝手に上書きしてくれます。

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

ついでに変えたい場所の特定: IDを付けておきます（例：<div id="status">）。
サーバー側のレスポンス作成:
- 本来の返信用HTML
- hx-swap-oob="true" を付けた、更新したい場所の新しいHTML これらをまとめて一つのレスポンスとして返します。
自動配送: HTMXがレスポンスの中身をスキャンし、oob 指定があるものを適切な場所へ配送します。

比較：hx-select-oob vs hx-swap-oob

hx-select-oob (078)

主導権: ブラウザ（HTMLを書いているあなた）にある。
特徴: 届いた大きなHTMLから「どう抜き出すか」を指定する。

hx-swap-oob (今回)

主導権: サーバー（バックエンドのプログラム）にある。
特徴: サーバー側で「ここも変えといてね」というパーツを、属性付きで送り込む。

まとめ：初心者のための「マルチ・アップデート」

hx-swap-oob は、HTMXにおいて最も「魔法」に近い機能の一つです。

サーバーの裁量で決める: 「もし在庫が切れたなら、こっちのボタンも無効化しよう」といった、サーバー側の最新状況に合わせた柔軟な画面更新が可能になります。
画面全体の連動性: ヘッダー、フッター、サイドバー。どこにあっても、IDさえあれば一瞬で書き換えられます。
使いすぎに注意: あちこちが一度に変わりすぎると、ユーザーは何が起きたか分からなくなります。本当に連動が必要な場所に絞って使いましょう。

ターゲットの枠を超えて、画面を意のままに。hx-swap-oob を使いこなして、複数のパーツが完璧に同期する、プロフェッショナルなWebアプリを実現してください。次の記事では、これらの「枠外更新」の背後にある基本原理「Out of Band Updates」（080. Out of Band Updates）を総括します。