【JavaScript】タイマー超入門！使いこなすための10の方法を解説

はじめに
●JavaScriptタイマーの基本
- ○setTimeout
- ○setInterval
●JavaScriptタイマーの使い方
●応用例とサンプルコード
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptでタイマーを使いこなせるようになります。

タイマーの基本から応用まで、サンプルコード付きで分かりやすく解説します。また、注意点やカスタマイズ方法も紹介するので、ぜひ参考にしてください。

●JavaScriptタイマーの基本

JavaScriptでタイマーを扱うには、主に2つの関数があります。

それが「setTimeout」と「setInterval」です。

○setTimeout

setTimeoutは、指定した時間が経過した後に一度だけ実行されるタイマーです。

下記のように使います。

setTimeout(関数, 時間);

○setInterval

setIntervalは、指定した時間ごとに繰り返し実行されるタイマーです。下記のように使います。

setInterval(関数, 時間);

●JavaScriptタイマーの使い方

JavaScriptのタイマー機能を利用した便利なサンプルコードをご紹介します。

これらのコードは、ウェブ開発におけるJavaScriptのタイマー機能の基本的な使い方を把握するのに役立ちます。

○サンプルコード1：setTimeoutを使った一度だけ実行するタイマー

このサンプルでは、setTimeout関数を用いて5秒後に「Hello, World!」というメッセージをアラートで表示する方法を表しています。

setTimeout(function() {
  alert('Hello, World!');
}, 5000);

このコードは、指定した時間（この場合は5000ミリ秒）が経過した後に、一度だけ特定の処理（アラート表示）を実行します。

○サンプルコード2：setIntervalを使った繰り返し実行するタイマー

次のサンプルでは、setInterval関数を使って、1秒ごとに「Hello, World!」というメッセージをコンソールに表示します。

setInterval(function() {
  console.log('Hello, World!');
}, 1000);

このコードは、1秒ごとに同じ処理を繰り返し実行し、特定の間隔で継続的にメッセージをコンソールに出力します。

○サンプルコード3：タイマーをキャンセルする方法

setTimeoutやsetIntervalで設定したタイマーは、clearTimeoutやclearInterval関数によってキャンセルすることができます。

下記のサンプルでは、5秒後に実行されるはずのタイマーを3秒後にキャンセルしています。

var timer = setTimeout(function() {
  alert('This will not be displayed.');
}, 5000);

setTimeout(function() {
  clearTimeout(timer);
  console.log('Timer cancelled.');
}, 3000);

このコードは、最初に設定されたタイマーを特定の条件下（ここでは3秒後）で停止させ、その結果をコンソールに表示しています。

●応用例とサンプルコード

JavaScriptのタイマー機能を活用した面白い応用例をいくつかご紹介します。

これらは、JavaScriptを使ったより高度なタイマーの実装方法を理解するのに役立ちます。

○サンプルコード4：カウントダウンタイマーの作成

こちらの例では、10秒からカウントダウンし、0に達すると「Time’s up!」というアラートを表示するカウントダウンタイマーをJavaScriptで作成しています。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Countdown Timer</title>
<script>
function startCountdown() {
  var time = 10;
  var countdown = document.getElementById('countdown');

  var timer = setInterval(function() {
    countdown.innerHTML = time;
    time--;

    if (time < 0) {
      clearInterval(timer);
      alert("Time's up!");
    }
  }, 1000);
}
</script>
</head>
<body>
  <h1 id="countdown">10</h1>
  <button onclick="startCountdown()">Start Countdown</button>
</body>
</html>

このコードでは、setIntervalを用いて1秒ごとに数字をデクリメントし、HTML内の特定の要素にその値を表示しています。

タイムが0以下になると、タイマーは停止し、アラートが表示されます。

○サンプルコード5：スライドショー

JavaScriptのタイマー機能を応用したスライドショーのサンプルコードを紹介します。

この例は、3枚の画像を3秒ごとに自動で切り替えるスライドショーを実装する方法を表しています。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Slideshow</title>
<style>
  #slideshow img {
    display: none;
  }
  #slideshow img.active {
    display: block;
  }
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
  var images = document.querySelectorAll('#slideshow img');
  var currentIndex = 0;

  function showNextImage() {
    images[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % images.length;
    images[currentIndex].classList.add('active');
  }

  setInterval(showNextImage, 3000);
});
</script>
</head>
<body>
  <div id="slideshow">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
</body>
</html>

このコードでは、JavaScriptのsetInterval関数を使用して、定期的に画像を切り替える処理を実行しています。

この例は、ウェブサイトのビジュアルアピールを高めるためのJavaScriptのタイマーの活用法として非常に効果的です。

○サンプルコード6：自動更新

JavaScriptのタイマー機能を利用してウェブページを自動的に更新するサンプルコードを紹介します。

この方法は、ウェブページを一定の間隔でリフレッシュし、最新の情報を表示するために有効です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Auto Refresh</title>
<script>
function autoRefresh(interval) {
  setTimeout(function() {
    location.reload();
  }, interval);
}
</script>
</head>
<body onload="autoRefresh(10000);">
  <p>このページは10秒ごとに自動更新されます。</p>
