JavaScriptのタイマー機能の基本

setTimeout()の基本と使い方

JavaScriptにおけるタイマー機能の代表格であるsetTimeout()は、指定したミリ秒後に一度だけ関数を実行するための非同期処理メソッドです。WebブラウザのAPIとして提供されており、ウェブページに動的な遅延効果や時間差での処理を加える際に非常に役立ちます。例えば、「5秒後にメッセージを表示する」「ページの読み込みが完了してから特定のアニメーションを開始する」といったシナリオで活用されます。

この関数の基本的な構文はsetTimeout(function, delay, arg1, arg2, ...)となります。第一引数には実行したいコールバック関数、第二引数には遅延時間（ミリ秒）を指定します。遅延時間は最小値が設定されており、ブラウザや環境によって異なりますが、一般的には4ms以上が保証されます。戻り値としてタイマーを識別するための数値IDが返されるため、このIDを使って後からタイマーをキャンセルすることも可能です。


setTimeout(() => {
  console.log("5秒後に実行されました！");
}, 5000);

このように記述することで、ページがロードされてから5000ミリ秒（5秒）後にコンソールにメッセージが表示されます。非同期処理であるため、setTimeoutを呼び出した後のコードは、タイマーの実行を待たずにすぐに処理が続行されます。
出典: MDN Web Docs: setTimeout()

setInterval()による繰り返し実行

setInterval()はsetTimeout()と同様に非同期処理を行いますが、こちらは指定したミリ秒間隔で関数を繰り返し実行する点が異なります。一定時間ごとに最新情報を更新する時計の表示や、スライドショーの自動切り替え、ゲームのループ処理など、定期的な処理が必要な場面で非常に強力なツールとなります。setInterval()もブラウザのWeb APIとして提供されています。

構文はsetInterval(function, delay, arg1, arg2, ...)とsetTimeout()とよく似ていますが、大きな違いは一度の呼び出しで処理が何度も繰り返される点です。こちらも戻り値としてタイマーIDを返却し、このIDを用いることでタイマーを停止させることが可能になります。誤ってタイマーを停止し忘れると、メモリリークの原因や不要な処理がバックグラウンドで動き続けることになるため、適切に管理することが重要です。


let count = 0;
const intervalId = setInterval(() => {
  count++;
  console.log(`1秒ごとに実行中: ${count}回目`);
  if (count >= 5) {
    clearInterval(intervalId); // 5回実行したら停止
  }
}, 1000);

上記の例では、1秒ごとにコンソールにメッセージが表示され、5回実行された後にclearInterval()によってタイマーが停止されます。このように、繰り返し処理を行う際は、終了条件を明確にして適切にタイマーを停止するロジックを組み込むことが不可欠です。
出典: MDN Web Docs: setInterval()

タイマーの停止とクリア

setTimeout()やsetInterval()で設定したタイマーは、実行前にキャンセルしたり、繰り返し実行を停止したりすることができます。そのために用意されているのがclearTimeout()とclearInterval()という関数です。これらの関数は、それぞれsetTimeout()とsetInterval()が返したタイマーIDを引数として受け取り、対応するタイマーを停止させます。

タイマーIDは、タイマーを識別するための一意の数値です。例えば、ユーザーがページを離れたり、特定のアクションを完了したりした場合に、不要になったタイマーを適切に停止することで、リソースの無駄遣いを防ぎ、アプリケーションのパフォーマンスを維持することができます。特にsetInterval()で開始したタイマーは、明示的に停止しない限り永遠に実行され続けるため、clearInterval()での管理が必須となります。


// setTimeoutの停止例
const timeoutId = setTimeout(() => {
  console.log("このメッセージは表示されません。");
}, 3000);
clearTimeout(timeoutId); // 実行前にタイマーをキャンセル

// setIntervalの停止例
let counter = 0;
const intervalId = setInterval(() => {
  console.log(`カウンター: ${counter++}`);
  if (counter === 3) {
    clearInterval(intervalId); // 3回実行後に停止
  }
}, 1000);

このように、clearTimeout()とclearInterval()はタイマー処理を柔軟に制御し、アプリケーションのライフサイクルに合わせた適切な動作を実現するために不可欠な機能です。タイマーを使用する際は、常にこれらのクリア関数とセットで考える習慣をつけましょう。
出典: MDN Web Docs: clearTimeout(), MDN Web Docs: clearInterval()

