JavaScript｜カウントダウンタイマーを作ろう

JavaScriptはES2015(ES6)以降でclass構文が使えるようになりましたが、今回はES2015以前のプロトタイプを利用する方法でカウントダウンタイマーを作ってみたいと思います。

完成形はこんな感じです。

AmazonなどのECサイトにあるような「セール開始まであと○○分」→「セール終了まであと○○分」→「終了しました」のように指定した時刻になったら表示が切り替わります。

ソースコードはJSFiddleに保存してあります。
https://jsfiddle.net/hasa83/zrhmjut4/17/

では順を追って作り方を見ていきましょう。

1 HTMLにタイマーを表示するための要素を追加
2 イベントを設定する
3 クラス（コンストラクター）を作成する
4 プロトタイプでメソッドを宣言する
5 countDownメソッドの処理を作る（変数を宣言）
6 「セール開始まで」または「セール終了まで」の日・時・分・秒を計算する関数を定義する
7 「セール開始までの時間」または「セール開始後の時間」または「セール終了後のメッセージ」を表示する
8 1秒ごとに処理を繰り返す
9 インスタンスを作成して、カウントダウン処理を実行する

HTMLにタイマーを表示するための要素を追加

<div class="timer" id="timer"></div>

1	<div class="timer" id="timer"></div>

<body></body>間の任意の場所に追加します。class属性はCSSを設定するために、id属性はJavaScriptで要素取得するために付けました。属性名は好きなもので大丈夫です。

イベントを設定する

document.addEventListener('DOMContentLoaded', function() {
}, false)

1 2	document.addEventListener('DOMContentLoaded', function() { }, false)

</body>の前に<script></script>を書き、その中に書いて下さい。
こちらはDOMツリーの構築が完了したらfunction() {}を実行するという意味になります。今回の場合は、<div class=”timer” id=”timer”></div>がブラウザに認識された後でないとタイマーを表示する要素がないので、「’DOMContentLoaded’」を使用しています。他に近いものだと「’load’」などもありこちらの場合は、ブラウザがすべてのリソース（画像やCSSなど）を読み込んだあとにfunction() {}が実行されます。

クラス（コンストラクター）を作成する

var Timer = function(saleStartTime, saleEndTime, endMessage, outputDestination) {
  this.saleStartTime = saleStartTime;
  this.saleEndTime = saleEndTime;
  this.endMessage = endMessage;
  this.outputDestination = outputDestination;
};

var Timer = function(saleStartTime, saleEndTime, endMessage, outputDestination) {

this.saleStartTime = saleStartTime;

this.saleEndTime = saleEndTime;

this.endMessage = endMessage;

this.outputDestination = outputDestination;

};

ES2015以前のJavaScriptではこのように書きます。仮引数にはsaleStartTime（セール開始日時／Date）、saleEndTime（セール終了日時／Date）、endMessage（セール終了時に表示されるテキスト／String）、outputDestination（タイマーを表示する対象要素／String）を設定してあります。受け取った引数は、thisキーワードに対して指定した変数に代入します。こうすることで、コンストラクターによって生成されるインスタンス（自分自身）のプロパティを設定できるようになります。

プロトタイプでメソッドを宣言する

Timer.prototype.countDown = function() {
}

1 2	Timer.prototype.countDown = function() { }

JavaScriptでは、オブジェクトにメンバーを追加するために、prototypeというプロパティを用意しています。Timerクラスにもprototypeがあるので、その中にcountDownメソッドを宣言します。prototypeプロパティに対して追加されたメンバーは、そのクラスを元に生成されたすべてのインスタンスから利用できます。暗黙的な参照を持つことになるということです。

countDownメソッドの処理を作る（変数を宣言）

var saleStartTime = new Date(this.saleStartTime);  // セール開始日時
var saleEndTime = new Date(this.saleEndTime);  // セール終了日時

// タイマーを表示する対象要素
var countDownTimer = document.getElementById(this.outputDestination);

var endMessage = this.endMessage;  // セール終了時のメッセージ
var currentTimeCD;  // 現在時刻
var untilStartTime;  // 開始時刻までの残り時間
var untilFinishTime;  // 終了時刻までの残り時間
var oneDay = 24 * 60 * 60 * 1000;  // 一日をミリ秒で表現した数値
var d = 0;  // 日
var h = 0;  // 時
var m = 0;  // 分
var s = 0;  // 秒

var saleStartTime = new Date(this.saleStartTime); // セール開始日時

var saleEndTime = new Date(this.saleEndTime); // セール終了日時

// タイマーを表示する対象要素

var countDownTimer = document.getElementById(this.outputDestination);

var endMessage = this.endMessage; // セール終了時のメッセージ

var currentTimeCD; // 現在時刻

var untilStartTime; // 開始時刻までの残り時間

var untilFinishTime; // 終了時刻までの残り時間

var oneDay = 24 * 60 * 60 * 1000; // 一日をミリ秒で表現した数値

var d = 0; // 日

var h = 0; // 時

var m = 0; // 分

var s = 0; // 秒

