jQuery Academy · レッスン

効率的なイベント処理とスロットリング

リサイズやスクロールなど頻繁に発生するイベントにスロットリングとデバウンスを実装し、過剰な関数呼び出しを防いで応答性を高めます。

レッスン 2/312 ステップ

「効率的なイベント処理とスロットリング」はCoddyKit上の無料jQuery Academyレッスンです。これはレッスン2/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全3レッスンが含まれています。

イベントの過剰発生：パフォーマンスの問題

インタラクティブなWebアプリケーションを構築する際は、スクロール、リサイズ、入力などのイベントをよく利用します。これらのイベントによって関数が呼び出され、UIの更新や計算が行われます。

しかし、イベントが頻繁に発生しすぎると、パフォーマンスのボトルネックや動作の遅いユーザー体験につながり、場合によってはブラウザーがクラッシュすることもあります。そこで、最適化のテクニックが重要になります。

問題：イベントの急速な発生

最適化を行わない場合、scrollのような一般的なイベントがどの程度の頻度で発生するかを見てみましょう。コンソールを開くか、スクロールしながらカウンターを確認してください。

短時間にカウントが急速に増えることに注目してください。これは、多数の関数呼び出しが発生していることを示しています。この処理は非常に非効率です。

<!DOCTYPE html>
<html>
<head>
<title>Rapid Event Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  body { height: 200vh; font-family: sans-serif; margin: 0; }
  #status { position: fixed; top: 10px; left: 10px; background: #ffe0b2; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
  p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
  <div id="status">Scroll Count: 0</div>
  <p>Scroll down to see the event fire rapidly.</p>
  <script>
    $(document).ready(function() {
      let count = 0;
      $(window).on('scroll', function() {
        count++;
        $('#status').text('Scroll Count: ' + count);
      });
    });
  </script>
</body>
</html>

スロットリングの導入

スロットリングは、一定時間内に関数を呼び出せる頻度を制限するテクニックです。指定した時間間隔の中で、関数が最大1回だけ実行されるようにします。

200ミリ秒ごとにしか開かないゲートをイメージしてください。何度通ろうとしても、ゲートが開いているときにしか通過できません。

スロットリングの動作

これは、スロットリングを行う簡単なユーティリティです。スクロールハンドラーが200ミリ秒に1回までしか実行されないようにします。これにより、連続してスクロールしている間の呼び出し回数が大幅に減ります。

前の例と比較してください。カウントの更新は滑らかですが頻度は低くなり、リソースを節約できます。

<!DOCTYPE html>
<html>
<head>
<title>Throttling Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  body { height: 200vh; font-family: sans-serif; margin: 0; }
  #status { position: fixed; top: 10px; left: 10px; background: #c8e6c9; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
  p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
  <div id="status">Throttled Scroll Count: 0</div>
  <p>Scroll down. The count updates less frequently.</p>
  <script>
    // A simple throttling utility function
    function throttle(func, delay) {
      let canRun = true;
      return function(...args) {
        if (canRun) {
          func.apply(this, args);
          canRun = false;
          setTimeout(() => canRun = true, delay);
        }
      };
    }

    $(document).ready(function() {
      let count = 0;
      const throttledScroll = throttle(function() {
        count++;
        $('#status').text('Throttled Scroll Count: ' + count);
      }, 200); // Update at most every 200ms

      $(window).on('scroll', throttledScroll);
    });
  </script>
</body>
</html>

デバウンスの導入

デバウンスは、イベントが最後に発生してから一定時間が経過するまで、関数の実行を遅らせるテクニックです。

1秒間動きを止めた後にだけ消えるライトをイメージしてください。動き続けている間はタイマーがリセットされます。指定した遅延時間の間ユーザーが操作を止めたときに、関数が1回だけ実行されます。

デバウンスの動作

ここでは、テキスト入力のkeyupイベントにデバウンスを適用しています。入力を500ミリ秒間止めた後にだけステータスが更新されます。

これは検索ボックスに最適です。ユーザーが検索語の入力を終えてから、検索クエリを1回だけ実行できるためです。

