デバウンス付きリアルタイム検索
入力するそばから候補を絞り込む、リアルタイム検索の実装例です。鍵になるのが debounce 関数で、キーを打つたびに即実行するのではなく、最後の入力から300ミリ秒待ってから検索処理を走らせます。これにより、文字を連打しても無駄な再描画やAPI呼び出しを抑えられ、動作が軽くなります。
解説
入力するそばから候補を絞り込む、リアルタイム検索の実装例です。鍵になるのが debounce 関数で、キーを打つたびに即実行するのではなく、最後の入力から300ミリ秒待ってから検索処理を走らせます。これにより、文字を連打しても無駄な再描画やAPI呼び出しを抑えられ、動作が軽くなります。一致した部分は String.replace で mark タグに包み、黄色いハイライトで示すのも特徴です。該当が無ければ「見つかりません」を表示します。
使う場面
- FAQやヘルプ記事のインクリメンタル検索
- タグやカテゴリの絞り込みフィルター
- サーバー検索の前段で入力回数を間引きたいとき
待ち時間は debounce(..., 300) の数値で調整でき、サーバーに問い合わせる場合は少し長め、ローカル配列なら短めが快適です。items 配列を実データやfetchの結果に差し替えれば、そのまま実用できます。注意点として、replace はそのままだと入力文字を正規表現として扱わないため記号検索でも安全ですが、最初の一致しかハイライトしないので、全件強調したいときは置換処理の見直しが必要です。
よくある質問
デバウンスとは何ですか？
連続して発生するイベントを間引き、最後の入力から一定時間が経ってから一度だけ処理を走らせる手法です。検索やリサイズのように高頻度で起きる処理の負荷を下げ、動作を滑らかに保つために使います。
サーバー検索に使えますか？
使えます。render関数の中で配列のfilterの代わりにfetchで問い合わせ、返ってきた結果を表示すればAPI連携になります。デバウンスがあるおかげで打鍵ごとのリクエストが減り、サーバー負荷を抑えられます。