タイマーを使ってJavaScriptで時計を作る

現在時刻の取得と表示

JavaScriptで時計を実装する第一歩は、現在時刻を正確に取得し、それをウェブページ上に表示することです。現在時刻の取得には、JavaScript標準のDateオブジェクトを使用します。new Date()とすることで、その時点での日付と時刻を含むDateインスタンスが生成されます。このインスタンスからgetHours(), getMinutes(), getSeconds()といったメソッドを呼び出すことで、それぞれ時、分、秒の数値を取得できます。

取得した時刻情報をウェブページに表示するには、DOM（Document Object Model）操作が不可欠です。HTML要素を取得し、そのtextContentプロパティやinnerHTMLプロパティを更新することで、動的に時刻を表示できます。例えば、<div id="clock"></div>のような要素を用意し、JavaScriptでその要素の内容を書き換えることで、デジタル時計のような表示を実現します。


function updateClock() {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');
  document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
}
// 初回表示
updateClock();

この関数を繰り返し実行することで、リアルタイムの時計表示が可能になります。時、分、秒が常に2桁表示になるようにpadStart(2, '0')を使用すると、視覚的に整った表示となり、ユーザー体験が向上します。
出典: MDN Web Docs: Date

デジタル時計の実装例

前述の時刻取得と表示のロジックを基に、setInterval()を組み合わせることで、1秒ごとに更新されるデジタル時計を実装できます。setInterval()は、指定した間隔で繰り返し関数を実行するため、1000ミリ秒（1秒）ごとにupdateClock関数を呼び出すように設定することで、リアルタイムな時計表示が実現します。

デジタル時計の例では、まずHTML側で時刻を表示する場所を用意します。


<!DOCTYPE html>
<html>
<head>
  <title>デジタル時計</title>
</head>
<body>
  <h1>現在の時刻</h1>
  <div id="digital-clock" style="font-size: 3em; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
    --:--:--
  </div>
  <script src="clock.js"></script>
</body>
</html>

そして、JavaScriptファイル (clock.js) に以下のコードを記述します。


function displayTime() {
  const now = new Date();
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  const timeString = `${hours}:${minutes}:${seconds}`;
  document.getElementById('digital-clock').textContent = timeString;
}

// 1秒ごとに時刻を更新
const timerId = setInterval(displayTime, 1000);

// 必要に応じて、ページを離れる時などにタイマーをクリアすることも可能
// window.addEventListener('beforeunload', () => clearInterval(timerId));

このコードは、displayTime関数を1秒ごとに実行し、digital-clockというIDを持つ要素に現在時刻を表示します。このシンプルながらも強力な組み合わせによって、ユーザーにリアルタイムの情報を提供することができます。

より正確な時計表示のための工夫

setInterval()は手軽に繰り返し処理を実現できますが、厳密なタイミングが要求される場面では注意が必要です。JavaScriptのタイマーは、ブラウザのイベントループによって管理されており、他の処理の負荷やブラウザタブの状態（バックグラウンドになった場合など）によって、指定した遅延時間よりもわずかに遅れて実行されることがあります。この「ズレ」は蓄積される可能性があり、長時間動作する時計では表示が徐々に遅れていく原因となります。

より正確な時計を実装するための一つの方法は、setInterval()の代わりに再帰的なsetTimeout()を使用することです。これは、関数が実行されるたびに次のsetTimeout()をスケジュールするというアプローチです。


function preciseClock() {
  const now = new Date();
  const delay = 1000 - (now.getMilliseconds() % 1000); // 次の秒の頭までの正確なミリ秒数を計算
  
  // 時刻表示を更新
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  document.getElementById('digital-clock').textContent = `${hours}:${minutes}:${seconds}`;

  setTimeout(preciseClock, delay); // 次の実行をスケジュール
}
preciseClock(); // 初回実行

この方法では、現在のミリ秒数を考慮して次の実行までの遅延時間を動的に計算するため、より精度高く1秒の区切りに合わせた更新が可能になります。しかし、ブラウザの制約（最小遅延時間）やシステム負荷の影響を完全に排除できるわけではないため、非常に高精度な時計が必要な場合は、サーバー側の時刻と同期するなどのより高度な工夫が必要となることを覚えておきましょう。
出典: MDN Web Docs: setTimeout()

