JavaScriptで時間を使った処理を書こうとすると、必ず出てくるのが setTimeout と setInterval。一見似ているこの2つ、実は使い方を間違えると 無限ループ地獄 や 思わぬバグ にハマってしまうこともあります。
この記事では、「初心者がやりがちな勘違い」と「正しい使い分け方」「クリア（停止）の方法」まで、実例を交えてわかりやすく解説します。
Contents
🔁 まずは違いをざっくり比較
| 関数名 | 処理回数 | 実行間隔の挙動 |
|---|---|---|
setTimeout | 1回だけ | 指定ミリ秒後に一度だけ実行 |
setInterval | 繰り返し実行 | 指定間隔で何度も自動で繰り返す |
✅ 基本的な使い方
setTimeout
setTimeout(() => {
console.log('3秒後に一度だけ表示されるよ');
}, 3000);
上のコードは、3秒後に一度だけコンソールに表示されます。
setInterval
setInterval(() => {
console.log('2秒ごとに表示されるよ');
}, 2000);
これは2秒ごとに何度も繰り返して表示され続けます。明示的に止めない限り、ずーっと実行されます。
😱 初心者がハマりやすい「setIntervalの罠」
❌ setIntervalが止まらない問題
たとえば以下のようなコード：
setInterval(() => {
alert('こんにちは！');
}, 1000);
これを実行するとどうなるでしょう？
✅ 1秒ごとにアラートが表示され続けて、閉じても閉じてもまた表示されます。
まさに止まらない地獄。しかも setInterval の戻り値を使っていないため、停止する術がありません。
🛑 正しい止め方：clearInterval
setInterval や setTimeout を止めるには、**戻り値（ID）**を受け取って、それを clearInterval や clearTimeout に渡します。
const intervalId = setInterval(() => {
console.log('動いてる...');
}, 1000);
// 5秒後に停止
setTimeout(() => {
clearInterval(intervalId);
console.log('止めました！');
}, 5000);
ポイント：
setInterval()はIDを返す → これを使わないと止められないsetTimeout()も同様にclearTimeout()で停止可能
🧠 実用的な使い分けのコツ
| シチュエーション | 適した関数 |
|---|---|
| アニメーション1回だけ | setTimeout |
| カウントダウンの1秒更新 | setInterval |
| ボタンを押してから数秒後に処理開始 | setTimeout |
| APIポーリング（定期的にデータ取得） | setInterval |
| 一定間隔で処理したいけど柔軟に制御したい | setTimeout + 再帰 |
⛓️ 実は setTimeout のほうが柔軟なこともある？
例えば、「次の処理まで前の処理が終わるのを待ちたい」という場合、 setTimeout を再帰的に呼び出すことで柔軟に制御できます。
function loop() {
console.log('処理中...');
setTimeout(loop, 1000); // 1秒ごとに再実行
}
loop(); // 最初の呼び出し
この方法なら途中で「もういいや」と止めたくなったときに フラグ を使って処理中止も簡単です。
💥 setTimeout も地味に危険な使い方
❌ 間違ったループ
for (let i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i);
}, 1000);
}
期待する出力は：
0
1
2
3
4
しかし実際は 全部「5」になることがある（varを使った場合や古い文法）。
対策：let を使う or クロージャーを使う。
🧪 実例：3秒後に「推し数を更新」→ その後毎秒1回チェック
// 一度だけ3秒後に初回実行
setTimeout(() => {
updateLikes();
// 以後1秒ごとに繰り返し実行
const interval = setInterval(updateLikes, 1000);
// 30秒後に停止
setTimeout(() => clearInterval(interval), 30000);
}, 3000);
このように組み合わせて使うと、より直感的で制御しやすい処理が書けます。
🔚 まとめ：setTimeout vs setInterval
| 比較項目 | setTimeout | setInterval |
|---|---|---|
| 実行回数 | 1回 | 無限（停止しないと） |
| 停止方法 | clearTimeout | clearInterval |
| 柔軟な制御 | 再帰的に使えば可能 | 固定間隔で安定 |
| おすすめ用途 | 遅延処理・1回実行 | タイマー・繰り返し |
✍️ 最後に一言
setInterval は一見便利に見えますが、「止め忘れたら一生走り続ける」というリスクがあります。初心者のうちは setTimeout を再帰で使ったほうが安全・柔軟でおすすめです。
タイマー処理は、アニメーション、ポーリング、ゲーム、通知など、Web開発のあらゆる場面で使われます。この2つの違いと注意点をマスターしておくことで、あなたのJavaScript力は確実に一歩上がります！
