JavaScriptで定期実行！初心者でも分かる10の使い方とサンプルコード

JavaScriptで定期実行を行う方法を初心者にも分かりやすく解説したイメージ JS
2024.03.24
この記事は約13分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptで定期実行を行う方法が分かり、さまざまな使い方を理解できるようになります。

●JavaScriptで実現する定期実行の基本

JavaScriptは多くのウェブアプリケーションで利用される言語です。

この記事では、JavaScriptを用いて定期的なタスクを実行する方法について詳しく解説します。

この知識を身につけることで、さまざまな用途にJavaScriptを応用することができるようになります。

●setIntervalを使った繰り返し処理

JavaScriptで定期実行を行う主要な方法の一つが、setInterval関数です。

この関数は指定された時間間隔ごとにコードを繰り返し実行する機能を持ちます。

例えば、ユーザーインターフェイスを定期的に更新する場合や、一定時間ごとにサーバーからデータを取得する際に非常に有効です。

○setTimeoutでの一回限りの遅延実行

もう一つの重要な関数がsetTimeoutです。

この関数は、指定された時間が経過した後に、コードを一度だけ実行する機能を持ちます。

setTimeoutは、遅延実行が必要な場合、例えば特定のイベント後にアニメーションを開始する際などに役立ちます。

●JavaScriptにおける定期実行の使い方とサンプルコード

JavaScriptで定期実行の機能を実装する方法を見ていきましょう。

ここでは、JavaScriptにおける定期実行の典型的なテクニックとしてsetIntervalとsetTimeoutを用いたサンプルコードをご紹介します。

○サンプルコード1：setIntervalを活用したJavaScriptの定期実行

JavaScriptで簡単に定期実行を実現する一つの方法は、setInterval関数を使用することです。

// 定期実行したい関数
function sampleFunction() {
  console.log("定期実行中");
}

// 1000ミリ秒（1秒）ごとにsampleFunctionを実行
let intervalID = setInterval(sampleFunction, 1000);

上記のサンプルでは、sampleFunctionという関数が1秒ごとに実行されています。

setIntervalはJavaScriptの定期実行において基本的な関数です。

○サンプルコード2：setTimeoutによるJavaScriptでの繰り返し実行

もう一つの方法はsetTimeout関数を利用することです。

この関数は一定時間後に一度だけ関数を実行しますが、適切に使用することで繰り返し実行が可能です。

// 定期実行したい関数
function sampleFunction() {
  console.log("定期実行中");
  // 1000ミリ秒（1秒）後に再度sampleFunctionを実行
  setTimeout(sampleFunction, 1000);
}

// 初回実行
sampleFunction();

こちらのサンプルでは、setTimeoutを使って1秒ごとにsampleFunctionが実行されるように設定しています。

○サンプルコード3：setTimeoutでsetIntervalのようにJavaScriptで定期実行する方法

最後に、setTimeoutを用いてsetIntervalのような繰り返し実行を行うテクニックを紹介します。

// 定期実行したい関数
function sampleFunction() {
  console.log("定期実行中");
  // 1000ミリ秒（1秒）後に再度sampleFunctionを実行
  setTimeout(sampleFunction, 1000);
}

// 初回実行
sampleFunction();

このコードは、前のサンプルと似ていますが、ここではsetTimeoutを使いsetIntervalのような振る舞いを実現しています。

JavaScriptにおける定期実行には様々な方法があることがわかります。

○サンプルコード4：JavaScriptで条件付きの定期実行を制御する

JavaScriptを使った条件付きの定期実行を行う方法について見てみましょう。

下記のサンプルコードでは、特定の条件が満たされた時点で定期実行を停止する方法を表しています。

let count = 0;

// 定期実行したい関数
function sampleFunction() {
  console.log("定期実行中");
  count++;

  // countが5になったら定期実行を停止
  if (count >= 5) {
    clearInterval(intervalID);
  }
}

// 1000ミリ秒（1秒）ごとにsampleFunctionを実行
let intervalID = setInterval(sampleFunction, 1000);

この例では、count変数が5に達すると、clearIntervalを使って定期実行を停止します。

JavaScriptにおける定期実行の柔軟な制御を示しています。

○サンプルコード5：JavaScriptでイベントに応じて定期実行を開始・停止する方法

JavaScriptを利用して、ユーザーのインタラクションに応じて定期実行を開始または停止する方法を見ていきましょう。

<button id="startButton">開始</button>
<button id="stopButton">停止</button>

<script>
let intervalID;

// 定期実行したい関数
function sampleFunction() {
  console.log("定期実行中");
}

// 開始ボタンがクリックされたときの処理
document.getElementById("startButton").addEventListener("click", () => {
  if (!intervalID) {
    intervalID = setInterval(sampleFunction, 1000);
  }
});

// 停止ボタンがクリックされたときの処理
document.getElementById("stopButton").addEventListener("click", () => {
  clearInterval(intervalID);
  intervalID = null;
});
</script>

