JavaScriptのsetIntervalとは？使い方と繰り返し処理の基本をわかりやすく解説

1.はじめに：setIntervalって何？
2.setInterval()の基本的な書き方
- 具体例
3.実行間隔を変えてみよう（1000ms＝1秒など）
- 例：0.5秒ごとに表示
- 例：2秒ごとに表示
4.処理を止める clearInterval() の使い方
- 基本の使い方：
- 補足ポイント：
5.よくあるエラー・注意点
6.実践：カウントアップのサンプルコード
- 解説
7.まとめ

1.はじめに：setIntervalって何？

JavaScriptには「一定時間ごとに同じ処理を繰り返す」ための関数があります。
それが setInterval() です。

たとえば、

1秒ごとに時計を更新する
数秒ごとに画像を切り替える
信号機の色を周期的に変える

といった動きを作るときに、setInterval はとても役立ちます。

本記事では、setInterval() の基本的な使い方から、処理の止め方、よくあるミスまでを
初心者にもわかりやすく解説していきます。

2.setInterval()の基本的な書き方

setInterval() は、指定した間隔（ミリ秒）ごとに関数を繰り返し実行する関数です。

基本の書き方は以下のとおりです：

setInterval(関数, 間隔);

具体例

setInterval(() => {
  console.log("1秒ごとに表示されます");
}, 1000);

このコードは、1秒（1000ミリ秒）ごとに “1秒ごとに表示されます” をコンソールに出力します。

補足：

間隔は ミリ秒（1秒＝1000） で指定します。
処理は「永遠に」繰り返されます（止めない限り）。

3.実行間隔を変えてみよう（1000ms＝1秒など）

setInterval() の第2引数で指定する値は「ミリ秒単位」です。
つまり、1000＝1秒、500＝0.5秒、2000＝2秒 という意味になります。

例：0.5秒ごとに表示

setInterval(() => {
  console.log("0.5秒ごとに表示されます");
}, 500);

例：2秒ごとに表示

setInterval(() => {
  console.log("2秒ごとに表示されます");
}, 2000);

このように、タイミングを自由に調整できるので、UIのアニメーションや通知のタイミング調整にもよく使われます。

4.処理を止める clearInterval() の使い方

setInterval() は、一度実行するとずっと繰り返し続けます。
そのため、「もう動かさなくていい」というタイミングで止める処理が必要になります。

それを行うのが clearInterval() です。

基本の使い方：

const timerId = setInterval(() => {
  console.log("実行中");
}, 1000);

// 5秒後に止める
setTimeout(() => {
  clearInterval(timerId);
  console.log("止めました");
}, 5000);

補足ポイント：

setInterval() の戻り値（ここでは timerId）を保存しておく必要があります。
clearInterval() にそのIDを渡すことで、処理を止められます。
setTimeout() と組み合わせて「一定時間だけ繰り返す」制御も可能です。

5.よくあるエラー・注意点

初心者が setInterval() を使うときに、つまずきやすいポイントやありがちなミスをまとめておきます。

タイマーIDを保存し忘れる

setInterval(() => {
  console.log("動くけど、止められない");
}, 1000);

// これでは clearInterval が使えない
clearInterval(); // 効かない

➡ 戻り値（timerId）を保存しないと止められません！

実行間隔が短すぎる

setInterval(() => {
  console.log("速すぎる");
}, 1); // 1ミリ秒

➡ 実際にはブラウザの最小タイマー間隔（約4ms以上）になる上、
CPUに負担をかけるのでやりすぎ注意！

処理の中で重い処理をしている

setInterval(() => {
  for (let i = 0; i < 1000000000; i++) {} // 重すぎる！
}, 1000);

➡ 繰り返し処理が終わらないうちに次の処理が来てしまい、フリーズすることも。

対策まとめ

必ず 戻り値（ID）を変数に保存
処理の重さや実行間隔に注意
setTimeout との併用でより柔軟な制御もできる

6.実践：カウントアップのサンプルコード

ここでは setInterval() を使って、1秒ごとに数字が増えていくカウントアップ表示を作ってみましょう。

HTML:

<p id="counter">0</p>

JavaScript:

let count = 0;
const counterElement = document.getElementById("counter");

const timerId = setInterval(() => {
  count++;
  counterElement.textContent = count;

  if (count >= 10) {
    clearInterval(timerId);
    console.log("カウント終了");
  }
}, 1000);