【JavaScript入門】カウントダウンタイマーの作り方｜setIntervalで簡単に実装する方法

JavaScriptでは、setInterval() を使うことで簡単にカウントダウンタイマーを作ることができます。
指定した秒数から1秒ずつ減らしていき、0になったら終了する仕組みです。

この記事では、初心者でも理解しやすいように、カウントダウンタイマーの作り方を丁寧に解説します。
開始ボタン・停止ボタン付きの実用的なサンプルも紹介します。

カウントダウンタイマーの基本構造

カウントダウンタイマーは、次の3つの要素で構成されます。

• 残り時間を管理する変数
• 1秒ごとに処理を実行する setInterval()
• タイマーを停止する clearInterval()

基本のカウントダウン処理

let time = 10; // 10秒
let timer;

timer = setInterval(() => {
    console.log(time);
    time--;

    if (time < 0) {
        clearInterval(timer);
        console.log("終了！");
    }
}, 1000);

このコードでは、10秒から1秒ずつ減らし、0になったらタイマーを停止します。

開始・停止ボタン付きのカウントダウンタイマー

次は、実際にHTMLと組み合わせて、開始ボタンと停止ボタンを使ったカウントダウンタイマーを作ってみましょう。

JavaScriptコード

let time = 10;
let timer;

function startCountdown() {
    timer = setInterval(() => {
        document.getElementById("count").textContent = time;
        time--;

        if (time < 0) {
            clearInterval(timer);
            alert("カウントダウン終了！");
        }
    }, 1000);
}

function stopCountdown() {
    clearInterval(timer);
}

HTMLコード

<div>残り時間：<span id="count">10</span> 秒</div>
<button onclick="startCountdown()">開始</button>
<button onclick="stopCountdown()">停止</button>

開始ボタンを押すとカウントダウンが始まり、停止ボタンで途中停止できます。

よくあるエラーと対処法

• 開始ボタンを連打するとタイマーが複数動く → 開始前に clearInterval() を呼ぶ
• 0になっても止まらない → if (time < 0) の条件を確認
• 表示が更新されない → document.getElementById() のIDを確認

まとめ

• setInterval を使えば簡単にカウントダウンが作れる
• 開始・停止ボタンを組み合わせると実用的になる
• 連打対策には clearInterval が必須
• 正確なカウントダウンには setTimeout 方式も有効