こんにちは。エキサイトでデザイナーをしている齋藤です。
今回は、htmxでリクエスト発行前にwindow.confirmを実行して、確認ダイアログが承認された場合にのみリクエストする方法をご紹介します。
なお、本稿の内容は v2.0.4（2025年6月16日時点の最新版）のhtmxを前提としています。
htmxとは
htmxは、HTMLタグに専用の属性を記述することで、複雑なJSを記述せずにAJAXリクエストの発行を可能にするライブラリです。
マークアップの延長のような感覚でAJAXリクエストを実装できるのがhtmxの強みです。
<!-- クリックするとPOSTリクエストが発行される --> <button type="button" hx-post="/sample" hx-trigger="click" hx-target="#target" > 送信 </button> <!-- innerHTMLにレスポンスのDOMが挿入される --> <div id="target"></div>
実現したいこと
実現したいことを整理します。
JSのwindow.confirmを使用して、承認されたときにのみ処理を実行させる体験にすることもあると思います。
アクションが破壊的変更である場合に慎重な操作を促せる点から、特に管理系の機能で有用です。
以下は、HTML標準のbuttonタグと掛け合わせたwindow.confirmの実装例です。
<!-- 確認ダイアログが承認された場合に限り、`true`が返されて`submit`される --> <button type="submit" formmethod="post" formaction="/sample" onclick="return confirm('フォームを送信しますか？')" > 送信 </button>
一方で今回実現したいのは、htmxを使用したAJAXリクエスト発行時にwindow.confirmと同じ挙動をさせることです。
<!-- 確認ダイアログが承認された場合に限りリクエストを発行したい --> <button type="button" hx-post="/sample" hx-trigger="click" > 送信 </button>
hx-confirm属性でwindow.confirmが実装できる
htmxのhx-conform属性を使用すると、リクエスト前に確認ダイアログを出現させてwindow.confirmと同じ挙動を実現できます。
構文は以下の通りです。
hx-confirm="<message>"
例えば、「ボタン押下時に "本当に送信しますか？"という文言の確認ダイアログを出現させて、承認された場合にのみPOSTリクエストを発行する」場合は次のようになります。
<button type="button" hx-post="/sample" hx-trigger="click" hx-confirm="本当に送信しますか？" > 送信 </button>
デフォルトではブラウザ標準の確認ダイアログが出現されますが、UIのカスタマイズも可能です。詳しくは公式ドキュメントをご確認ください。
まとめ
今回は、htmxでリクエスト発行前にwindow.confirmを実行して、確認ダイアログが承認された場合にのみリクエストする方法をご紹介しました。
アクションが破壊的変更である場合に慎重な操作を促せるため、特に管理系のアプリケーションで活躍するのではないでしょうか。
htmxを使用される方の一助となれば幸いです。ご精読ありがとうございました。