<!DOCTYPE html>
<html>
<head>
<title>Debouncing Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  body { font-family: sans-serif; margin: 0; padding: 20px; }
  input { padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; width: 100%; max-width: 300px; }
  #status { background: #bbdefb; padding: 8px; margin-top: 15px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
</style>
</head>
<body>
  <p>Type into the box. The status updates only after you pause.</p>
  <input type="text" id="myInput" placeholder="Start typing...">
  <div id="status">Last typed: (none)</div>
  <script>
    // A simple debouncing utility function
    function debounce(func, delay) {
      let timeoutId;
      return function(...args) {
        const context = this;
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
          func.apply(context, args);
        }, delay);
      };
    }

    $(document).ready(function() {
      const debouncedLog = debounce(function(event) {
        $('#status').text('Last typed: ' + $(event.target).val());
      }, 500); // Wait 500ms after typing stops

      $('#myInput').on('keyup', debouncedLog);
    });
  </script>
</body>
</html>

スロットリングとデバウンス：主な違い

どちらもイベント処理を最適化しますが、目的は異なります。

スロットリング：イベントが急速に発生しても、時間の経過に合わせて関数を一定間隔で実行します。頻度を制御する方法です。
デバウンス：操作が一定時間行われなかった後にだけ関数を実行します。ユーザーが操作を終えるのを待つ方法です。

どちらを選ぶべきかは、具体的な用途によって異なります。

実用的な使用例

それぞれの一般的な使用例を紹介します。

スロットリング：
- ウィンドウのリサイズ
- ページのスクロール
- ドラッグ＆ドロップ操作
- ゲームの更新（例：武器の発射）
デバウンス：
- 検索バーへの入力（オートコンプリート）
- ユーザー入力後のフォーム検証
- テキストエディターでのコンテンツ保存
- ユーザーが入力を止めた後のAPI呼び出し

jQueryイベントとの統合

これらのユーティリティ関数は、.on()や.bind()などのjQueryのイベントメソッドと簡単に組み合わせられます。スロットリングまたはデバウンスした関数をイベントハンドラーとして渡すだけです。

$(window).on('resize', throttle(myResizeHandler, 250));

$('#search-input').on('keyup', debounce(searchFunction, 300));

これにより、イベントリスナーの効率が保たれ、アプリケーションの応答性が向上します。

パフォーマンス上のメリット

スロットリングとデバウンスを実装すると、次のようなパフォーマンス上のメリットが得られます。

CPU使用率の低下：関数呼び出しが減るため、ブラウザーの処理量が少なくなります。
滑らかなUI：ぎこちないアニメーションや応答しないインターフェースを防ぎます。
ユーザー体験の向上：アプリケーションがより高速で滑らかだとユーザーに感じてもらえます。
API呼び出しの最適化：不要なリクエストでバックエンドに負荷をかけることを防ぎます。

イベント最適化のクイックチェック

次のうち、デバウンスを使うのが最も適しているのはどの状況でしょうか。

対話的なレッスンで答える

まとめと次のステップ

よくできました。イベント処理を最適化する2つの強力なテクニックを学びました。

スロットリング：関数を呼び出せる頻度を制限します。
デバウンス：操作が行われない時間が経過するまで関数の実行を遅らせます。

これらを使いこなすと、jQueryアプリケーションのパフォーマンスと応答性が大きく向上します。用途に最適な遅延時間を見つけるため、さまざまな値を試してみてください。

無料で開始

AI チューターと学ぶ JavaScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 22
レッスン: 48

無料で学習を始めるコース全体を表示

よくある質問

「効率的なイベント処理とスロットリング」レッスンは無料ですか？

はい。「効率的なイベント処理とスロットリング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全3レッスンが含まれています。

「効率的なイベント処理とスロットリング」で何を学びますか？

リサイズやスクロールなど頻繁に発生するイベントにスロットリングとデバウンスを実装し、過剰な関数呼び出しを防いで応答性を高めます。ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

jQuery Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/3です。

「効率的なイベント処理とスロットリング」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このjQuery Academyレッスンでコードを書いて実行できますか？

はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

DOM操作の最適化
効率的なイベント処理とスロットリング
キャッシュとDeferredオブジェクトの活用

← jQuery Academyに戻る