【JavaScript】特定の日付までの残り時間をカウントダウン表示する

この記事では、JavaScriptを使って特定の日付までの残り時間をカウントダウン形式で表示する方法を解説します。

よく目にするのが、サイトやブログに｢セール終了までの残り時間｣を表示するパターンですね。残り時間を表示することで、より訴求力を高めるのに役立ちます。

今回は例として、2050年1月1日までのカウントダウンタイマーを作っていきます。

西暦2050年1月1日まで...

残り日と時間分秒

ご紹介するコードをコピペして日付の部分だけを変えていただければ、色んな場面で使い回しができると思うので、ぜひ参考にしてください。

JavaScriptで特定の日付までの残り時間をカウントダウン表示する方法
まとめ

JavaScriptで特定の日付までの残り時間をカウントダウン表示する方法

完成コードはこちらです。

HTML

<p>西暦2050年1月1日まで･･･</p>
<p class="timer">残り
   <span id="day"></span>日と
   <span id="hour"></span>時間
   <span id="minute"></span>分
   <span id="second"></span>秒
</p>

JavaScript

function showRestTime() {
  const now = new Date();
  const goal = new Date(2050, 0, 1);

  const restMillisecond = goal.getTime() - now.getTime();
  const day = Math.floor(restMillisecond / 1000 / 60 / 60 / 24);
  const hour = Math.floor(restMillisecond / 1000 / 60 / 60) % 24;
  const minute = Math.floor(restMillisecond / 1000 / 60) % 60;
  const second = Math.floor(restMillisecond / 1000) % 60;

  document.getElementById('day').textContent = day;
  document.getElementById('hour').textContent = hour;
  document.getElementById('minute').textContent = String(minute).padStart(2, '0');
  document.getElementById('second').textContent = String(second).padStart(2, '0');
}

setInterval(showRestTime, 1000);

日付を変えたい場合は、コード3行目のnew Date(2050, 0, 1)の部分をnew Date(年, 月, 日)に変えていただければOKです（※月は「実際の月の-1」にしてください）。

コードの実装手順は下記です。

残り時間を計算する
1の結果を｢日｣｢時間｣｢分｣｢秒｣に変換する
画面上に表示する
1～3を1秒ごとに繰り返す

ひとつずつ解説していきます。

残り時間を計算する

まず残り時間を表示する関数を作っていきましょう。

関数名は何でもOKですが、残り時間を表示するので「showRestTime」としておきました。

//残り時間を取得する関数
function showRestTime() {}

残り時間の計算には｢現在時刻｣と｢指定の年月日｣の2つの情報が必要で、こちらはDateというオブジェクトを使えば簡単に取得できます。

new Date( ): ：現在の時刻を取得する
new Date(年, 月, 日): ：指定した年月日の情報を取得する（※月は「実際の月の-1」にする点に注意）

後で使いやすいように現在時刻は定数nowに、指定の年月日は定数goalに代入しておきました。

なお、Date( )内の月は「実際の月の-1」にする必要があるので注意してください。

function showRestTime() {
　const now = new Date(); //現在時刻を取得する
  const goal = new Date(2050, 0, 1); //2050年1月1日の情報を取得する（※月は「実際の月の-1」にする）
}

次に、作成したnowとgoalを使って残り時間を計算しましょう。

時間の計算にはgetTimeメソッドが便利で、それぞれ次の値が取得できます。

goal.getTime( ) - now.getTime( )とすると、残り時間が計算できそうですね。

now.getTime( )：1970年1月1日0時～現在までの経過時間をミリ秒で取得
goal.getTime( )：1970年1月1日0時～2050年1月1日までの経過時間をミリ秒で取得

残り時間の計算結果はミリ秒なので「restMillisecond」という定数に代入しました。

function showRestTime() {
　const now = new Date();
  const goal = new Date(2050, 0, 1);

  //指定した日付までの残り時間をミリ秒で取得する
  const restMillisecond = goal.getTime() - now.getTime();
}

実際にrestMillisecondをコンソールで確認してみると、以下のように残り時間がミリ秒（1/1000秒）で表示されることがわかります。

