CONTENTS
  1. HOME
  2. JavaScript
  3. JavaScriptとDOM
  4. JavaScriptで秒単位での繰り返しsetTimeout / setInterval

JavaScriptで秒単位での繰り返しsetTimeout / setInterval

完成イメージ

ページを開くと、画面いっぱいの色付きの「ローディング画面」が表示されsetTimeout() を使って、1秒後にそれがフェードアウト。本体のコンテンツ（背景やテキスト）が現れるJavaScriptを作成してみましょう

今回のテーマ

JavaScriptの setTimeout や setInterval を使って、時間の経過によってDOMの内容を変化させる方法を学びます。簡単な表示の切り替えや、スライドショーの基本が作れるようになります。

目的

  • setTimeout() の基本的な使い方を理解する
  • setInterval() を使って、定期的にDOMを変化させる方法を体験する
  • 時間の流れに合わせてUIを動かす基本ロジックを学ぶ

作成ファイル・保存場所

js-domフォルダに以下のファイルを作成してください。

ファイル名内容
js-dom10.html画面がローディングする
js-dom__10.htmlステップアップ練習用HTML/js
練習するHTMLは下記からコピーしてください。
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>js-dom08：タイマーでDOMを動かす</title>
</head>

<body>
    <h1>タイマーでメッセージを表示</h1>
    <p id="message">3秒後にメッセージが表示されます。</p>

    <h2>カウントアップ</h2>
    <p>秒数：<span id="counter">0</span></p>
    <button id="start-btn">スタート</button>
    <button id="stop-btn">ストップ</button>
    <script>



    </script>
</body>

</html>

JavaScriptは <script> タグ内に直接記述してください（内部JS）

チェックポイント

  • 一定間隔でDOMの内容が自動で切り替わっているか？
  • 一定時間後にテキストや画像を変更できているか？
  • 停止ボタンで繰り返し処理を止められているか？

JavaScript基礎トレーニング 1

setTimeoutでローディング風

ページを開くと、画面いっぱいの色付きの「ローディング画面」が表示されsetTimeout() を使って、1秒後にそれがフェードアウト。本体のコンテンツ（背景やテキスト）が現れる

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ローディング画面</title>
  <style>
    body {
      margin: 0;
      font-family: sans-serif;
    }

    .loading {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background: #007bff;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
      z-index: 1000;
      transition: opacity 0.5s;
    }

    .loading.hide {
      opacity: 0;
      pointer-events: none;
    }

    .main {
      padding: 2rem;
    }
  </style>
</head>
<body>

  <div class="loading" id="loading">Loading...</div>

  <div class="main">
    <h1>メインコンテンツ</h1>
    <p>これはsetTimeoutを使って、1秒後にローディング画面を消す例です。</p>
  </div>

  <script>
    window.addEventListener('DOMContentLoaded', () => {
      setTimeout(() => {
        document.getElementById('loading').classList.add('hide');
      }, 1000); // 1秒後にローディングを非表示に
    });
  </script>

</body>
</html>

JavaScript基礎トレーニング 2

簡単なタイマーを作成してみよう！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>現在時刻を表示（スタート・ストップ）</title>
  <style>
    #timer {
      font-size: 2rem;
      margin: 20px 0;
    }
    button {
      font-size: 1rem;
      margin-right: 10px;
      padding: 0.5em 1em;
    }
  </style>
</head>
<body>
  <h2>現在時刻</h2>
  <div id="timer">--:--:--</div>
  <button id="start">スタート</button>
  <button id="stop">ストップ</button>

  <script>
    let timerId = null;

    const countTime = () => {
      const timer = document.getElementById('timer');
      const date = new Date();
      timer.textContent = date.toLocaleString();
    };

    document.addEventListener('DOMContentLoaded', () => {
      const startBtn = document.getElementById('start');
      const stopBtn = document.getElementById('stop');

      startBtn.addEventListener('click', () => {
        if (timerId === null) {
          countTime(); // 最初に即時表示
          timerId = setInterval(countTime, 1000);
        }
      });

      stopBtn.addEventListener('click', () => {
        if (timerId !== null) {
          clearInterval(timerId);
          timerId = null;
        }
      });
    });
  </script>
</body>
</html>
処理内容
timerId = setInterval(...)タイマーを開始し、IDを保存します
clearInterval(timerId)タイマーを止めます
if (timerId === null)すでにスタートしていたら二重起動しないよう防止します
countTime() を即時実行スタートを押したときすぐ時刻が更新されます（1秒待たず）

JavaScript基礎トレーニング 3

カウントダウンを作成

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>js-dom08：タイマーでDOMを動かす</title>
</head>

<body>
    <h1>タイマーでメッセージを表示</h1>
    <p id="message">3秒後にメッセージが表示されます。</p>

    <h2>カウントアップ</h2>
    <p>秒数：<span id="counter">0</span></p>
    <button id="start-btn">スタート</button>
    <button id="stop-btn">ストップ</button>
    <script>
        // setTimeout の例
        let message = document.getElementById('message');
        setTimeout(() => {
            message.textContent = 'こんにちは、JavaScript！';
        }, 3000);

        // setInterval の例
        let count = 0;
        let intervalId;
        let startBtn = document.getElementById('start-btn');
        let stopBtn = document.getElementById('stop-btn');

        startBtn.addEventListener('click', () => {
            // 二重スタート防止
            startBtn.disabled = true;
            // setInterval をスタートしたときに ID が返される
            intervalId = setInterval(() => {
                count++;
                document.getElementById('counter').textContent = count;
            }, 1000);
        });
        stopBtn.addEventListener('click', () => {
            // この intervalId を使って clearInterval で止める
            clearInterval(intervalId);
            startBtn.disabled = false; // 再スタート可能
        });
    </script>
