こんにちは!アミットです。
今回は、JavaScriptのフロントエンド開発で頻出の「Debounce(デバウンス)」と「Throttle(スロットル)」について、初心者にもわかりやすく、リアルな例で解説していきます!
🔍 Debounce(デバウンス)とは?
一定時間イベントが発生し続けなかった場合にだけ、最後の処理を実行するテクニック。
📦 使いどころ
- 検索ボックスの入力補完APIの呼び出し
- ウィンドウサイズの変更後のレイアウト再計算
- スクロール終了後の処理
🧪 リアルタイム例:検索ボックスのAPI呼び出し
function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}
const fetchSearchResults = (query) => {
  console.log(`🔍 Searching for: ${query}`);
};
const debouncedSearch = debounce(fetchSearchResults, 500);
document.getElementById("searchBox").addEventListener("input", (e) => {
  debouncedSearch(e.target.value);
});
<input type="text" id="searchBox" placeholder="キーワードを入力..." />
✅ ユーザーが入力を止めて500ms経ったら、fetchSearchResultsが呼ばれます。
⚡ Throttle(スロットル)とは?
一定間隔でしか関数を実行しないように制御するテクニック。
📦 使いどころ
- スクロールイベントに連動した画像の遅延読み込み
- マウス移動の追跡(例:カスタムカーソル)
- リサイズ処理の制限
🧪 リアルタイム例:スクロール時のヘッダー表示制御
function throttle(func, interval) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}
const onScroll = () => {
  console.log("📜 スクロール中...");
};
window.addEventListener("scroll", throttle(onScroll, 300));
✅ スクロールイベントが多発しても、300msに1回しかonScrollが呼ばれません!
🤔 Debounce と Throttle の違いまとめ
| 特徴 | Debounce | Throttle | 
|---|---|---|
| 実行タイミング | イベント終了後 | 定期的に実行 | 
| 使用例 | 入力、検索 | スクロール、マウス移動 | 
| API呼び出し頻度 | 少ない(最後のみ) | 一定間隔で発生 | 
🧠 覚え方のコツ
Debounce(でばうんす):入力が止まったら発火(=ユーザーの「考え中」に優しい)
Throttle(すろっとる):大量イベントを間引く(=パフォーマンス改善に最適)
🛠 よく使われるライブラリ
- Lodash
import _ from 'lodash';
_.debounce(myFunc, 300);
_.throttle(myFunc, 300);
- RxJS(リアクティブプログラミング向け)
🎁 おまけ:使い分けチャート
入力系イベント → Debounce
ユーザーの動き追跡 → Throttle
✍️ まとめ
- 
debounceは「入力を止めた後に発火」する
- 
throttleは「一定間隔で発火」する
- パフォーマンスとユーザー体験の両立には欠かせないテクニック
最後まで読んでいただきありがとうございます!
💬 質問・感想はコメントでお気軽に!
👨💻 他にもReact・Vue・AIなど技術記事を投稿してますので、ぜひフォローしてくださいね!
📌 Qiitaタグ案:
JavaScript フロントエンド パフォーマンス最適化 Throttle Debounce 初心者向け
