063. Debouncing（デバウンシング：入力が「止まる」のを待ってから送信する）

原理：嵐が過ぎ去るのを待つ賢さ

一文字ごとにサーバーを叩かない

検索窓で「htmx」と入力するとき、私たちは「h」「t」「m」「x」と順番にキーボードを叩きます。もしHTMXが、この「一文字」ごとのタイピングをすべてリクエストとしてサーバーに送ってしまったらどうなるでしょう？ - 「h」で検索。 - 「ht」で検索。 - 「htm」で検索。 - 「htmx」で検索。ユーザーはまだ入力の途中なのに、サーバーは4回も検索を行わなければなりません。これは非常にもったいない話です。

「デバウンシング（Debouncing）」は、「入力の手が一定時間（例：0.5秒）止まったら、そこで初めてリクエストを送る」という、「最後の仕上げ」を待つための仕組みです。

実践：インクリメンタル検索を劇的に軽くする

1. 検索窓の最適化

ユーザーが打ち終わるのを「500ミリ秒」待ってから検索を実行する、超定番の設定です。

<!-- 
  hx-trigger: キーを離した(keyup)ときからカウント開始。
  delay:500ms : 500msの間に次のキー入力がなければ送信。
                もし200ms後に次のキーが押されたら、カウントはリセットされる。
-->
<input type="text" name="q" 
       hx-get="/api/search" 
       hx-trigger="keyup delay:500ms changed" 
       hx-target="#search-results">

<div id="search-results"></div>

※ changed をセットで書くと、前と同じ内容（空打ちなど）なら送らない、というさらに賢い動きになります。

2. オートセーブ（自動保存）

文章を書いている最中に何度も保存するのではなく、筆が止まった瞬間にそっと保存するようなUIに最適です。

<textarea name="note" 
          hx-post="/save-note" 
          hx-trigger="keyup delay:2s">
</textarea>

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

「待ち」の判断: 文字入力など「連続して何度も起きるけど、最後の一回だけが重要」な場所を見つけます。
遅延時間の決定: 200msなら非常にリアルタイム、1000ms（1秒）ならかなりドッシリとした構えになります。まずは 500ms が黄金比です。
属性の追記: hx-trigger の中に delay:時間は と書き込みます。

比較：デバウンシング vs スロットリング（前回の復習）

スロットリング (Throttle)

イメージ: 「1秒ごとに、その時の状況を報告せよ！」という定期連絡。
結果: どんなに連打しても、等隔（1秒ごと）にリクエストが出る。

デバウンシング (Debounce)

イメージ: 「打ち終わったら、まとめて教えて！」という完結待ち。
結果: 連打している間は何も起きず、パタッと止まった瞬間に一発だけリクエストが出る。

まとめ：初心者のための「間（ま）」のデザイン

デバウンシングをマスターすると、あなたのWebアプリは「ユーザーの意図を汲み取る」ような、思慮深い動きをするようになります。

不機嫌なサーバーをなだめる: 無駄な「途中経過」の検索を減らすことで、サーバーの負荷は劇的に下がります。
「changed」を忘れずに: delay と共に changed キーワード（063.解説内）を添えておくと、検索ワードが変わっていないのに何度もリクエストが出るのを防いでくれるので、セットで覚えるのがおすすめです。
待たせすぎない工夫: delay が長すぎると、ユーザーは「あれ、動いてないのかな？」と不安になります。快適なレスポンスを感じる「0.3〜0.5秒」あたりを狙い撃ちしましょう。

嵐のような入力を静まるまで待つ。delay という魔法の言葉を使って、ユーザーのタイピングのリズムに寄り添った、最高に快適な検索体験を作ってください。次の記事では、複数のリクエストが衝突した時の順番待ちルール「キューイング（064. Queueing）」をご紹介します。