101. hx-on: エラーイベントの捕捉（JavaScriptと連携して、予期せぬ事態に応答する）
原理：HTMXの「声」を聴く
属性だけでは届かない場所へ
これまでのHTMXは、基本的にはHTMLの属性だけで完結してきました。しかし、エラーハンドリングの世界では、「もしエラーが起きたら、画面のここに警告を出しつつ、さらに音を鳴らしたい」とか「ログを別のサーバーに送りたい」といった、少しだけ複雑なJavaScriptの助けが必要な場面があります。
hx-on 属性（特に hx-on:htmx:response-error など）を使うと、「HTMXが通信の過程で発する『エラーが起きた！』という信号（イベント）」を捕まえ、それに対して自分だけのカスタムな反応（JavaScript）を実行させることができます。
実践：トラブルを確実にキャッチする
1. 通信失敗時に通知を出す（hx-on::error）
最も基本的で便利な、通信エラー全体をキャッチする例です。
<!--
hx-on::error :
ネットワークが切れている、サーバーがダウンしているなど、
リクエスト自体が失敗したときに発動します。
-->
<button hx-get="/api/data"
hx-on::error="alert('サーバーと通信できませんでした。')">
最新情報を取得
</button>
2. 特定のステータスコードに応答する（hx-on::response-error）
サーバーは動いているけれど、エラー（400番台や500番台）が返ってきた時の処理です。
<button hx-post="/api/save"
hx-on::response-error="console.error('保存に失敗:', event.detail.xhr.status)">
保存
</button>
3. ステップ・バイ・ステップ解説
- 監視したいポイントを決める: 「通信自体の失敗（error）」か「サーバーからのエラー返信（response-error）」かを決めます。
- イベントの記述:
hx-on:のあとにイベント名を書きます（::はhtmx:の略記法です）。 - アクションの記述: 発生時に動かしたい短いJavaScript（例：
alert(),console.log()）をクォーテーションの中に書きます。
比較：グローバル・ハンドリング vs 個別ハンドリング
グローバル・ハンドリング
- 方法: ページ全体（bodyなど）で一度だけ設定する。
- 利点: どのボタンでエラーが起きても共通のメッセージを出せる。一括管理が楽。
個別ハンドリング (hx-on)
- 方法: 各ボタンやフォームに直接書く。
- 利点: 「このボタンだけは特別なエラーを出したい」という細かい作り込みができる。
まとめ：初心者のための「もしも」の備え
hx-on によるエラー捕捉は、あなたのWebアプリに「強さ」と「賢さ」をもたらします。
- ユーザーを「無視」しない: エラーが起きても画面が動かない……という最悪の放置を、この数文字で防げます。
- JavaScript の入り口として: 「HTMXは便利だけど、やっぱりJSも少しは使いたい」と思ったとき、この
hx-onこそが最高に使いやすい入り口になります。 - event オブジェクトの活用: 書き込んだJavaScriptの中では
eventという変数を使って、エラーの具体的な中身（ステータスコードなど）を知ることもできます。
想定外さえも、想定内に。hx-on を使って、トラブルの際もユーザーに寄り添い、確実なフィードバックを返せる誠実なWebサイトを目指してください。次の記事では、読み込み中の体験を極める「ローディング状態の全パターン（102. Loading States）」をご紹介します。