htmxのhx-swap-oobとhx-select-oobを理解する

エキサイト株式会社エンジニアの佐々木です。htmxのhx-swap-oobとhx-select-oobを理解します。

前提
hx-swap-oob
hx-select-oob
まとめ
最後に

前提

HTML内にhtmxをロードしてください。

<script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>

hx-swap-oob

hx-swap というものがあります。これは、戻り値をどのような形で呼び出し元のHTMLに適用するかというものになります。hx-swap-oobは、そこでは記述できないときに使用するアトリビュートになります。

では、hx-swap-oob はどこに記述すればいいか？ということですが、これはレスポンス側に記述します。

リクエスト側のHTMLには、通常通りサーバのエンドポイントを指定するのと、レスポンスされたHTMLのどの要素を使うかを指定します。(指定しなければ、戻り値のHTMLがすべて適用されます)

<!-- リクエスト側のHTML -->

<div>
  フォーム
  <button hx-get="sendRequest" hx-target="OuterHTML" hx-select="#response">送信ボタン</button>
</div>

<div id="status">結果: 未送信</div>

レスポンス側のHTMLでは、　id="status" の更新も行いたいとしましょう。その場合は、 hx-swap-oob="true"をアトリビュートに定義すると、リクエスト側のHTMLの中身が書き換わります。

<!-- レスポンス側のHTML -->

<div id="reponse">レスポンスを受け付けました</div>

<div id="status" hx-swap-oob="true">結果: OK</div>

hx-select-oob

hx-selectは、戻り値のHTMLのどの属性を使用するかというアトリビュートになります。hx-swap,hx-target,hx-selectは協調して動作します。そので指定できない他の要素をhx-select-oobで記述することができます。hx-select-oob の記述箇所は、リクエスト側のHTMLになります。レスポンス側のHTMLの中身をCSS セレクターを使用して取り出す機能になります。

リクエスト側のHTMLには、hx-getで通常通りサーバのエンドポイントを指定するのと、hx-selectでレスポンスされたHTMLのどの要素を使うかを指定します。hx-select-oobでは、レスポンスされたHTMLのどの部分を使うかを指定できます。

<!-- リクエスト側のHTML -->

<div>
  フォーム
  <button hx-get="sendRequest" hx-target="OuterHTML" hx-select="#response" hx-select-oob="status">送信ボタン</button>
</div>

<div id="status">結果: 未送信</div>

レスポンス側のHTMLは特別なことは何も行いません。

<!-- レスポンス側のHTML -->

<div id="reponse">レスポンスを受け付けました</div>

<div id="status">結果: OK</div>

まとめ

hx-swap-oobとhx-select-oobは、同じような機能でリクエスト側とレスポンス側に記述するかの違いくらいです。リクエスト側で判定できるのであればhx-select-oob、レスポンス側で判定するならhx-swap-oobを使用する感じです。主にメッセージ処理等で便利に使えますので利用していければと思います。