055. hx-trigger Header（今回の通信を引き起こした「真犯人」をサーバーへ伝える）
原理：「誰が」ボタンを押したのかという特定
似たようなリクエストを区別する
同じフォームの中に、複数の送信ボタンがある場面を想像してください。
- ボタンA：「保存して閉じる」
- ボタンB：「保存して、次の入力を続ける」
これら二つのボタンは、どちらも同じURL（/api/save）へ、同じデータを送るかもしれません。
サーバーにデータが届いたとき、どちらのボタンが押されたのかを知ることができれば、サーバーは「次は画面を閉じるためのHTMLを返すか」「次の入力欄を空にするためのHTMLを返すか」を正しく選ぶことができます。
このように、「この通信を開始した特定の要素（IDや名前）」をサーバーへ知らせるためのヘッダーが hx-trigger です。
実践：発火元を特定して、レスポンスを劇的に変える
1. サーバー側での発火元チェック（疑似コード）
どのボタンが通信を起こしたかをヘッダーから読み取る例です。
// PHP の例
$trigger_id = $_SERVER['HTTP_HX_TRIGGER'];
if ($trigger_id === 'save-and-close') {
// 閉じる処理用のHTML
echo "<div>保存完了。画面を閉じます。</div>";
} else if ($trigger_id === 'save-and-continue') {
// 次を促すHTML
echo "<div>保存完了。次の入力をどうぞ。</div>";
}
2. IDが命
このヘッダーには、通信を引き起こした要素の 「id 属性」 の値が入ります。 もしその要素にIDが付いていない場合は、このヘッダーは送られないか、空になってしまいます。HTMXとサーバーの高度な連携を楽しむなら、重要なボタンにはこまめにIDを振っておくことが、鉄則のテクニックとなります。
3. ステップ・バイ・ステップ解説
- IDを振る: 通信を行う要素（ボタンなど）に、自分自身を識別できるユニークな
id="..."を付けます。 - いつも通り通信: 他の属性（
hx-postなど）はいつも通り書くだけでOKです。HTMXが裏側で自動的にそのIDをヘッダーへ乗せてくれます。 - サーバーの分岐: サーバー側で
hx-triggerという名前のヘッダーの中身を確認し、処理を分岐させます。
特徴：犯人の「名前」と「場所」
- IDそのものが届く: ブラウザで定義した
id="submit-btn"という文字列がそのまま届きます。 - 要素名ではない:
buttonやinputといったタグ名ではなく、あなたが付けた「固有の名前（ID）」が優先されます。
まとめ：初心者のための「発火元」の意識
hx-trigger ヘッダーは、サーバーがあなたのサイトの「ボタン一つ一つ」を認識し、それぞれに最適な対応をするための「顔写真付きの身分証」のようなものです。
- ボタンに「個性」を: IDを振ることは、単なるCSSのためだけでなく、サーバーとの深い対話（誰が押したか）のために非常に価値のある行為です。
- 賢いサーバーサイド設計: URLをいくつも増やす代わりに、一つのURLに対して「誰が呼んだか」で挙動を変える、という効率的なコードが書けるようになります。
- デバッグでも最強: 「意図しないタイミングで通信が発生している」時、ログの
hx-triggerを見れば、どの不届きなボタンが発火したのかが一目瞭然です。
今回の出来事は、誰の手によって引き起こされたのか。hx-trigger を使って、発火元に寄り添った「痒い所に手が届く」レスポンスを実現してください。次の記事では、ID以外で自分の正体を明かす hx-trigger-name（056. hx-trigger-name）をご紹介します。