021. hx-trigger（通信を発火させるきっかけの制御）

原理：「いつ」動くかを決める司令塔

イベントという「合図」の理解

Webブラウザ上で起きるあらゆる出来事は「イベント」と呼ばれます。マウスをクリックした、文字を打った、画面をスクロールした、あるいは単に5秒が経過した……。これらはすべて、ブラウザが発信している「合図」です。

本来、これらの合図をキャッチして何か（通信など）をさせるには、JavaScript（JS）で addEventListener という複雑な仕掛けを書かなければなりませんでした。 HTMXの hx-trigger 属性は、この仕組みを驚くほどシンプルに、かつ強力に作り変えます。属性の中に「click」や「keyup」という名前を書くだけで、その要素がいつ通信を開始するかという「きっかけ」を自由自在に操れるようになるのです。

デフォルトに隠された親切心

面白いことに、HTMXはあなたが hx-trigger を書かなくても、気を利かせて「標準的なきっかけ」を自動で設定してくれています。 - input, textarea, select タグなら： change（値が変わった時） - form タグなら： submit（送信ボタンが押された時） - それ以外のタグなら： click（クリックされた時）まずはこのデフォルトの恩恵を受けつつ、必要に応じて自分好みの「引き金（トリガー）」にカスタマイズしていくのが、HTMXマスターへの道です。

実践：多彩なトリガーでUXを豊かにする

1. 待ち受け（delay）と変化（changed）の組み合わせ

検索窓などで「文字を打つたびに通信したいが、サーバーに負担をかけたくない」という場合に必須のテクニックです。

<!-- 
  keyup: キーを離した瞬間に発火するが...
  delay:500ms: 入力をやめてから500ミリ秒待ってから送信する（連打をまとめる）
  changed: 前の送信時と文字が変わっていないなら、送信しない
-->
<input type="text" name="search" placeholder="検索..."
       hx-get="/api/search" 
       hx-trigger="keyup delay:500ms changed" 
       hx-target="#results">

2. ページ読み込み時や、画面に現れた時

「最初は隠しておいて、ユーザーがそこまでスクロールした瞬間に読み込む」といった高度な演出も簡単です。

<!-- ページが開いた瞬間に、重いデータを読み込み開始 -->
<div hx-get="/api/heavy-data" hx-trigger="load">
    データをロード中...
</div>

<!-- スクロールしてこの要素が画面に入った（revealed）瞬間に読み込む -->
<div hx-get="/api/next-page" hx-trigger="revealed">
    次のコンテンツを読み込み中...
</div>

3. ステップ・バイ・ステップ解説

イベント名の指定: click, mouseenter, focus など、標準的なJSイベント名を書きます。
修飾子の追加: once（一回だけ）, delay（待機）, throttle（間引き）などの便利なオプションを追加して挙動を磨きます。
フィルタリング: [condition] を使って、「Ctrlキーを押しながらクリックした時だけ」のような細かい条件を付けることも可能です。

比較：JSのイベント管理 vs HTMXのトリガー記述

JSでのイベントリスナー

ロジックとイベントが離れた場所に書かれるため、コードを追うのが大変です。

const el = document.querySelector('#my-input');
el.addEventListener('keyup', (e) => {
  // タイマーの処理、重複のチェック、fetchの呼び出し...（数十行のコード）
});

HTMXの hx-trigger

<input hx-trigger="keyup delay:500ms">

「いつ動くか」がタグのすぐ横に書かれています。これほど直感的でメンテナンスしやすい記述はありません。

まとめ：初心者のための「きっかけ」の設計

hx-trigger を使いこなすと、あなたのWebサイトは「生き物」のように生き生きと反応し始めます。

ユーザーを急かさない: delay を使って、心地よい「間」を作りましょう。
無駄な動きをしない: changed を使って、意味のない通信を徹底的に排除しましょう。
自動化を楽しむ: every 10s（10秒おき）のような定期実行もトリガーの一つです。

何が起きたら、魔法を始めるか。その「引き金」を引く権利は、今やあなたの手の中にあります。次の記事では、このトリガーで呼び起こされた魔法（HTMLパーツ）を、具体的にどこのターゲットに流し込むかという「hx-target」（022. hx-target）の極意を伝授します。