ECMAScript 2015を使用したモダンなカウントダウンタイマーの作成方法

ES2015でカウントダウンタイマー作成

カウントダウンタイマーを作成する際にES2015で書くとES5で書くよりも簡潔にコードを記述することができる。

1. まず、new Dateで日時を設定する。さらに+を先頭を付けてミリ秒に変換させる。

// 日時を設定
const countDown = +new Date('2020/07/24 20:00');

2. 日時を表示させる場所を指定する。

// 日時を表示させる場所
const result = document.getElementById('result');

3. 数字が１桁のときに０を追加する関数を作成する。日本のカウントダウンタイマーの場合は見栄えをよくするために「分」と「秒」が１桁の際に０を頭に付けることが多い。

// 数字が１桁のときに０を追加
const addZero = x => ('0' + x).slice(-2);

4. 最後にカウントダウンタイマーの計算と実行のための関数を作成する。

timerは毎秒カウントダウンタイマーの計算結果を表示させるための関数。

resultTimerはカウントダウンタイマーの計算のための関数である。

最後にresultTimer()を実行しておかないとカウントダウンタイマーの実行に１秒の遅延が発生してしまうので注意。

const timer = setInterval(() => resultTimer(), 1000);
const resultTimer = () => {
  let now = Date.now(),
      d = countDown - now,
      days = Math.floor(d / (1000 * 60 * 60 * 24)),
      hours = Math.floor((d % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
      minutes = addZero(Math.floor((d % (1000 * 60 * 60)) / (1000 * 60))) + '分',
      seconds = addZero(Math.floor((d % (1000 * 60)) / 1000)) + '秒';
  days = days ? days + '日' : '';
  hours = hours ? hours + '時間' : '';
  result.innerHTML = `オリンピックまで<br> ${days}${hours}${minutes}${seconds}`;
  if (d < 0) {
    clearInterval(timer);
    result.innerHTML = 'オリンピックが開催されました。';
  }
}
resultTimer();

IE11では使用できない

IE11はアロー関数をサポートしていないため、ES2015の記述のままでは実行できない。

IE11で使用する際はBabelを使用してES2015をES5に変換してから使用する。

var countDown = +new Date('2020/07/24 20:00');
var result = document.getElementById('result');
var addZero = function addZero(x) {
  return ('0' + x).slice(-2);
};
var timer = setInterval(function () {
  return resultTimer();
}, 1000);
var resultTimer = function resultTimer() {
  var now = Date.now(),
      d = countDown - now,
      days = Math.floor(d / (1000 * 60 * 60 * 24)),
      hours = Math.floor(d % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)),
      minutes = addZero(Math.floor(d % (1000 * 60 * 60) / (1000 * 60))) + '分',
      seconds = addZero(Math.floor(d % (1000 * 60) / 1000)) + '秒';
  days = days ? days + '日' : '';
  hours = hours ? hours + '時間' : '';
  result.innerHTML = 'オリンピックまで<br> ' + days + hours + minutes + seconds;
  if (d < 0) {
    clearInterval(timer);
    result.innerHTML = 'オリンピックが開催されました。';
  }
};
resultTimer();

Babelを使用したES2015 => ES5 変換結果

ES2015で記述したカウントダウンタイマー

ES5で記述したカウントダウンタイマー

ちなみにnow = Date.now()で現在の日時のミリ秒を取得するとデバイスの時刻に依存するため正確な時間を取得したい場合はサーバーから取得する。