056. hx-trigger-name Header（IDではなく「名前」で自分を証明する）
原理：属性「name」によるアイデンティティの通知
IDだけが自分じゃない
前回の記事（055. hx-trigger）では、通信を発火させた要素の「ID」がサーバーに届く仕組みを学びました。これは非常に便利ですが、開発の現場では「IDを振るのが面倒」だったり、「同じ名前を持つ複数のボタンを区別したい」場合もあります。
そんな時に役立つのが hx-trigger-name ヘッダーです。
その名の通り、要素に付けられた name 属性 の値をサーバーへ伝えます。
通常、name 属性は入力フォームのデータのラベルとして使われますが、HTMXはこの name を「誰からの通信か」という身分証明書としても活用します。
実践：同じ動作をする、異なる名前のボタンたち
1. 複数のボタンを「name」で見分ける（疑似コード）
一括操作のリストなどで、複数のボタンを name で区別する例です。
<form hx-post="/api/batch-action">
<!-- 同じフォーム内だが、ボタンのnameが違う -->
<button name="action_approve" value="all">すべて承認</button>
<button name="action_reject" value="all">すべて却下</button>
</form>
サーバー側でこのヘッダーを読み取る：
// Node.js (Express) の例
app.post('/api/batch-action', (req, res) => {
const triggerName = req.get('hx-trigger-name');
if (triggerName === 'action_approve') {
// 承認のロジック
} else if (triggerName === 'action_reject') {
// 却下のロジック
}
});
2. IDとNameの使い分け
- ID (
hx-trigger): 画面上で世界に一つだけのユニークな名前。特定のピンポイントな要素を指すのに向いています。 - Name (
hx-trigger-name): 「種類」や「ラベル」としての意味合いが強く、同じ種類のアクションをまとめるのに向いています。
どちらのヘッダーもHTMXが自動で飛ばしてくれるため、あなたはサーバー側で「今どっちの名前を知りたいか」を自由に選ぶことができます。
3. ステップ・バイ・ステップ解説
- name属性を付ける: 送信ボタンや入力欄に、
name="my-action"のように名前を付けます。 - 通信の発火: ボタンを押すなどして通信が始まると、HTMXが自動的にその値をヘッダーへ乗せます。
- サーバーの処理: サーバーサイドで
hx-trigger-nameヘッダーの中身をチェックして、処理を分岐させます。
比較：hx-trigger vs hx-trigger-name
hx-trigger
- 届く値: 要素の
id属性。 - イメージ: 「背番号」や「マイナンバー」。個人の特定に強い。
hx-trigger-name
- 届く値: 要素の
name属性。 - イメージ: 「役職」や「ラベル」。役割の特定に強い。
まとめ：初心者のための「自己紹介」のバリエーション
hx-trigger-name ヘッダーは、IDに縛られすぎない柔軟な開発を実現するための隠し味です。
- フォームとの親和性: 従来のHTMLフォームでも
nameは必須の属性でした。その慣習をそのままHTMXの高度な通信に活かすことができます。 - コードの読みやすさ: 「action_delete」といった名前が付いたヘッダーを受け取ることで、サーバー側のコード（
if文など）がぐっと直感的になります。 - 二重の証明: もし不安なら、IDとNameの両方をチェックすることも可能です。
自分をどう名乗るか。IDだけでなく name も活用して、サーバーとの対話をより柔軟で、豊かで、間違いのないものにしてください。次の記事では、通信が長引いた時の「諦め時」を決める Timeout（057. Timeout）の設定について解説します。