【6日でできるJavaScript入門】一定間隔で処理を繰り返すsetInterval
Webアプリケーションやインタラクティブなページを作るとき、「一定の間隔で何度も処理を繰り返したい」場面がよくあります。JavaScriptのsetInterval()は、指定した間隔ごとに自動的に処理を繰り返してくれる関数です。例えば、時計の表示更新やスライドショー、ランダムな数値の表示など、リアルタイムな変化を加える場合に不可欠です。
ここでは、setInterval()の基本的な使い方から、実践的な利用例や繰り返し処理の停止方法まで、サンプルプログラムとともに詳しく解説します。
１．setIntervalの基本的な使い方
1.1. setIntervalの書式と基本動作
| 書式 | 意味 |
|---|---|
| setInterval(関数, 間隔) | 指定した間隔で関数を繰り返し実行 |
| setInterval(function(){ ... }, ms) | 無名関数を使う場合 |
- 関数：定期的に呼び出したい処理の関数名（カッコなしで記述）
- 間隔：繰り返しの間隔（ミリ秒、1000ms=1秒）
例：1秒ごとにメッセージを表示
setInterval(function(){
console.log('こんにちは！');
}, 1000); // 1秒ごと出力例
こんにちは！
こんにちは！
...1.2. ID管理とclearIntervalによる停止
繰り返し処理を途中で止めたい場合は、setInterval()の返り値（ID）を変数で受け取り、そのIDをclearInterval()に渡して停止します。
| 操作 | 書式 | 例 |
|---|---|---|
| 繰り返し処理の開始 | let id = setInterval(関数, ms); | let timer = setInterval(abc, 2000); |
| 繰り返し処理の停止 | clearInterval(id); | clearInterval(timer); |
２．setIntervalの実用例とHTML応用
2.1. 時計の自動更新
サンプル：現在の時刻を1秒ごとに更新して表示
ファイル名： lesson29-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>⏰ 時計の自動更新サンプル</title>
</head>
<body>
<h2>今の時刻は…</h2>
<p id="clock">--:--:--</p>
<button id="stop">時計を止める</button>
<script>
function updateClock() {
let now = new Date();
let t = now.getHours().toString().padStart(2,'0') + ':' +
now.getMinutes().toString().padStart(2,'0') + ':' +
now.getSeconds().toString().padStart(2,'0');
document.getElementById('clock').textContent = t;
}
let timerId = setInterval(updateClock, 1000);
updateClock(); // 初回もすぐに表示
document.getElementById('stop').addEventListener('click', function(){
clearInterval(timerId);
document.getElementById('clock').textContent = '時計は停止中です';
});
</script>
</body>
</html>ブラウザの出力例
2.2. スライドショー（画像の自動切り替え）
サンプル：画像を2秒ごとに自動で切り替え、停止ボタンでストップ
素材のダウンロード
以下のリンクから使用する素材をダウンロードできます。
| pic01.png | pic02.png | pic03.png |
|---|---|---|
 |  |  |
ファイル名： lesson29-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>🖼️ スライドショーサンプル</title>
</head>
<body>
<h2>スライドショー</h2>
<img id="slide" src="pic01.png" width="300">
<br>
<button id="pause">スライドショー停止</button>
<script>
let images = ["pic01.png", "pic02.png", "pic03.png"];
let idx = 0;
function showNext() {
idx = (idx + 1) % images.length;
document.getElementById('slide').src = images[idx];
}
let slideId = setInterval(showNext, 2000);
document.getElementById('pause').addEventListener('click', function(){
clearInterval(slideId);
});
</script>
</body>
</html>ブラウザの出力例
画像が2秒ごとに自動で切り替わる
３．setIntervalの応用
3.1. 引数を渡す場合（無名関数）
- setIntervalは関数名()ではなく関数名だけ指定。引数を渡したい場合は無名関数でラップする。
setInterval(function(){
customFunction("メッセージ");
}, 3000);
function customFunction(msg){
console.log(msg);
}3.2. アニメーション制御や残り時間カウント
例：カウントダウンタイマー（1秒ごとに減少し0で停止）
<p id="timer"></p>
<script>
let count = 10;
let id = setInterval(function(){
document.getElementById('timer').textContent = count + "秒前";
count--;
if(count < 0){
clearInterval(id);
document.getElementById('timer').textContent = "時間切れです！";
}
}, 1000);
</script>出力例
10秒前
9秒前
...
時間切れです！まとめ
setInterval()は一定間隔で繰り返し処理を実行できる便利なメソッド。- 停止には
clearInterval()を使う。 - 時計やスライドショー、カウントダウンなど、動きのあるWebページに必須の技術。
- 無名関数を使うことで、柔軟な処理や引数の受け渡しも可能。
- 実用例や応用パターンを活用し、インタラクティブなサイト作りに役立てましょう。