JavaScriptタイマー完全攻略！setTimeout・setIntervalを3ステップでマスター

こんにちは、とまだです。

JavaScriptでタイマー機能を実装しようとして、「setTimeoutとsetIntervalの違いがわからない」「タイマーが思うように動かない」と悩んでいませんか？

実は私も最初、タイマー処理でかなり苦戦しました。

特に非同期処理の概念が理解できずに、コードは書けても「なぜそうなるのか」が分からないまま進めていたんです。

でも大丈夫です。

今回は、JavaScriptのタイマー機能をキッチンタイマーに例えながら、誰でも3ステップで理解できるように解説していきます。

JavaScriptのタイマーとは？キッチンタイマーで理解する基本概念

JavaScriptのタイマーって、難しそうに感じますよね。

でも実は、キッチンタイマーと同じような仕組みなんです。

料理をする時のことを想像してみてください。

カップラーメンを作る時、3分のタイマーをセットしますよね。

そして、時間が来たら「ピピピッ」と音が鳴ります。

JavaScriptのタイマーも同じです。

// 3秒後に「時間です！」と表示
setTimeout(function() {
  console.log("時間です！");
}, 3000);

このコードは「3秒後に処理を実行する」という意味です。

3000はミリ秒単位なので、3秒を表しています。

なぜタイマー機能が必要なのか

「普通に順番に処理すればいいのでは？」

そう思うかもしれません。

でも、Webサイトでは様々な場面でタイマーが活躍します。

例えば、こんな場面です。

• 画像のスライドショー（3秒ごとに切り替え）
• 自動保存機能（5分ごとに保存）
• ローディング画面の表示（一定時間後に消える）
• ポップアップ広告（ページ表示から10秒後）

これらはすべて、タイマー機能なしでは実現できません。

つまり、時間を制御することで、より豊かなユーザー体験を提供できるんです。

setTimeoutとsetIntervalの違いを3分で完全理解

JavaScriptのタイマーには主に2つの関数があります。

それがsetTimeoutとsetIntervalです。

この2つの違い、実はとってもシンプルです。

setTimeout = 一度だけ実行

setTimeoutは目覚まし時計のようなものです。

セットした時間になったら、一度だけ鳴って終わります。

// 5秒後に一度だけメッセージを表示
setTimeout(function() {
  console.log("5秒経過しました");
}, 5000);

朝6時に目覚ましをセットしたら、6時に一度鳴るだけ。

それと同じです。

setInterval = 繰り返し実行

一方、setIntervalはメトロノームのようなものです。

一定の間隔で、ずっと繰り返し続けます。

// 2秒ごとに繰り返しメッセージを表示
setInterval(function() {
  console.log("2秒経過");
}, 2000);

音楽の練習で使うメトロノームが、一定のリズムを刻み続けるのと同じですね。

どちらを使うべきか

使い分けは目的によります。

• 一度だけ何かしたい → setTimeout
• 定期的に繰り返したい → setInterval

例えば、ページを開いて3秒後に「お知らせ」を表示するならsetTimeout。

時計のように1秒ごとに時刻を更新するならsetIntervalです。

初心者が必ずつまずく3つのポイントと解決法

タイマー機能を使い始めると、誰もが同じところでつまずきます。

私もプログラミングスクールで教えていた時、多くの受講生が同じ悩みを抱えていました。

1. ミリ秒単位を忘れる

最もよくある間違いです。

// ❌ 間違い：3秒のつもりが0.003秒
setTimeout(function() {
  console.log("すぐ表示される！");
}, 3);

// ✅ 正解：3秒 = 3000ミリ秒
setTimeout(function() {
  console.log("3秒後に表示");
}, 3000);

1秒 = 1000ミリ秒という変換を忘れがちです。

覚え方のコツは「秒数に1000をかける」こと。

5秒なら5000、10秒なら10000です。

2. タイマーを止め忘れる

setIntervalを使った時によくある問題です。

// タイマーを開始
const timerId = setInterval(function() {
  console.log("ずっと表示され続ける...");
}, 1000);

// タイマーを停止するには
clearInterval(timerId);

setIntervalは自動で止まりません。

必ずclearIntervalで停止する必要があります。

