JavaScript `setInterval` の使い方【初心者向け】

繰り返し処理をしたいときに使える便利な関数

🔁 setIntervalとは？

setInterval() は,指定した間隔で関数を繰り返し実行する関数です。

setInterval(関数, 繰り返し間隔ms);

🕒 例：現在時刻を1秒ごとに表示


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リアルタイム時計</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      padding: 50px;
      background: #f9f9f9;
    }
    h1 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    #clock {
      font-size: 2.5rem;
      font-weight: bold;
      color: #333;
    }
  </style>
</head>
<body>

  <h1>🕒 現在の時刻</h1>
  <div id="clock">--:--:--</div>

  <!-- スクリプト -->
  <script>
    setInterval(() => {
      const now = new Date();
      const time = now.toLocaleTimeString();
      document.getElementById("clock").textContent = time;
    }, 1000);
  </script>

</body>
</html>

👇これが出る👇

--:--:--

🧩 setIntervalの応用テクニックと注意点

setInterval() は非常に便利な関数ですが、適切な使い方をしないとパフォーマンスや動作に問題が発生することもあります。本節では、より実践的な活用方法と気をつけるべきポイントを紹介します。

🎯 効果的な使用シーン

たとえば、UIの更新やアニメーション処理などで setInterval() は活躍します。具体的には、デジタル時計 のリアルタイム表示、残り時間のカウントダウン、定期通知 などが挙げられます。

⚠ 無限ループに注意

setInterval() を使用する際は、停止処理を忘れないようにしましょう。たとえば条件に応じて clearInterval() を呼び出す設計にしないと、ユーザーが画面を離れても処理が続いてしまい、メモリを圧迫することがあります。

🧪 setTimeoutとの違い

似た機能を持つ setTimeout() は「一度だけ実行する」のに対して、setInterval() は「繰り返し実行する」ため、用途に応じて使い分けが必要です。

このように、setInterval() は初心者でも扱いやすい一方で、場面に応じた適切な使い方を意識することが大切です。