次のステップで、こちから残りの「日数」「時」「分」「秒」を計算していきます。

ミリ秒から残りの｢日数｣｢時間｣｢分｣｢秒｣を算出する

計算されたミリ秒から、残りの「日数（day）」「時（hour）」「分（minute）」「秒（second）」を算出しましょう。

計算方法は若干ややこしいので、わかりにくければ「こうやって計算するんだ」くらいの理解ですっ飛ばして問題ありません。

function showRestTime() {
  
  //中略

  const day = Math.floor(restMillisecond / 1000 / 60 / 60 / 24); //日数
  const hour = Math.floor(restMillisecond / 1000 / 60 / 60) % 24; //時間
  const minute = Math.floor(restMillisecond / 1000 / 60) % 60; //分
  const second = Math.floor(restMillisecond / 1000) % 60; //秒
}

残り日数の算出

 const day = Math.floor(restMillisecond / 1000 / 60 / 60 / 24); //日数

上記コードの処理内容は次のとおりです（※Math.floorは小数点以下を切り捨てる命令です）。

1. ミリ秒を1000で割って秒に変換
2. 60で割って分に変換
3. 60で割って時間に変換
4. 24で割った結果 = 残り日数

残り時間の算出

const hour = Math.floor(restMillisecond / 1000 / 60 / 60) % 24; //時間

1. ミリ秒を1000で割って秒に変換
2. 60で割って分に変換
3. 60で割って時間に変換
4. 24で割った余り = 残り時間

残り分の算出

const minute = Math.floor(restMillisecond / 1000 / 60) % 60; //分

1. ミリ秒を1000で割って秒に変換
2. 60で割って分に変換
3. 60で割った余り = 残り分

残り秒の算出

  const second = Math.floor(restMillisecond / 1000) % 60; //秒

1. ミリ秒を1000で割って秒に変換
2. 60で割った余り = 残り秒

画面上に表示する

残りの「日数（day）」「時（hour）」「分（minute）」「秒（second）」が算出できたので、いよいよ画面表示です。

HTMLに下記コードを書いてください。

HTML

<p>西暦2050年1月1日まで･･･</p>
<p class="timer">残り
   <span id="day"></span>日と
   <span id="hour"></span>時間
   <span id="minute"></span>分
   <span id="second"></span>秒
</p>

次に、JavaScriptを使って上記のHTMLにテキストを出力する処理を書いていきます。

getElementByIdメソッドとtextContentプロパティを用いて、下記を記述すればOKです。

ちなみに、分（minute）と秒（second）だけは「02分」「08秒」のようにしたいのでStringとpadStartで見た目を整形していますが、気にしないならminute、secondをそのまま書いても大丈夫です。

JavaScript

function showRestTime() {

  //中略

  document.getElementById('day').textContent = day;
  document.getElementById('hour').textContent = hour;
  document.getElementById('minute').textContent = String(minute).padStart(2, '0');
  document.getElementById('second').textContent = String(second).padStart(2, '0');
}

getElementByIdメソッド: ：idと一致する要素を取得する
textContentプロパティ: ：要素内のテキストを取得・変更する

showRestTime関数を実行すると、画面上に残り時間が表示されます。

function showRestTime() {
  //省略
}

showRestTime(); //関数の実行

西暦2050年1月1日まで...

残り日と時間分秒

しかし、残り時間は表示されましたが、肝心のカウントダウンが行われていませんね。

では最後の仕上げとして、1秒ごとにカウントダウンする命令を書きましょう。

関数を1秒ごとに実行する【カウントダウン開始】

1秒ごとに関数を実行するには、setIntervalメソッドを使います。

setInterval(関数名, ミリ秒): ：指定したミリ秒ごとに関数を実行する

末尾のshowRestTime( )を、下記に書き換えます。

function showRestTime() {
  //省略
}

setInterval(showRestTime, 1000);

カウントダウンが始まりましたね。

西暦2050年1月1日まで...

残り日と時間分秒

まとめ

今回は特定の日付までの残り時間をカウントダウン表示する方法を解説しました。

割と要望が多い実装になると思うので、この機会に覚えておきましょう。