JavaScriptのDateオブジェクトには、日付や時間を扱うためのメソッドが数多く用意されおり、使えるようになるとさまざまなプログラムに役立てることが可能です。

今回は、カウントダウンタイマーの作り方を解説します。
実装には、単に時間を取得するだけでなく、タイムリミットから時間を逆算することが必要です。
Dateオブジェクトの使い方や時間の計算方法の理解を深めていきましょう。

デモ

今回は、日付が変わるまでの残り時間をカウントダウンさせるための実装をしていきます。

このようなカウントダウンタイマーは、ネットショッピングのセールの終了までのカウントダウンや、ニューイヤーやクリスマスまでのカウントダウンなどで良く見られます。

HTML・CSSの準備

まずはHTMLとCSSを用意します。

HTML

<!DOCTYPE html>
<html labg="en">
<head>
<meta chrset="utf-8" />
<title>Countdown Timer</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="countdown-container">
    <h1>Countdown to end of today 🎉</h1>
    <h2>You have ...</h2>
    <div class="time-container">
      <p class="time"><span id="hour"></span>hours</p>
      <p class="time"><span id="min"></span>minutes</p>
      <p class="time"><span id="sec"></span>seconds</p>
    </div>
  </div>
<script src="script.js"></script>
</body>
</html>

CSS

html, body {
  font-family: serif;
  font-size: 16px;
}

.countdown-container {
  margin: 5rem;
}

.time-container {
  display: flex;
}

.time {
  margin: .2rem;
  background-color: lightpink;
  border-radius: 1rem;
  padding: 2rem;
}

#hour,#min,#sec {
  font-size: 3rem;
  margin-right: 1rem;
}

HTMLとCSSはシンプルにしていますが、好みでテキストやスタイルをカスタマイズしてください。

JavaScriptでカウントダウンタイマーを実装

それではJavaScriptの解説をしていきます。

全体のコード

const hour = document.getElementById("hour");
const min = document.getElementById("min");
const sec = document.getElementById("sec");

function countdown() {
  const now = new Date(); // 現在時刻を取得
  const tomorrow = new Date(now.getFullYear(),now.getMonth(),now.getDate()+1); // 明日の0:00を取得
  const diff = tomorrow.getTime() - now.getTime(); // 時間の差を取得（ミリ秒）

  // ミリ秒から単位を修正
  const calcHour = Math.floor(diff / 1000 / 60 / 60);
  const calcMin = Math.floor(diff / 1000 / 60) % 60;
  const calcSec = Math.floor(diff / 1000) % 60;

  // 取得した時間を表示（2桁表示）
  hour.innerHTML = calcHour < 10 ? '0' + calcHour : calcHour;
  min.innerHTML = calcMin < 10 ? '0' + calcMin : calcMin;
  sec.innerHTML = calcSec < 10 ? '0' + calcSec : calcSec;
}
countdown();
setInterval(countdown,1000);

今回のカウントダウンタイマーの実装には、以下の時間の計算がポイントとなります。

  • 日付が変わる時刻（明日の0:00）から現在時刻を引く
  • 取得した時間の単位を時・分・秒に修正する
  • 時・分・秒を2桁表示する

上から順番にコードを見ていきましょう。

要素を取得する

まずは必要な要素を取得します。

const hour = document.getElementById("hour");
const min = document.getElementById("min");
const sec = document.getElementById("sec");

document.getElementByIdで、カウントダウンの時・分・秒を表示するための要素を取得します。

次に、カウントダウン機能を作るcountdown関数について機能別に解説していきます。

Dateオブジェクトでカウントダウンの時間を取得する

Dateオブジェクトを用いて、タイムリミットまでの残り時間を取得してみましょう。

const now = new Date();
const tomorrow = new Date(now.getFullYear(),now.getMonth(),now.getDate()+1);
const diff = tomorrow.getTime() - now.getTime();

new Dataは、現在時刻を取得するメソッドです。

さらに、getFullYear・getMonth・getDate・getTimeを用いることで年・月・日・日時（ミリ単位）を取得することができます。
よって、tomorrowでは明日の0:00を取得し、diffでは明日の0:00から現在の時刻を引いた時刻、すなわち残り時間を計算することができます。

取得した時間の単位を修正する

getTimeは日時をミリ単位の数値で返すため、上記で取得した残り時間の単位を修正する必要があります。

const calcHour = Math.floor(diff / 1000 / 60 / 60);
const calcMin = Math.floor(diff / 1000 / 60) % 60;
const calcSec = Math.floor(diff / 1000) % 60;

数値の計算にはMathオブジェクトが良く使われており、Math.floorを用いることで値の小数点以下を切り捨てることが可能です。

1秒は1000ミリ秒となるため、diff を1000で割ると秒を出すことができ、60で割ると分、さらに60で割ると時に換算することができます。
時と分は、1〜59までの数値の表示が必要なため、60で剰余計算（%）し、余った数値のみ取得しています。

これで、取得した時間を時・分・秒に換算することができました。

時間を2桁表示させる

続いて、時・分・秒を2桁表示させていきます。

hour.innerHTML = calcHour < 10 ? '0' + calcHour : calcHour;
min.innerHTML = calcMin < 10 ? '0' + calcMin : calcMin;
sec.innerHTML = calcSec < 10 ? '0' + calcSec : calcSec;

ここでは三項演算子を使用しています。
条件 ? true : falseのように簡易的に条件式を記述することができます。

時・分・秒が10より小さければ頭に0を加え、そうでなければそのままの数値を表示させるための式です。
これにより、数値が一桁になっても頭に0が付くようになり、いつでも2桁表示されるようになります。

別の方法として、String.prototype.padStart()も紹介します。

hour.innerHTML = String(calcHour).padStart(2,"0");
min.innerHTML = String(calcMin).padStart(2,"0");
sec.innerHTML = String(calcSec).padStart(2,"0");

Stringオブジェクトは数値を文字列に変換し、padStartメソッドは文字列を指定した長さにするために文字列を埋める役割があります。
podStart(2, "0")と記述することで、2桁にならなければ左側から0を足すことができます。

指定した長さにするために0で文字列を埋めることをゼロパディングと言います。
短い記述で意味合い的にも分かりやすいため、ゼロパディングが必要なときは活用してみてください。

カウントダウンタイマーを実行する

さいごに、カウントダウンタイマーを実行させましょう。

countdown();
setInterval(countdown,1000);

ページがロードされた後すぐにカウントダウンを開始させたいため、関数を呼び出します。
さらに、setIntervalで1000ミリ秒ごとに関数を呼び出します。

これで1秒ごとに時間がカウントされるようになりました。

以上ですべての実装が完了です。

まとめ

今回は、JavaScriptでカウントダウンタイマーの作り方を解説してきました。

Dateオブジェクトで時刻の取得や、Math.floorメソッドで時刻の単位を修正、padStartメソッドで時間を2桁表示する方法を扱いました。
時間の取得や計算方法を身に付けると、数値を取り扱うプログラミングにおいて生かすことができますので、積極的に取り入れてみてください。

カウントダウンタイマーの関連記事

・データ型 -オブジェクト
・Dateオブジェクトの作成