デバウンス処理の徹底解説〜JavaScriptとReactJSでパフォーマンス向上〜

2024-04-02

JavaScriptとReactJSにおけるデバウンス処理

ユーザー入力を処理する場合
スクロールイベントやリサイズイベントなど、頻繁に発生するイベントを処理する場合
- イベント発生ごとに処理を実行すると、パフォーマンスが低下する可能性がある

デバウンス処理の実装方法

JavaScriptでデバウンス処理を実装するには、主に以下の2つの方法があります。

setTimeout関数を使う

function debounce(func, wait) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
}

Lodashなどのライブラリを使う

import debounce from 'lodash/debounce';

const debouncedFunc = debounce(func, wait);

useEffect Hookを使う

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const debouncedSetCount = debounce((newCount) => setCount(newCount), 500);

    // イベントリスナーにdebouncedSetCountを登録
    window.addEventListener('scroll', debouncedSetCount);

    return () => {
      // コンポーネントがアンマウントされる時にイベントリスナーを解除
      window.removeEventListener('scroll', debouncedSetCount);
    };
  }, []);

  return (
    <div>
      カウント: {count}
    </div>
  );
}

import { useDebounce } from 'react-use';

function MyComponent() {
  const [count, setCount] = useState(0);
  const { debouncedValue } = useDebounce(count, 500);

  return (
    <div>
      カウント: {debouncedValue}
    </div>
  );
}

デバウンス処理は、パフォーマンスの向上や不要な処理の削減に役立ちます。JavaScriptとReactJSでデバウンス処理を実装するには、いくつかの方法があります。状況に合わせて適切な方法を選択してください。

JavaScript

// setTimeout関数を使う例
function debounce(func, wait) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
}

function handleClick() {
  console.log('クリックされました');
}

const debouncedClick = debounce(handleClick, 500);

// ボタンクリックイベントにdebouncedClickを登録
document.getElementById('button').addEventListener('click', debouncedClick);

ReactJS

// useEffect Hookを使う例
import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const debouncedSetCount = debounce((newCount) => setCount(newCount), 500);

    // スクロールイベントにdebouncedSetCountを登録
    window.addEventListener('scroll', debouncedSetCount);

    return () => {
      // コンポーネントがアンマウントされる時にイベントリスナーを解除
      window.removeEventListener('scroll', debouncedSetCount);
    };
  }, []);

  return (
    <div>
      カウント: {count}
    </div>
  );
}

export default MyComponent;

// useDebounce Hookを使う例
import React, { useState, useDebounce } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const { debouncedValue } = useDebounce(count, 500);

  return (
    <div>
      カウント: {debouncedValue}
    </div>
  );
}

export default MyComponent;

実行方法

上記のコードをHTMLファイルに保存します。
ブラウザでHTMLファイルを開きます。
ボタンをクリックすると、「クリックされました」というメッセージが500ミリ秒間隔で出力されます。

ReactJS

上記のコードをReactプロジェクトのファイルに保存します。
Reactプロジェクトを起動します。
ブラウザでReactプロジェクトのURLを開きます。
スクロールすると、「カウント」の値が500ミリ秒間隔で更新されます。

デバウンス処理の他の方法

Lodashなどのライブラリを使う

import debounce from 'lodash/debounce';

function handleClick() {
  console.log('クリックされました');
}

const debouncedClick = debounce(handleClick, 500);

// ボタンクリックイベントにdebouncedClickを登録
document.getElementById('button').addEventListener('click', debouncedClick);

Underscore.jsなどのライブラリを使う

Lodash以外にも、Underscore.jsなどのライブラリにも、debounceという関数が用意されています。これらのライブラリを使う場合は、Lodashと同様に、debounce関数を使ってデバウンス処理を実装することができます。

RxJSを使う

RxJSは、非同期処理を扱うためのライブラリです。RxJSには、debounceという演算子が用意されており、簡単にデバウンス処理を実装することができます。

import { Observable } from 'rxjs';

const source = Observable.fromEvent(document, 'click');

const debouncedClicks = source.pipe(
  debounce(() => Observable.timer(500))
);

debouncedClicks.subscribe(() => {
  console.log('クリックされました');
});

自作の関数を使う

上記のライブラリを使わずに、自作の関数を使ってデバウンス処理を実装することもできます。自作の関数を使う場合は、以下のコードを参考にしてください。

function debounce(func, wait) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
}