JavaScriptの定数定義と名前空間の活用

constによる定数定義の基礎

JavaScriptにおけるconstキーワードは、一度値を代入すると再代入ができない「定数」を定義するために使用されます。これにより、意図しない値の変更を防ぎ、コードの安全性と可読性を高めることができます。constで定義された変数はブロックスコープを持ち、それが定義されたブロック内でのみアクセス可能です。
出典: MDN Web Docs: const

タイマー機能との関連では、例えばsetTimeout()やsetInterval()の遅延時間（ミリ秒）や、特定のメッセージ文字列など、アプリケーション全体で変わらない値をconstで定義することで、マジックナンバー（意味不明な直接記述された数値）を排除し、コードの保守性を向上させることが可能です。


const DELAY_MS = 3000; // 3秒
const MESSAGE = "処理が完了しました！";

setTimeout(() => {
  console.log(MESSAGE);
}, DELAY_MS);

このように定数を使用することで、タイマーの遅延時間が何を意味するのかが明確になり、後から変更が必要になった場合も一箇所を修正するだけで済みます。オブジェクトや配列をconstで定義した場合、その参照自体は変更できませんが、内部のプロパティや要素は変更可能であるという点には注意が必要です。

名前空間によるコード整理

JavaScriptアプリケーションが大規模になるにつれて、グローバルスコープに多くの変数や関数を定義すると、名前の衝突（グローバル汚染）やコードの管理が困難になるという問題が発生します。これを避けるために、「名前空間」の概念を導入し、関連するコードを一つのオブジェクトや即時関数（IIFE）の中にカプセル化することが推奨されます。

タイマー関連の処理においても、複数のタイマーIDやコールバック関数、設定値を管理する際に名前空間を活用すると非常に効果的です。例えば、以下のように特定の機能（例えば「タイマー管理」）をまとめたオブジェクトを作成することで、グローバルスコープを汚染せずにコードを整理できます。


const TimerManager = {
  delayTime: 2000,
  intervalId: null,

  startLogging: function() {
    console.log("ログ開始...");
    this.intervalId = setInterval(() => {
      console.log("現在時刻:", new Date().toLocaleTimeString());
    }, this.delayTime);
  },

  stopLogging: function() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
      console.log("ログ停止。");
      this.intervalId = null;
    }
  }
};

// 使い方
// TimerManager.startLogging();
// setTimeout(() => TimerManager.stopLogging(), 10000); // 10秒後に停止

このようにすることで、TimerManagerという一つの名前空間の下でタイマー関連の機能がまとめられ、他のグローバル変数との衝突を心配することなく開発を進められます。

タイマー設定における定数の活用例

タイマー設定においてconstによる定数定義を活用することは、コードの可読性と保守性を劇的に向上させます。特に、タイマーの遅延時間や間隔時間は、アプリケーションの動作に深く関わる重要な数値ですが、これらをマジックナンバーとしてコード中に直接記述してしまうと、その数値の意味が分かりにくくなり、後から変更する際に誤って別の箇所を修正してしまうリスクがあります。

例えば、以下のようにタイマー関連の定数をまとめて定義すると、コード全体の見通しが良くなります。


// タイマー関連の定数
const TIMER_CONFIG = {
  SHORT_DELAY: 1000,   // 1秒
  MEDIUM_DELAY: 3000,  // 3秒
  LONG_DELAY: 5000,    // 5秒
  UPDATE_INTERVAL: 1000 // 1秒間隔
};

// setTimeoutの例
setTimeout(() => {
  console.log("ショートディレイ後の処理");
}, TIMER_CONFIG.SHORT_DELAY);

// setIntervalの例
let count = 0;
const intervalHandler = setInterval(() => {
  console.log(`更新中: ${++count}`);
  if (count >= 5) {
    clearInterval(intervalHandler);
  }
}, TIMER_CONFIG.UPDATE_INTERVAL);

このように、意味のある名前を付けた定数で設定値を管理することで、開発者はその数値がどのような目的で使われているのかを一目で理解でき、変更が必要になった場合もTIMER_CONFIGオブジェクト内の該当プロパティを修正するだけで済みます。これにより、バグの発生を抑え、チーム開発におけるコードの一貫性を保つことにも貢献します。