</body>
</html>

このコードでは、JavaScriptのsetTimeout関数を使用して、指定された時間（この例では10秒）ごとにページを自動的にリロードします。

これにより、ユーザーはページを手動で更新することなく、常に最新のコンテンツを確認できるようになります。

ウェブサイトのユーザーエクスペリエンスを向上させるのに役立つJavaScriptのタイマーの活用法の一例です。

○サンプルコード7：ボタンでタイマーを制御

JavaScriptのタイマー機能を使って、ユーザーの操作に応じてタイマーを開始や停止することができるサンプルコードをご紹介します。

この例では、ボタンを使用してタイマーを制御する方法を表しています。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Timer Control</title>
<script>
var timer;
function startTimer() {
  timer = setInterval(function() {
    console.log('Hello, World!');
  }, 1000);
}

function stopTimer() {
  clearInterval(timer);
}
</script>
</head>
<body>
  <button onclick="startTimer()">Start Timer</button>
  <button onclick="stopTimer()">Stop Timer</button>
</body>
</html>

このコードでは、setIntervalとclearIntervalを用いて、ボタンクリックによってタイマーを開始および停止します。

ユーザーが「Start Timer」ボタンをクリックすると、1秒ごとにコンソールに「Hello, World!」と表示されます。

また、「Stop Timer」ボタンをクリックすると、タイマーは停止します。

このようにJavaScriptのタイマーを用いて、ユーザーのインタラクションに応じた動的なウェブページを作成することが可能です。

○サンプルコード8：アニメーション

JavaScriptのタイマー機能を利用して動的なアニメーションを作成する方法を表すサンプルコードをご紹介します。

この例では、タイマーを用いてページ上の要素を動かすアニメーションを実現しています。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animation</title>
<style>
  #box {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
  var box = document.getElementById('box');
  var x = 0;
  var y = 0;

  function moveBox() {
    x += 1;
    y += 1;
    box.style.left = x + 'px';
    box.style.top = y + 'px';
  }

  setInterval(moveBox, 10);
});
</script>
</head>
<body>
  <div id="box"></div>
</body>
</html>

このコードでは、setInterval関数を使用して10ミリ秒ごとにボックスの位置を更新し、スムーズな動きのアニメーションを作成しています。

ボックスは画面上で右下に向かって動き、JavaScriptを使ったシンプルながら効果的なアニメーションを表しています。

この技法は、ウェブページに動きと視覚的な魅力を加えるために有効です。

○サンプルコード9：テキストの点滅

JavaScriptのタイマーを使ってテキストを点滅させる、興味深いサンプルコードを紹介します。

このコードは、ウェブページ上のテキストを一定の間隔で表示と非表示を切り替えることで、点滅効果を作り出します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blinking Text</title>
<style>
  .hidden {
    visibility: hidden;
  }
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
  var blinkingText = document.getElementById('blinking-text');

  function blink() {
    blinkingText.classList.toggle('hidden');
  }

  setInterval(blink, 500);
});
</script>
</head>
<body>
  <span id="blinking-text">Blinking Text</span>
</body>
</html>

このコードでは、setInterval関数を用いて500ミリ秒ごとに指定されたテキストの表示状態を切り替えています。

toggleメソッドを使用することで、テキストのclass属性に「hidden」というクラスを追加・削除し、これによりテキストの表示と非表示を繰り返します。

このようにJavaScriptのタイマーを使用すると、ウェブページ上で簡単に目を引く点滅効果を実装でき、ユーザーの注意を惹きつけることが可能です。

○サンプルコード10：プログレスバー

JavaScriptのタイマー機能を活用して、視覚的に魅力的なプログレスバーを実装するサンプルコードをご紹介します。

この例では、進捗状況を視覚的に示すプログレスバーを作成し、定期的に更新する方法を表しています。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Progress Bar</title>
<style>
  #progress-bar {
    width: 100%;
    background-color: #f3f3f3;
  }
  #progress {
    width: 0%;
    height: 30px;
    background-color: #4CAF50;
  }
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
  var progress = document.getElementById('progress');

  function updateProgress() {
    var currentWidth = parseInt(progress.style.width);
    if (currentWidth < 100) {
      progress.style.width = (currentWidth + 1) + '%';
    } else {
      clearInterval(timer);
    }
  }

  var timer = setInterval(updateProgress, 50);
});
</script>
</head>
<body>
  <div id="progress-bar">
    <div id="progress"></div>
  </div>
</body>
</html>

このコードは、JavaScriptのsetInterval関数を使用して50ミリ秒ごとにプログレスバーの幅を更新します。

プログレスバーの幅はパーセンテージで表現され、100%に達するとタイマーが停止します。

このようなプログレスバーは、ローディング画面や進捗表示において非常に有用で、ユーザーエクスペリエンスを向上させるのに役立ちます。