デバウンス付きライブサーチ
これは入力のたびに検索結果を絞り込む「ライブサーチ」に、 debounce （デバウンス）を組み合わせた部品です。キー入力が止まってから一定時間後に一度だけ処理を走らせるため、1文字打つたびに重い絞り込みが連発するのを防ぎ、無駄な再描画やAPI呼び出しを減らせます。
解説
これは入力のたびに検索結果を絞り込む「ライブサーチ」に、debounce（デバウンス）を組み合わせた部品です。キー入力が止まってから一定時間後に一度だけ処理を走らせるため、1文字打つたびに重い絞り込みが連発するのを防ぎ、無駄な再描画やAPI呼び出しを減らせます。実装では setTimeout と clearTimeout で前回の予約を取り消し、最後の入力から指定ミリ秒だけ待ってから filter を実行します。一致部分を strong で囲ってハイライトする小技も入っています。
使う場面
- サイト内検索やタグ絞り込みなど候補が多いフォーム
- 外部APIを叩くオートコンプリート（通信回数を節約したい時）
- 表やカード一覧のインクリメンタル絞り込み
待ち時間は debounce(fn, 250) の数値で調整します。短くすると反応は機敏ですが処理回数が増え、長くすると軽くなる代わりに表示が遅れて感じます。150から300ミリ秒あたりが目安です。検索データを差し替えるときは配列 data を自分のデータに置き換えるだけで動きます。アクセシビリティ面では、結果リストに件数を伝える aria-live を足すと、画面読み上げでも更新が分かりやすくなります。
よくある質問
デバウンスの待ち時間はどう決めればいいですか？
150から300ミリ秒が目安です。短くすると反応は速くなりますが処理回数が増え、長くすると軽くなる代わりに表示が遅れて感じます。ローカル配列の絞り込みなら短め、外部APIを叩くなら長めが向いています。
検索対象のデータを差し替えるには？
JavaScript内の配列 data を自分のデータに置き換えるだけです。オブジェクトの配列にしたい場合は、フィルタ条件のincludes判定を対象プロパティに合わせて書き換えてください。