JavaScriptの即時関数と値渡しの注意点

即時関数（IIFE）のメリット

即時実行関数式（Immediately Invoked Function Expression、通称IIFE：イフィー）は、定義と同時に実行されるJavaScriptの関数です。(function() { ... })();のような構文で記述され、プライベートなスコープを作成する強力な手段となります。これは、関数内で宣言された変数や関数がグローバルスコープを汚染するのを防ぎ、名前の衝突を回避するのに役立ちます。

タイマー機能と組み合わせる場合、IIFEはタイマーIDやコールバック関数で使用する変数を安全にカプセル化するのに非常に有効です。特に、複数のタイマーが並行して動作するような複雑なアプリケーションでは、IIFEを使ってそれぞれのタイマーに関連するロジックや状態を独立させることで、予期せぬ副作用を防ぎ、コードのモジュール性を高めることができます。


(function() {
  let privateCount = 0;
  const intervalId = setInterval(() => {
    privateCount++;
    console.log(`IIFE内のプライベートカウンター: ${privateCount}`);
    if (privateCount >= 3) {
      clearInterval(intervalId);
    }
  }, 1000);
})(); // 即時実行
// privateCountは外部からアクセス不可
// console.log(privateCount); // ReferenceError: privateCount is not defined

このように、IIFEは一時的なスコープが必要な場面や、ライブラリ・モジュールを記述する際に非常に有用であり、グローバルスコープの管理を劇的に改善します。

クロージャとタイマー内の変数

JavaScriptのクロージャは、関数がその「外側」にあるスコープ（レキシカル環境）の変数を記憶し、その関数がスコープ外で実行されてもそれらの変数にアクセスできる機能です。タイマーを使用する際、特にループ内でタイマーをセットする場合に、このクロージャの理解が非常に重要になります。なぜなら、タイマーのコールバック関数が実際に実行される時には、ループは既に終了しており、ループ変数が意図しない値になっていることがあるからです。


// 誤った例: i の値がすべて 3 になる
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 3, 3, 3 と表示される
  }, i * 100);
}

// 正しい例 1: クロージャで i の値をキャプチャする (IIFE)
for (var j = 0; j < 3; j++) {
  (function(capturedJ) {
    setTimeout(function() {
      console.log(capturedJ); // 0, 1, 2 と表示される
    }, capturedJ * 100);
  })(j);
}

// 正しい例 2: let を使用する (ブロックスコープ)
for (let k = 0; k < 3; k++) {
  setTimeout(function() {
    console.log(k); // 0, 1, 2 と表示される
  }, k * 100);
}

varで宣言された変数は関数スコープであるため、ループが終了した時点でのiの最終値がすべてのコールバック関数に参照されます。一方、IIFEを使ってjの値を引数として渡すことで、各タイマーが起動するたびにその時点のjの値がキャプチャされ、クロージャが形成されます。ES2015以降では、letキーワードを使用することで、各ループイテレーションごとに新しいブロックスコープが作成され、kの値が正しく保持されるため、より簡潔にこの問題を解決できます。

タイマーコールバックへの値渡し

setTimeout()やsetInterval()のコールバック関数に引数を渡したい場合、いくつかの方法があります。最も直接的な方法は、現代のブラウザではsetTimeoutとsetIntervalの第三引数以降に、コールバック関数に渡したい引数を指定することです。


// setTimeoutの追加引数を使用する例
setTimeout(function(name, age) {
  console.log(`こんにちは、${name}さん。${age}歳ですね。`);
}, 1000, "太郎", 30);

この方法はシンプルで理解しやすく、特別なクロージャを意識する必要がありません。しかし、古いブラウザではサポートされていない可能性があり、またsetIntervalで同じ引数を繰り返し渡す用途には適していますが、引数を動的に変化させたい場合には不向きです。

もう一つの一般的な方法は、クロージャを利用することです。これは、タイマーを設定する関数内で、引数として渡したい値を外側のスコープからキャプチャするラッパー関数を作成するアプローチです。


function greetAfterDelay(name, delay) {
  setTimeout(() => {
    console.log(`Hello, ${name}!`);
  }, delay);
}
greetAfterDelay("Alice", 2000);
greetAfterDelay("Bob", 1000);