まずは、変数を宣言します。変数にはコメントの内容を代入します。

「セール開始まで」または「セール終了まで」の日・時・分・秒を計算する関数を定義する

function calculateTime() {
  currentTimeCD = new Date();
  untilStartTime = saleStartTime - currentTimeCD;
  untilFinishTime = saleEndTime - currentTimeCD;

  if (currentTimeCD < saleStartTime) {
    d = Math.floor(untilStartTime / oneDay);
    h = Math.floor((untilStartTime % oneDay) / (60 * 60 * 1000));
    m = Math.floor((untilStartTime % oneDay) / (60 * 1000)) % 60;
    s = Math.floor((untilStartTime % oneDay) / 1000) % 60 % 60;
  } else {
    d = Math.floor(untilFinishTime / oneDay);
    h = Math.floor((untilFinishTime % oneDay) / (60 * 60 * 1000));
    m = Math.floor((untilFinishTime % oneDay) / (60 * 1000)) % 60;
    s = Math.floor((untilFinishTime % oneDay) / 1000) % 60 % 60;
  }

  showTime();
}

function calculateTime() {

currentTimeCD = new Date();

untilStartTime = saleStartTime - currentTimeCD;

untilFinishTime = saleEndTime - currentTimeCD;

if (currentTimeCD < saleStartTime) {

d = Math.floor(untilStartTime / oneDay);

h = Math.floor((untilStartTime % oneDay) / (60 * 60 * 1000));

m = Math.floor((untilStartTime % oneDay) / (60 * 1000)) % 60;

s = Math.floor((untilStartTime % oneDay) / 1000) % 60 % 60;

} else {

d = Math.floor(untilFinishTime / oneDay);

h = Math.floor((untilFinishTime % oneDay) / (60 * 60 * 1000));

m = Math.floor((untilFinishTime % oneDay) / (60 * 1000)) % 60;

s = Math.floor((untilFinishTime % oneDay) / 1000) % 60 % 60;

}

showTime();

}

ここでは、「セール開始まで」または「セール終了まで」の日・時・分・秒を計算する関数を定義しています。現時刻がセール開始前であればセール開始前までの日・時・分・秒を変数d、h、m、sに代入しています。現時刻がセール開始後であればセール開始後までの日・時・分・秒を変数d、h、m、sに代入しています。その後、showTime関数を実行しています。

「セール開始までの時間」または「セール開始後の時間」または「セール終了後のメッセージ」を表示する

function showTime() {
  if (currentTimeCD < saleStartTime) {
    countDownTimer.innerHTML
    = '開始まで' + d + '日' + h + '時間' + m + '分' + s + '秒';
  } else if (currentTimeCD >= saleStartTime && currentTimeCD <= saleEndTime) {
    countDownTimer.innerHTML
    = 'あと' + d + '日' + h + '時間' + m + '分' + s + '秒' + 'で終了';
  } else {
    countDownTimer.innerHTML = endMessage;
  }
}

function showTime() {

if (currentTimeCD < saleStartTime) {

countDownTimer.innerHTML

= '開始まで' + d + '日' + h + '時間' + m + '分' + s + '秒';

} else if (currentTimeCD >= saleStartTime && currentTimeCD <= saleEndTime) {

countDownTimer.innerHTML

= 'あと' + d + '日' + h + '時間' + m + '分' + s + '秒' + 'で終了';

} else {

countDownTimer.innerHTML = endMessage;

}

showTime関数では「セール開始までの時間」または「セール開始後の時間」または「セール終了後のメッセージ」を表示します。現在時刻によって表示する内容が変わります。

1秒ごとに処理を繰り返す

setInterval(calculateTime, 1000);

1	setInterval(calculateTime, 1000);

setIntervalメソッドを使って、1秒（1000ミリ秒）ごとにcalculateTime関数を実行します。これでcountDownメソッドが作成できました。

インスタンスを作成して、カウントダウン処理を実行する

var myTimer = new Timer('2020/12/31 00:00:00', '2100/1/31 23:59:59', '終了！', 'timer');

1	var myTimer = new Timer('2020/12/31 00:00:00', '2100/1/31 23:59:59', '終了！', 'timer');

まずはTimerクラス（コンストラクター）からmyTimerインスタンスを作成します。第1引数にはセール開始日時、第2引数にはセール終了日時、第3引数にはセール終了後のメッセージ、第4引数には表示対象要素のID属性を書きます。

myTimer.countDown();

1	myTimer.countDown();

myTimerインスタンスのcountDownメソッドを実行します。画面でカウントダウンが起動すれば成功です。

筆者

お疲れ様でした。カウントダウンタイマーの作成を通してES2015以前のクラス（コンストラクター）の定義方法をまとめてみました。今もまだIE11の利用者はいると思うのでES2015以前のJavaScriptの書き方も知っておいて損はないと思います。Babelを使ってトランスコンパイルすればいいでしょ、と言われてしまうかもしれませんがES2015以降の構文がどのようにトランスコンパイルされるのかを知らないよりかは知っておいた方が良いということで……ではまた、さようなら。

JavaScript