このコードでは、HTMLのボタンをクリックすることで定期実行を制御しています。

開始ボタンをクリックすると定期実行が開始し、停止ボタンをクリックすると停止します。

JavaScriptでのイベント駆動型のプログラミングの一例です。

●JavaScriptで実装する定期実行の応用例

JavaScriptの定期実行機能は多岐にわたる応用が可能です。

ここでは、アニメーション、スライドショー、時刻表示の更新など、具体的な使用例をサンプルコードと共に紹介します。

○サンプルコード6：JavaScriptで実装するアニメーションの例

Webページに動きを加える際、JavaScriptの定期実行は大いに役立ちます。

特に、アニメーションの実装にはこの機能が必須です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    #box {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script>
    const box = document.getElementById("box");
    let position = 0;

    function animate() {
      position += 1;
      box.style.left = position + "px";

      if (position < 300) {
        requestAnimationFrame(animate);
      }
    }

    requestAnimationFrame(animate);
  </script>
</body>
</html>

このコードでは、requestAnimationFrameを用いて、HTML要素の位置を更新しアニメーションを作成しています。

○サンプルコード7：自動スライドショーの実装例

JavaScriptの定期実行機能は、画像のスライドショーのような自動更新機能にも適用できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    .slide {
      display: none;
    }
    .active {
      display: block;
    }
  </style>
</head>
<body>
  <img class="slide active" src="image1.jpg" alt="スライド1">
  <img class="slide" src="image2.jpg" alt="スライド2">
  <img class="slide" src="image3.jpg" alt="スライド3">
  <script>
    const slides = document.getElementsByClassName("slide");
    let currentIndex = 0;

    function changeSlide() {
      slides[currentIndex].classList.remove("active");
      currentIndex = (currentIndex + 1) % slides.length;
      slides[currentIndex].classList.add("active");
    }

    setInterval(changeSlide, 3000);
  </script>
</body>
</html>

このコードでは、setIntervalを使用して3秒ごとに画像を切り替えるスライドショーを作成しています。

○サンプルコード8：リアルタイム時刻表示の更新

リアルタイムの時刻表示もJavaScriptの定期実行機能で容易に実装できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <p id="clock"></p>
  <script>
    const clock = document.getElementById("clock");

    function updateTime() {
      const now = new Date();
      clock.textContent = now.toLocaleTimeString();
    }

    setInterval(updateTime, 1000);
    updateTime();
  </script>
</body>
</html>

この例では、setIntervalを用いて、1秒ごとに現在時刻を更新しています。

これらの例から、JavaScriptにおける定期実行機能の多様な応用が見て取れます。

○サンプルコード9：APIを用いたデータの自動更新

ウェブアプリケーションにおいて、サーバーから最新のデータを定期的に取得し表示することは一般的な要件です。

JavaScriptのsetIntervalを使用して、これを実現することができます。

// データ取得のためのAPIエンドポイント
const dataEndpoint = "https://example.com/api/data";

function fetchDataAndUpdateUI() {
  fetch(dataEndpoint)
    .then(response => response.json())
    .then(data => {
      // UIを更新する処理
      console.log("データを更新しました:", data);
    });
}

// 5秒ごとにデータを更新
setInterval(fetchDataAndUpdateUI, 5000);

このサンプルでは、外部APIからデータを取得し、5秒ごとに画面を更新しています。

○サンプルコード10：画面の自動スクロールの実装

ユーザーに自動でコンテンツを表示するために、画面を自動でスクロールさせることがあります。

これもJavaScriptの定期実行機能を用いて実装できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div id="content" style="height: 2000px;"></div>
  <script>
    let scrollPosition = 0;

    function autoScroll() {
      scrollPosition += 1;
      window.scrollTo(0, scrollPosition);

      if (scrollPosition < document.body.scrollHeight - window.innerHeight) {
        requestAnimationFrame(autoScroll);
      }
    }

    requestAnimationFrame(autoScroll);
  </script>
</body>
</html>

このサンプルでは、requestAnimationFrameを使用して、ページを少しずつ下にスクロールしています。

●注意点と対処法

  1. setIntervalやsetTimeoutは、ブラウザのタブがバックグラウンドにある場合、実行間隔が長くなることがあります。これを回避するには、Web Workersを使用するか、requestAnimationFrameを利用してアニメーションやタイマー処理を実装する方法があります。
  2. setIntervalを使っている場合、前の処理が完了する前に次の処理が開始されることがあります。これを回避するために、setTimeoutを使って次の処理を呼び出す方法があります。
  3. 長時間の定期実行が不要な場合や、ページを閉じた際に定期実行を停止させたい場合はclearIntervalやclearTimeoutを使用して定期実行を停止します。

まとめ

この記事では、JavaScriptで定期実行を実現する方法とその応用例、注意点と対処法、カスタマイズ方法について詳しく解説しました。

setIntervalやsetTimeoutを使用して、さまざまなタスクを定期的に実行することができます。

これらの機能を活用して、効果的なWebアプリケーションを開発してみてください。