062. Throttling（スロットリング：情報の「交通整理」で連打を防ぐ）

原理：一度に送れる量を制限する「門番」

「落ち着いて！」とリクエストにブレーキをかける

Webアプリを使っていると、ついボタンを連打してしまったり、マウスを激しく動かしたりすることがあります。もしHTMXのボタンが連打されるたびに、その回数分だけサーバーへリクエストが飛んでいってしまったら……。 1. サーバーは処理に追われて、パンクしてしまいます。 2. 通信費（データ量）が無駄に増えてしまいます。 3. 画面が何度もチカチカと書き換わり、ユーザーも混乱します。

「スロットリング（Throttling）」は、「一定時間内（例：1秒間）には、最大でも一回しかリクエストを送らせない」という、情報の交通整理を行うための機能です。

水道の蛇口をイメージしてください。いくらハンドルを激しく回しても、出る水の量を物理的に制限する。それがスロットリングです。

実践：激しい動きを「滑らか」に変える

1. マウスオーバー攻撃（？）への対策

要素の上にマウスが乗る（mouseover）たびに何かを読み込むような場合、マウスをブラブラさせているだけで大量のリクエストが飛んでしまいます。これを「1秒に1回」に制限する例です。

<!-- 
  hx-trigger: mouseover イベントで発火。
  throttle:1s : ただし、一度送ったら1秒間は次のリクエストを無視する。
-->
<div hx-get="/api/preview" 
     hx-trigger="mouseover throttle:1s">
    ここにマウスを乗せると、1秒に1回だけプレビューを更新します。
</div>

2. 複数のリクエストを間引く

連続したイベントの中で、最初の一回を優先し、その後の「余計な連打」を切り捨てるのがスロットリングの性格です。

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

過剰な発火を探す: 「ここはマウスが動くたびに動くから、多すぎるかな？」という箇所を見つけます。
制限時間の決定: 500ms（0.5秒）や 1s（1秒）など、ユーザーが不便を感じないギリギリの長さを設定します。
属性の追記: hx-trigger のイベント名のあとに throttle:時間は と書き足します。

比較：スロットリング vs デバウンシング（次回予告）

似たような機能に「デバウンシング（Debouncing）」がありますが、性格が違います。

スロットリング（今回）

ルール: 「1秒に1回だけは確実に送る」。
イメージ: バス停。決まった時間（間隔）になれば、人が何人並んでいても（連打されても）出発する。
用途: スクロール、マウスの動きの追跡。

デバウンシング（次回）

ルール: 「連打が止まってから送る」。
イメージ: エレベーター。「閉まる」ボタンを押していても、誰かが駆け込み乗車（追加入力）してくる限り、ドアは閉まらない（送信されない）。
用途: 検索窓のタイピング。

まとめ：初心者のための「ブレーキ」の技術

スロットリングを正しく設定することは、あなたのWebアプリに「安定感」と「優しさ」をもたらします。

サーバーを守る盾: ユーザーがどんなに激しく操作しても、サーバーに届くリクエストは整然とした一定のリズムになります。
モバイルユーザーの味方: 無駄な通信を間引くことで、バッテリーの消費やギガ（通信量）の節約に大きく貢献します。
「ほどよく動く」快感: 1秒に1回というリズムは、人間にとって「ちゃんと反応しているな」と感じる、心地よいテンポでもあります。

スピードだけが正義ではない。throttle を使って、リクエストの「交通量」を賢くコントロールし、誰にとっても、どんなサーバーにとっても心地よいWebアプリを作り上げていきましょう。次の記事では、入力が終わるのを待ってからリクエストを送る「デバウンシング（063. Debouncing）」をご紹介します。