</body>

</html>

setInterval() を使うと、JavaScriptは「ID番号」を返します。
このIDを変数（例：intervalId）に保存しておくと、あとから clearInterval(intervalId) で止めることができます。逆に言えば、IDを保存しておかないと、止める方法がなくなってしまうのです。

disabled プロパティとは？

  • disabled は button, input, select などのフォーム系要素に使える 真偽値のプロパティ
  • 値が true のとき → ユーザーはクリックなどの操作ができなくなります
  • HTMLでは次のように使われます
<button disabled>送信</button>  <!-- 最初から無効 -->

JavaScriptでは、HTMLに disabled 属性が書かれていなくても、あとから .disabled = true で操作可能です。

よくある間違いとの比較

属性っぽく setAttribute() を使うと、挙動が複雑になることがあります

startBtn.setAttribute('disabled', '');  // 一応動くが推奨されない

startBtn.disabled = true;  // ← こちらが推奨される書き方

setInterval()

一定時間ごとに繰り返し関数を実行します。

setInterval(() => {
  console.log("毎秒表示される");
}, 1000);

clearInterval()

setInterval を止めるには、そのIDを保存して clearInterval(id) を実行します。

const timerId = setInterval(() => {
  console.log("動いてます");
}, 1000);

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

setTimeout()

一定時間後に1回だけ関数を実行します。

setTimeout(() => {
  console.log("3秒後に表示される");
}, 3000); // 単位はミリ秒

アニメーション開始を1秒遅らせる

setTimeout() を繰り返し呼び出すことで、「次の処理まで一定時間待つ」といった制御ができます。

たとえば、Web Animations API の .animate() の delay プロパティも、実質的には setTimeout() と同じ効果です。

document.querySelector('#box').animate(
  [
    { opacity: 1 },
    { opacity: 0 }
  ],
  {
    duration: 500,
    delay: 1000,      // ← ここが遅延ポイント
    fill: 'forwards'
  }
);

setTimeout()を使ってactiveというclassを1秒後に外します。

const box = document.querySelector('#box');
box.classList.add('active');

setTimeout(() => {
  box.classList.remove('active');
}, 1000);

jQueryとの違い

jQueryには .delay() というメソッドがありますが、JavaScriptには存在しません。
JavaScriptでは同様の効果を setTimeout() で実現します。

1回だけではなく、繰り返し処理でも使える！

setTimeout() は1回だけ実行される関数ですが、再帰的に呼び出すことで繰り返し処理も可能です。実務では setInterval() よりも setTimeout() の繰り返しが使われる場面が多いです。

  • 次の処理を開始するタイミングを制御しやすい
  • 前の処理が終わるまで待つことができる
  • アニメーションなどで柔軟な停止や再開ができる
//setTimeoutの再帰的な使い方

const showMessage = () => {
  console.log("繰り返し表示");
  setTimeout(showMessage, 1000); // 再度実行
}

showMessage();

JavaScriptステップアップトレーニング

APIを使ったスライドショー

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>js-dom__08：猫スライドショー（setTimeout使用）</title>
    <style>
        #slide-img {
            width: 400px;
            height: 300px;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <h1>猫スライドショー（3秒ごとに画像が変わります）</h1>
    <div id="slideshow">
        <img id="slide-img" src="" alt="猫の画像">
    </div>
    <button id="toggle-btn">スライドショーを止める</button>

    <script>
        const slideImg = document.getElementById('slide-img');
        const toggleBtn = document.getElementById('toggle-btn');
        let isStopped = false;
        let timeoutId;

        function fetchCatImage() {
            if (isStopped) return;

            fetch('https://api.thecatapi.com/v1/images/search')
                .then(response => response.json())
                .then(data => {
                    const imgUrl = data[0].url;
                    slideImg.src = imgUrl;

                    // 次の画像を3秒後に表示
                    timeoutId = setTimeout(fetchCatImage, 3000);
                })
                .catch(error => {
                    slideImg.alt = '画像の取得に失敗しました。';
                    console.error('猫画像の取得エラー:', error);
                });
        }

        // 最初のスタート
        fetchCatImage();

        // 再生／停止ボタンの切り替え
        toggleBtn.addEventListener('click', () => {
            isStopped = !isStopped;

            if (isStopped) {
                clearTimeout(timeoutId);
                toggleBtn.textContent = 'スライドショーを再開する';
            } else {
                toggleBtn.textContent = 'スライドショーを止める';
                fetchCatImage(); // 再開
            }
        });
    </script>
</body>

</html>

setTimeout を使った繰り返しのしくみ

通常、繰り返し処理には setInterval() を使いますが、実務や制御が必要な場合には setTimeout() を繰り返し呼ぶ方法がよく使われます。

function repeat() {
  // ここで何かの処理
  console.log('処理実行');

  // 自分自身を一定時間後に再度呼び出す
  setTimeout(repeat, 3000);
}

setTimeout(repeat, 3000); // 初回スタート
比較ポイントsetInterval()setTimeout() を繰り返す場合
タイミングの制御固定間隔（ズレやすい）毎回ずらせる（調整しやすい）
前の処理が終わる前に次が始まる起こりうる起こりにくい（次を後に設定）
停止や条件分岐との相性少し扱いづらいif文や停止処理との相性が良い

フラグ変数 isStopped の意味

let isStopped = false;

この変数は、「スライドショーを止めるかどうか」を記録しておくための フラグ（目印）です。

if (isStopped) return;

このように、true になったら次の setTimeout() を実行せず、処理をストップできます。

なぜフラグが必要なの？

setTimeout() は一度設定すると、止める手段がないため、自分で「止めるかどうか」を判断する条件が必要になります。
その役割を担うのがこの isStopped です。