JavaScriptのsetInterval()メソッドは、指定した時間間隔で繰り返し処理を実行できる便利な機能です。この記事では、setInterval()の基本的な使い方から実践的な例まで、わかりやすく解説します。

setInterval()の基本構文

setInterval(実行する関数, ミリ秒);

例えば、1秒(1000ミリ秒)ごとに処理を実行する場合は以下のように記述します：

setInterval(() => {
    console.log('1秒ごとに実行されます');
}, 1000);

setInterval()の使用例

1. シンプルなカウントアップ

let count = 0;
setInterval(() => {
    count++;
    console.log(count);
}, 1000);

2. デジタル時計の表示

setInterval(() => {
    const now = new Date();
    const time = now.toLocaleTimeString();
    console.log(time);
}, 1000);

setInterval()の停止方法

setInterval()を停止するには、clearInterval()メソッドを使用します：

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

// 5秒後に停止
setTimeout(() => {
    clearInterval(intervalId);
    console.log('停止しました');
}, 5000);

よくある使用シーン

1. アニメーション制御

2. データの定期的な更新

3. カウントダウンタイマー

4. 自動スライドショー

実践的な例：カウントダウンタイマー

function startCountdown(seconds) {
    const countdownElement = document.getElementById('countdown');
    let remainingTime = seconds;

    const intervalId = setInterval(() => {
        countdownElement.textContent = remainingTime;
        remainingTime--;

        if (remainingTime < 0) {
            clearInterval(intervalId);
            countdownElement.textContent = '終了！';
        }
    }, 1000);
}

// 10秒のカウントダウンを開始
startCountdown(10);

注意点

1. メモリリーク防止のため、不要になったsetIntervalは必ずclearIntervalで停止しましょう

2. ミリ秒の指定は1000以上を推奨（ブラウザの負荷を考慮）

3. タブが非アクティブの場合、処理が遅延する可能性があります

まとめ

setInterval()は、JavaScriptで定期的な処理を実装する際の強力なツールです。適切に使用することで、動的なWebアプリケーションの開発が可能になります。ただし、パフォーマンスとメモリ管理に注意を払いながら使用することが重要です。

より詳細な情報は、MDNのsetInterval()のドキュメントを参照することをお勧めします。

以上で、setInterval()の基本から実践的な使用方法まで、網羅的に解説しました。この記事を参考に、ぜひ素晴らしいWebアプリケーションを開発してください。