この例では、greetAfterDelayが呼び出されるたびに新しい関数スコープが生成され、その中のname変数がsetTimeoutのコールバック関数によってキャプチャされます。これにより、それぞれのタイマーが異なるnameの値を保持し、正確に動作します。どちらの方法を選択するかは、サポートするブラウザ環境やコードの複雑性によって判断すると良いでしょう。

JavaScriptのタイマー機能をもっと便利に使うコツ

パフォーマンスとバッテリー消費への配慮

JavaScriptのタイマーは非常に便利ですが、不適切に使用するとウェブページのパフォーマンスを低下させたり、モバイルデバイスのバッテリーを過度に消費したりする原因となります。特にsetInterval()は、バックグラウンドタブでの動作や、視覚的な更新が不要な場合に過剰な処理を発生させる可能性があります。

ブラウザは、アクティブでないタブ（バックグラウンドタブや最小化されたウィンドウ）でのタイマーの実行を抑制（スロットリング）する機能を持っています。setTimeout()の最小遅延時間は4msとされており、これより短い遅延を指定しても、ほとんどのブラウザで4msとして扱われます。setInterval()では、バックグラウンドタブではさらに大きく遅延時間が引き延ばされることがあります（例えば1秒程度）。
パフォーマンスが重要なアニメーションには、requestAnimationFrame()の利用を検討すべきです。
出典: MDN Web Docs: requestAnimationFrame()
これはブラウザの描画サイクルに同期してコールバックを実行するため、よりスムーズなアニメーションと効率的なリソース使用が期待できます。タイマーを使用する際は、本当にその頻度での更新が必要か、ユーザーがその変化を視覚的に認識できるか、といった点を考慮し、適切な間隔を設定することが重要です。

高解像度タイマーと精度

JavaScriptのsetTimeout()やsetInterval()は、ミリ秒単位の遅延時間を指定できますが、その精度には限界があります。システム負荷やブラウザのイベントループの混雑状況によって、実際の実行タイミングは指定された時間より遅れることがあります。これは、JavaScriptのシングルスレッドモデルに起因し、他の同期的な処理がブロックされている間はタイマーのコールバックも実行されません。

より高精度な時間計測が必要な場合は、Performance APIのperformance.now()メソッドの利用を検討してください。
出典: MDN Web Docs: performance.now()
これは、システムの時間をマイクロ秒単位で提供し、ページロードからの経過時間を測定するために非常に適しています。ただし、これは時間を測定するためのものであり、指定した時間ちょうどに関数を実行するためのものではないことに注意が必要です。


const startTime = performance.now();

setTimeout(() => {
  const endTime = performance.now();
  console.log(`setTimeoutの実際の遅延時間: ${endTime - startTime}ms`);
}, 1000);

このようにperformance.now()を使って実際の遅延時間を計測することで、タイマーの動作精度を把握し、必要に応じてrequestAnimationFrame()への切り替えや、より洗練されたタイマー実装（例: サーバーとの時刻同期）を検討する際の判断材料にできます。

タイマーの抽象化とユーティリティ化

複雑なアプリケーションでは、複数のタイマーを管理したり、特定のロジックを持つタイマーを再利用したりする場面が多くなります。このような場合、生のsetTimeout()やsetInterval()を直接使うのではなく、それらを抽象化してカスタムタイマークラスやヘルパー関数としてユーティリティ化することが、コードの可読性、保守性、再利用性を高める上で非常に有効です。

例えば、Promiseベースの遅延関数を作成することで、非同期処理をより現代的かつ直感的に記述できるようになります。


// Promiseベースの遅延関数
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 使い方
async function showMessageWithDelay() {
  console.log("3秒待ちます...");
  await delay(3000);
  console.log("3秒経ちました！");
  await delay(1000);
  console.log("さらに1秒経ちました！");
}

showMessageWithDelay();

このように抽象化することで、非同期処理のシーケンスをasync/await構文を使ってまるで同期処理のように記述でき、コールバックのネスト（コールバック地獄）を避けることができます。また、特定のイベント発生後にのみタイマーを起動し、そのタイマーIDを自動的に管理・クリアするようなカスタムクラスを作成することも可能です。これにより、タイマー関連のロジックが散乱するのを防ぎ、アプリケーション全体の構造をきれいに保つことができます。