コンテンツにスキップ

024. hx-swap-oob（Out of Band：範囲外の同時更新）

原理：一石多鳥の「マルチ更新」マジック

「一度の通信で一箇所」という限界を越える

HTMXの基本は、「一つのボタンを押すと、一つのターゲットが更新される」というものです。これはシンプルで分かりやすいのですが、実際の高度なアプリでは少し物足りない場面が出てきます。

例えば、「新しいメッセージを送信した時」を想像してください。 1. 画面の中央にある「メッセージ履歴」の末尾に、新しい発言を追加したい。 2. それと同時に、画面の右上にある「未読数バッジ」の数字を「1」に増やしたい。 3. さらに、入力欄のテキストを「空っぽ」にしてリセットしたい。

このように、「本来の目的地以外にも、あちこち同時に更新したい」というわがままを叶えてくれるのが hx-swap-oob（Out of Band：範囲外）という機能です。

サーバーから届く「複数の贈り物」

通常、サーバーは hx-target で指定された場所に届けるためのHTMLだけを返します。 しかし、hx-swap-oob="true" という魔法の言葉が書かれたタグをレスポンスに混ぜることで、HTMXはそれを「あ、これはターゲット用じゃなくて、指定されたIDの場所に直接届ける別便（特急便）だな！」と判断し、自動的に画面のあちこちへ配ってくれるのです。

これを使えば、複雑なJavaScriptを書かなくても、1回のクリックで画面全体をダイナミックに、かつ整合性を保って更新することが可能になります。

実践：1回のレスポンスで複数の場所を書き換える

1. メッセージ送信とバッジの同時更新

サーバーが返すHTMLの中に、メインの更新内容と「別便（OOB）」の中身を共存させる例です。

【ボタン側の記述】 

<button hx-post="/send-message" hx-target="#history" hx-swap="beforeend">
  送信
</button>

【サーバー側が返すHTML（ここがポイント！）】 

<!-- これは本来の目的地 #history の末尾に追加される -->
<div>新しいメッセージが届きました！</div>

<!-- これは ID="badge" の場所を、勝手に（OOBで）探し出して書き換える -->
<span id="badge" hx-swap-oob="true">1</span>

2. リストの追加と合計金額の更新

ショッピングカートなどで、項目を足すと同時に「合計」も連動させる高度なUXです。

<!-- サーバーからのレスポンス -->
<li hx-swap-oob="afterbegin:#cart-items">
  新しい商品：¥1,000
</li>

<div id="total-price" hx-swap-oob="true">
  合計：¥15,000
</div>

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

  1. メインの送信: 普通に hx-target を決めて通信を行います。
  2. サーバー側の出番: レスポンスのHTMLの中で、別途更新したい要素に hx-swap-oob="true" を付与し、さらにその要素に画面側と同じ id を持たせます。
  3. 自動配送: HTMXがレスポンスを受け取ると、OOB属性がついた要素を抜き出し、指定されたIDの場所へ勝手に届けてくれます。

比較：JSでの複数要素更新 vs HTMXのOOB更新

JavaScript + JSONの場合

const data = await res.json();
// 一つずつ手動で書き換える
document.getElementById('history').append(data.msgHtml);
document.getElementById('badge').innerText = data.newCount;
document.getElementById('input').value = '';
画面が増えるたびに「どのIDをどういじるか」というJSの指示を一つずつ足していかなければならず、コードがどんどん肥大化します。

HTMXの hx-swap-oob

サーバー側で「ついでにこれも送っておこう」とHTMLタグを足すだけです。 ブラウザ側（フロントエンド）のコードは一切変わりません。アプリがどれだけ複雑になっても、フロントエンドは「1件の通信」というシンプルな形を維持したまま、豊かな表現力を手に入れることができます。

まとめ：初心者のための「連動」の楽しみ

hx-swap-oob をマスターすると、あなたのWebアプリはプロが作ったような「隙のない」仕上がりになります。

  • ついでを有効活用: メインの更新の「ついで」に通知を出したり、ステータスを更新したりする癖をつけましょう。
  • IDの管理はしっかりと: OOBはIDを探して着弾するため、画面側のIDとサーバー側から送るIDを一致させておくことが唯一の約束事です。
  • 魔法を使いすぎない: あまりにあちこちを同時に更新しすぎると、ユーザーが「何が起きたか」を追えなくなることもあります。あくまでユーザーの利便性を最優先に。

目的地は一つだけじゃない。hx-swap-oob という「別便」を使いこなして、画面のあちこちに心地よい変化を届けてください。次の記事では、届いた大きなHTMLの中から、必要なパーツだけを「つまみ食い」する選別術「hx-select」（025. hx-select）をご紹介します。