電気ポットの保温機能みたいなものです。

スイッチを切らない限り、ずっと動き続けてしまいます。

3. thisの参照がおかしくなる

オブジェクトのメソッド内でタイマーを使うと起こる問題です。

const counter = {
  count: 0,
  start: function() {
    // ❌ thisがwindowを指してしまう
    setTimeout(function() {
      this.count++; // エラーになる
    }, 1000);
  }
};

解決方法はアロー関数を使うことです。

const counter = {
  count: 0,
  start: function() {
    // ✅ アロー関数ならthisが正しく参照される
    setTimeout(() => {
      this.count++; // 正常に動作
    }, 1000);
  }
};

アロー関数は、外側のthisをそのまま引き継ぐ性質があります。

実践！3つの頻出パターンをマスターしよう

ここからは、実際によく使われるタイマーのパターンを見ていきましょう。

パターン1：カウントダウンタイマー

年末のカウントダウンやセールの終了時刻表示などで使われます。

let count = 10; // 10秒からスタート

const countdown = setInterval(() => {
  console.log(count + "秒");
  count--;
  
  if (count < 0) {
    clearInterval(countdown);
    console.log("終了！");
  }
}, 1000);

10秒からカウントダウンして、0になったら停止します。

ポイントは、条件を満たしたらclearIntervalで確実に停止することです。

パターン2：遅延実行の連鎖

複数の処理を順番に、時間差で実行したい時に使います。

setTimeout(() => {
  console.log("1番目の処理");
  
  setTimeout(() => {
    console.log("2番目の処理");
    
    setTimeout(() => {
      console.log("3番目の処理");
    }, 1000);
  }, 1000);
}, 1000);

1秒ごとに順番に処理が実行されます。

アニメーションの順次実行などで活用できます。

パターン3：定期的なデータ更新

リアルタイムで情報を更新したい時の基本パターンです。

// 5秒ごとに時刻を更新
setInterval(() => {
  const now = new Date();
  const time = now.toLocaleTimeString();
  console.log("現在時刻: " + time);
}, 5000);

株価表示やニュースフィードなど、定期的に最新情報を取得する場面で使われます。

タイマー処理のベストプラクティス

最後に、プロの現場で使われているタイマーのベストプラクティスをお伝えします。

メモリリークを防ぐ

使い終わったタイマーは必ず解除しましょう。

// ページを離れる時にタイマーを解除
window.addEventListener('beforeunload', () => {
  clearInterval(timerId);
  clearTimeout(timeoutId);
});

タイマーを放置すると、メモリを無駄に消費し続けます。

処理時間を考慮する

setIntervalで重い処理を行う時は注意が必要です。

処理が終わる前に次の処理が始まってしまうことがあります。

// より安全な定期実行
function safeInterval() {
  // 処理を実行
  doSomething();
  
  // 処理が終わってから次のタイマーをセット
  setTimeout(safeInterval, 1000);
}

safeInterval(); // 開始

この方法なら、前の処理が確実に終わってから次が始まります。

まとめ：タイマーマスターへの道

JavaScriptのタイマー機能、いかがでしたか？

キッチンタイマーやメトロノームに例えると、意外とシンプルだったのではないでしょうか。

重要なポイントをもう一度まとめます。

• setTimeout = 一度だけ実行（目覚まし時計）
• setInterval = 繰り返し実行（メトロノーム）
• ミリ秒単位を忘れずに（1秒 = 1000ミリ秒）
• 使い終わったら必ず解除する

これらを押さえれば、タイマー処理の基本は完璧です。

もし「もっと体系的にJavaScriptを学びたい」「実践的な練習問題で確実に身につけたい」と思った方は、Learning NextのJavaScriptカリキュラムがおすすめです。

タイマー処理はもちろん、非同期処理やAPIとの通信まで、豊富な練習問題で着実にスキルアップできます。

月額わずか2000円程度で、JavaScriptだけでなくReactやTypeScriptなど他の技術も学び放題。

独学で挫折しそうになった時こそ、体系的なカリキュラムが力になります。

次は、あなたがタイマー機能を使って素敵なWebサイトを作る番です。

一緒に頑張っていきましょう！