こんにちは！アミットです。
今回は、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 初心者向け