【JS応用｜豆知識】JavaScriptのメモリリークを防ぐ！clearIntervalの正しい使い方と注意点

導入：なぜclearIntervalが重要なのか

JavaScriptで一定時間ごとに処理を実行したいとき、私たちは「setInterval」を使用します。しかし、このタイマーを適切に停止させないと、画面を離れた後も裏で処理が走り続け、メモリリークや意図しないバグを引き起こす原因となります。clearIntervalは、このタイマーを正確に終了させるために不可欠なAPIです。本記事では、安全なタイマー管理の秘訣を解説します。

基礎知識：タイマーの仕組み

JavaScriptのタイマーAPIは「タイマーID」という数値を返します。setIntervalを実行した際に返されるこのIDを、clearIntervalに渡すことで「どのタイマーを止めるか」を指定します。もしIDを保存し忘れると、二度とそのタイマーを停止できなくなるため、IDの管理は非常に重要です。

実装・解決策：タイマーを確実に止める手順

タイマーを安全に扱うための鉄則は「タイマーIDを変数に保持し、不要になったタイミングでnullで初期化すること」です。特にReactなどのフレームワークを使用する場合、コンポーネントのアンマウント時に必ずclearIntervalを呼び出す必要があります。

サンプルプログラム：安全なタイマーの実装例

以下のコードは、ボタン操作でカウントアップを開始し、停止ボタンで確実にタイマーを解除する例です。

// タイマーIDを保持するための変数（初期値はnull）
let timerId = null;
let count = 0;

// カウントアップを開始する関数
function startTimer() {
  // すでにタイマーが動いている場合は、二重起動を防ぐために一度停止する
  if (timerId !== null) return;

  timerId = setInterval(() => {
    count++;
    console.log("現在のカウント:", count);
  }, 1000); // 1秒ごとに実行
  
  console.log("タイマーを開始しました。ID:", timerId);
}

// タイマーを解除する関数
function stopTimer() {
  if (timerId !== null) {
    clearInterval(timerId); // タイマーIDを指定して停止
    console.log("タイマーを停止しました。");
    
    // 停止後にIDをnullに戻すことで、再起動の準備を整える
    timerId = null;
  }
}

応用・注意点：現場でよくある失敗

現場で最も多いミスは「clearIntervalの呼び忘れ」と「タイマーの二重起動」です。ボタンをクリックするたびにsetIntervalを実行してしまうと、裏側で複数のタイマーが並行して動き出し、処理速度が急激に低下します。必ず「タイマーを開始する前に現在のIDを確認し、既に動いていれば停止する」というガード節を入れるようにしてください。また、setTimeoutを再帰的に呼び出す手法（いわゆる「再帰的setTimeout」）も、処理の間隔を一定に保ちたい場合にはclearIntervalよりも安定した動作を得られることがあるため、状況に応じて使い分けるのがプロのテクニックです。