JavaScriptで秒数カウント！7つの方法で完全マスター

はじめに

この記事を読めば、JavaScriptで秒数カウントを実現する方法が分かるようになります。

JavaScriptを使って秒数カウントを行う方法はいくつかありますが、ここでは初心者にも分かりやすいように、基本的な方法から応用例まで、7つの方法を徹底解説していきます。

サンプルコードも用意しているので、ぜひ実際に試しながら学んでみてください。

●JavaScriptで秒数カウントの基本

まずは、JavaScriptで秒数カウントを行う基本的な方法を紹介します。

○setIntervalを使ったカウントアップ

setIntervalは、指定した間隔で繰り返し実行されるタイマーを設定する関数です。

下記のコードでは、1秒ごとにカウントアップする機能を実現しています。

let count = 0;

// 1秒ごとにカウントアップする関数
function countUp() {
  count++;
  console.log(count);
}

// 1000ミリ秒（1秒）ごとにcountUp関数を実行
const timer = setInterval(countUp, 1000);

○setTimeoutを使ったカウントダウン

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

下記のコードでは、1秒ごとにカウントダウンする機能を実現しています。

let count = 10;

// 1秒ごとにカウントダウンする関数
function countDown() {
  count--;
  console.log(count);

  // カウントが0になったらタイマーを停止
  if (count <= 0) {
    clearTimeout(timer);
  } else {
    timer = setTimeout(countDown, 1000);
  }
}

// 初回実行
let timer = setTimeout(countDown, 1000);

●JavaScriptで秒数カウントの応用例

ここからは、JavaScriptで秒数カウントを応用した例を紹介していきます。

○サンプルコード1：カウントダウンタイマー

このコードでは、指定した時間からカウントダウンするタイマーを作成しています。

この例では、10秒からカウントダウンしていきます。

let time = 10;

function countdownTimer() {
  if (time > 0) {
    console.log(time);
    time--;
    setTimeout(countdownTimer, 1000);
  } else {
    console.log("終了");
  }
}

// カウントダウンタイマーを開始
countdownTimer();

○サンプルコード2：ストップウォッチ機能

このコードでは、ストップウォッチ機能を実現しています。

開始ボタンでカウントアップが始まり、ストップボタンでカウントが止まる仕組みになっています。

let count = 0;
let timer;

function startStopwatch() {
  console.log(count);
  count++;
  timer = setTimeout(startStopwatch, 1000);
}

function stopStopwatch() {
  clearTimeout(timer);
}

// ストップウォッチを開始
startStopwatch();

// 5秒後にストップウォッチを停止
setTimeout(stopStopwatch, 5000);

○サンプルコード3：ページ読み込み時間の計測

このコードでは、ページ読み込み時間を計測する機能を実現しています。

ページが読み込まれた瞬間からの経過時間を表示します。

const startTime = new Date();

window.addEventListener("load", () => {
  const endTime = new Date();
  const elapsedTime = endTime - startTime;
  console.log(`ページ読み込み時間: ${elapsedTime}ms`);
});

○サンプルコード4：アニメーションと連動したカウント

このコードでは、アニメーションと連動してカウントを行う機能を実現しています。

カウントが増えるごとにアニメーションが進む仕組みになっています。

let count = 0;
let timer;

function animateCount() {
  console.log(`アニメーション: ${count}`);
  count++;
  if (count <= 10) {
    timer = setTimeout(animateCount, 1000);
  }
}

// アニメーションを開始
animateCount();

●注意点と対処法

○タイマー関数のクリアリング

タイマー関数を使用する際には、必要がなくなったタイマーは必ずクリアしてください。

クリアしないと、メモリリークや予期しない動作を引き起こす可能性があります。

○タイマーの精度とブラウザの違い

タイマー関数の実行間隔は、ブラウザによって若干の違いがあります。

そのため、完全に正確なタイミングで実行されることを期待しないようにしてください。

●カスタマイズ方法

○ディスプレイ形式の変更

カウントの表示形式を変更することができます。

例えば、ミリ秒から秒、分、時間に変換する方法などが考えられます。

○カウントのインターバルを調整

タイマー関数を使用してカウントを行う際、インターバルを調整することで、カウント速度を自由に変更することができます。

下記のコードでは、500ミリ秒（0.5秒）ごとにカウントアップを行っています。

let count = 0;

function countUp() {
  console.log(count);
  count++;
  setTimeout(countUp, 500);
}

countUp();

このように、setTimeoutやsetIntervalの第二引数を変更することで、カウントのインターバルを簡単に調整することができます。

まとめ

本記事では、JavaScriptを用いて秒数カウントを行う基本的な方法から応用例までを紹介しました。

また、注意点やカスタマイズ方法についても解説しました。

これらの知識を活用して、カウントアップ・カウントダウン機能やストップウォッチ機能、ページ読み込み時間の計測など、様々なシーンでJavaScriptを活用してみてください。

実際にサンプルコードを試しながら、自分のプロジェクトに応用できるように練習してみてください。