JavaScriptのsetIntervalメソッド

（最終更新月：2023年11月）

✔当記事は次のような疑問を持つ方々に最適です

「JavaScriptで定期的に操作を行いたいけど、setIntervalってどう使うの？」

「setIntervalの構文を正しく理解したい」

「実際のsetIntervalの使い方を例を通して見たい」

✔当記事でご紹介する内容

setInterval関数の仕組み
setIntervalの正しい使い方と構文
setIntervalを使った実践的なサンプルコード

当記事では、単にsetInterval関数の仕組みを説明するだけでなく、それをどのように実際のコードに適用するのか、例を挙げながら具体的に解説していきます。

ぜひともこの機会にsetInterval関数の効果的な使用方法を身につけてください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/05/14 14:24:09時点 Amazon調べ-詳細)

setIntervalを知ろう

ここではsetIntervalについて詳しく説明します。

setIntervalの理解は、JavaScriptを使ったリアルタイムのインタラクションにとって必須です。

setIntervalの構文と機能
重要な引数の役割
回り値としてのタイマーID

setIntervalの構文と機能

setInterval関数は、指定された間隔ごとに関数またはコードを繰り返し実行するためのものです。

基本的な構文は次のとおり。

setInterval(callback, delay);

ここでcallbackは繰り返し実行される関数、delayは実行間隔をミリ秒単位で指定します。

例えば、1000ミリ秒（1秒）ごとにメッセージをログに出力するには、以下のようにコーディングしましょう。

setInterval(function(){
  console.log("1秒ごとにメッセージを表示");
}, 1000);

初心者でもこのシンプルな例から基本を理解できます。

重要な引数の役割

setIntervalの第一引数callbackは、時間間隔が経過するたびに実行される関数です。

第二引数delayには、これらの実行の間隔をミリ秒で指定します。

短いdelayが高頻度の更新を意味するのに対し、長いdelayは更新がゆっくりおこなわれることを意味します。

回り値としてのタイマーID

setInterval関数は、生成されたタイマーの一意の識別子を返します。

clearInterval関数を使って、このタイマーIDで指定したタイマーのキャンセルが可能です。

たとえば、以下のようにsetIntervalを用いて生成したタイマーIDを記録し、これをclearIntervalで使用します。

var timerId = setInterval(function(){
  // 繰り返し実行される処理
}, 1000);

// タイマーを停止するには、次のように記述します
clearInterval(timerId);

実用例で学ぶsetInterval

setIntervalの具体的な使用法を見ていきましょう。

基本からインタラクティブな使用例まで、幅広くカバーしていきます。。

基本: 単純なインターバル設定
インタラクティブな利用例

基本: 単純なインターバル設定

最初の実例では、単純なメッセージを定期的にコンソールに出力するというものです。

以下のコードスニペットは、2秒ごとに”Hello, setInterval!”と表示します。

setInterval(function() {
  console.log("Hello, setInterval!");
}, 2000);

この例では、簡単な無名関数が使われ、setIntervalによる繰り返しの基本的な理解をお手伝いします。

インタラクティブな利用例

インタラクティブな使用例として、Webページ内の要素の背景色を時間経過とともに変化させるデモを作成してみましょう。

これにはHTML、CSS、およびJavaScriptが必要です。

必要なHTML構造
魅力あるスタイルのCSS
タイマーのためのJavaScript
実行結果と解説

必要なHTML構造

まず、色が変わる要素をHTMLに追加します。

<div id="colorful-box">色が変わるボックス！</div>

このdivはJavaScriptによる操作の対象となります。

魅力あるスタイルのCSS

次に、このdivにスタイルを追加して視覚的に魅力的にします。

#colorful-box {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 1px solid #000;
  margin: 10px;
  transition: background-color 1s; /* 色の変化を滑らかにする */
}

タイマーのためのJavaScript

そして、JavaScriptコードで背景色を周期的に変更する機能を実装します。

var colors = ["#FF9999", "#99FF99", "#9999FF"]; // 色の配列
var currentIndex = 0;

setInterval(function() {
  document.getElementById('colorful-box').style.backgroundColor = colors[currentIndex];
  currentIndex = (currentIndex + 1) % colors.length; // 次の色へ
}, 1000);

このコードでは、1秒ごとに#colorful-boxの背景色を変更しています。