ウェブサイトやアプリケーションの開発中に、特定の関数が高頻度で発生する際にどのように対処すればよいか悩んだことはありませんか？
この記事では、その問題を解決するための効果的な方法である『debounce（デバウンス）』について、以下の内容をサンプルコードを用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。
debounceとはdebounceのメリットdebounceの作成方法debounceの使い方lodashのdebounceとは
debounceとは
debounce（デバウンス）は、特定の関数が短時間に何度も呼ばれるのを防ぎ、一定時間が経過した後にその関数を一度だけ実行するためのテクニックです。
主にスクロールイベント、テキスト入力、ウィンドウのリサイズなど、短時間に高頻度で発火するイベントを制御するために使われます。debounceにより、パフォーマンスの向上や無駄な処理の削減ができます。
debounceのメリット
debounceのメリットを以下に示します。
- パフォーマンス向上
- 頻繁に呼び出される関数（例えば、入力イベントやウィンドウリサイズ）を制限し、必要な処理のみ行うため、CPUやメモリの無駄な使用を防ぎます。
- サーバー負荷の軽減
- サーバーへリクエストを送るタイミングを制御できるため、無駄なAPIリクエストを削減できます。
- ユーザーエクスペリエンスの向上
- 不要な更新や処理を抑えるため、よりスムーズなユーザーエクスペリエンスを提供できます。
debounceの作成方法
以下にJavaScriptでのdebounce関数の実装例を示しています。debounceは一定時間内に同じ関数が何度も実行されても、そのうち最後の呼び出しだけを実行するように実装します。
function debounce(func, delay) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), delay);
};
}debounceの使い方
以下のサンプルコードでは、ユーザーがテキストを入力した際に、1000msの遅延を設けて、その後に結果をログ出力しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Debounceのサンプルコード</title>
</head>
<body>
<input type="text" id="input"/>
<script>
const input = document.getElementById('input');
const debouncedUpdate = debounce((event) => {
console.log(event.target.value);
}, 1000);
input.addEventListener('input', debouncedUpdate);
// debounce関数
function debounce(func, delay) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), delay);
};
}
</script>
</body>
</html>このサンプルコードでは、ユーザーがテキストを入力した際に、1000msの間何も入力しなかった場合のみ、console.log(event.target.value)を実行しています。連続でテキストを入力しても最後の入力だけが処理されるので、余計な処理が行われません。
lodashのdebounceとは
lodashはJavaScriptのユーティリティライブラリで、その中にdebounce関数が標準で提供されています。lodashのdebounceを使うことで、手動でdebounce関数を実装する手間が省けます。
以下にlodashのdebounceを用いたサンプルコードを示しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Debounceのサンプルコード</title>
</head>
<body>
<input type="text" id="input"/>
<script type="module">
import { debounce } from 'https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/lodash.js';
const input = document.getElementById('input');
const debouncedUpdate = debounce((event) => {
console.log(event.target.value);
}, 1000);
input.addEventListener('input', debouncedUpdate);
</script>
</body>
</html>この例では、lodashのdebounceを使って同じようにユーザーがテキストを入力した際に、1000msの間何も入力しなかった場合のみ、console.log(event.target.value)を実行しています。
本記事のまとめ
この記事では『debounce（デバウンス）』について、以下の内容を説明しました。
debounceとはdebounceのメリットdebounceの作成方法debounceの使い方lodashのdebounceとは
お読み頂きありがとうございました。