今、頑張らないといけないのに「やる気が出ない」という時があります。そんな時に残り時間が明確に分かれば、「時間がない、頑張らないと！」という気分になるかもしれません。そこで、今回は「残された時間を秒数で表示するカウントダウン時計」を作ってみましょう。JavaScriptで日時計算する方法を学びつつ生活に役立つ自作ガジェットを作ってみましょう。

  • 今夜20時までの残り時間を表示したところ

    今夜20時までの残り時間を表示したところ

予定時間まであと何時間か調べるプログラム

最初に、予定時間まで何秒か調べる一番簡単なプログラムを紹介します。

<script>
// 予定時刻(今日の夜20時)を指定
const t = new Date();
const target = new Date(t.getFullYear(), t.getMonth(), t.getDate(), 20, 0, 0);
// 現在時刻との差を計算
const diffSec = Math.floor((target - t) / 1000);
const diffH = Math.floor(diffSec / (60 * 60) * 10) / 10;
// 残り何時間かを表示
alert(`今夜20時まで残り${diffH}時間`)
</script>

上記のプログラムを「remain_time.html」という名前で保存してください。このファイルをWebブラウザにドラッグ＆ドロップすると、残り時間が表示されます。

  • 残り時間を表示するプログラム

    残り時間を表示するプログラム

プログラムの冒頭で、当日の20時を予定時刻として指定します。そして、現在時刻と予定時刻の差を計算して、残り時間を画面に表示するものになっています。

それでは、この完成形のプログラムに至るまでを、少しずつ解説します。また、毎秒カウントダウンするように応用プログラムも紹介します。

JavaScriptで今日の日付を確認するには？

カウントダウン時計を作るのに当たって、最初に、JavaScriptで、日付や時間を取得する方法を確認してみましょう。JavaScriptで現在の日付や時間を取得するには、Dateオブジェクトを使います。

簡単に、画面に今日の日付を表示するプログラムは、下記のようになります。

<script>
// Dateオブジェクトを作成 --- (※1)
const todayDate = new Date();
// 今日のローカルな日付文字列を取得 --- (※2)
const todayStr = todayDate.toLocaleDateString();
// 画面に表示 --- (※3)
alert(todayStr);
</script>

上記のプログラムを実行しましょう。まず、「today.html」という名前でファイルに保存しましょう。そして、Webブラウザにドラッグ＆ドロップするとプログラムを実行できます。

  • 今日の日付を表示するプログラム

    今日の日付を表示するプログラム

さて、プログラムを見直してみましょう。JavaScriptで日時情報を扱いたい場合、プログラムの(※1)に書いているように、Dateオブジェクトを作成する必要があります。

(※2)でDateオブジェクトから日付文字列を取得したい場合には、DateオブジェクトのtoLocaleDateStringメソッドを呼び出します。これによって、「年/月/日」のような書式で今日の日付が取得できます。

最後に、(※3)で画面に日付文字列を表示します。

もっと手軽に日付だけを知りたい場合でも、「new Date()」とオブジェクトを作成する必要があります。また、(※2)のtoLocaleDateStringは、ブラウザやOSの設定によって値が変わるので注意が必要です。

と言うのも、「年/月/日」という書式は、日本の文化圏で利用しているものであって、アメリカの文化圏で暮らしている人の環境では「月/日/年」という書式で表示されるからです。プログラムを下記のように書き換えて実行してみると実行結果が変わるので試してみてください。文化圏で挙動が変わるというのは面白いですよね。

// 日付書式をアメリカ(en-US)に変更して実行
const todayStr = new Date().toLocaleDateString('en-US');
alert(todayStr) // 表示結果の例→「 6/14/2025」

なお、toLocaleDateStringメソッドと同じで、toLocaleTimeStringメソッドを使うと、現在時刻を表示します。

<script>
alert(new Date().toLocaleTimeString()); // 表示結果の例: 11:06:45 
</script>

年月日と時分秒を個別に取得しよう

しかし、今回のプログラムを作る場合には、年月日と時分秒をそれぞれの値で得る必要があります。Dateオブジェクトの次のメソッドを使うと、それぞれの値を取得できます。

以下のプログラムは、年月日と時分秒をそれぞれ変数に得る例です。

<script>
const t = new Date();
// 年月日を取得
const y = t.getFullYear();
const m = t.getMonth(); // --- （月番号は0から始まるので注意）
const d = t.getDate();
// 時分秒を取得
const h = t.getHours();
const i = t.getMinutes();
const s = t.getSeconds();
// 結果を表示
const ymdhis = `${y}/${m + 1}/${d} ${h}:${i}:${s}`;
alert(ymdhis); // 表示例→ 2025/6/14 11:15:30
</script>

上記のプログラムを見ると分かりますが、Dateオブジェクトの「getXXX()」というメソッドを通して年月日、時分秒を取得できるようになっています。

気をつけたい点としては、月を得るgetMonthメソッドです。月は0から始まる値（1月なら0、6月なら5）が返る点です。

2つのDateオブジェクトの差分を得るには？

なお、面白いことに、Dateオブジェクト同士を引き算すると、差分ミリ秒(1/1000秒)が得られる仕組みとなっています。今日の夜20時まで何秒あるのかを調べるプログラムが以下になります。

<script>
// 予定時刻(今日の夜20時)を指定 --- (※1)
const t = new Date();
const target = new Date(t.getFullYear(), t.getMonth(), t.getDate(), 20, 0, 0);
// 現在時刻との差を計算 --- (※2)★ここがポイント★
const diffSec = Math.floor((target - t) / 1000);
// 残り何秒かを表示
alert(`今夜20時まで残り${diffSec}秒`)
</script>

上記のプログラムを、「remain_seconds.html」という名前で保存して、ブラウザにドラッグ＆ドロップして実行しましょう。すると今夜20時までの残り秒を表示します。

  • 予定時刻までの残り秒を表示する

    予定時刻までの残り秒を表示する

プログラムの(※1)では、今日の20時0分を表すDateオブジェクトを作成します。「new Date(年, 月, 日, 時, 分, 秒)」のように書くと、指定時刻を表すDateオブジェクトが作成できます。

このプログラムのポイントが(※2)です。Dateオブジェクト同士を引き算すると、残り秒数(ミリ秒単位)が得られます。今日の20時を表すtargetと現在時刻を表すtの差を1000で割ると、予定時刻までの残り秒数が得られるのです。

そして、上記のプログラムの秒を時間に換算したのが冒頭のプログラムになります。残り秒数を、1時間を表す3600秒(=60×60)で割ると残り時間が得られます。

カウントダウン時計を作ろう

それでは、ここまでで分かったことのまとめとして、カウントダウン時計を作ってみましょう。画面表示も含めて、24行だけでカウントダウン時計を作ることができました。

<!DOCTYPE html><html><body>
<h1 style="text-align: center;">今夜20時まで<br>
    残り<span id="disp">...</span>だけ<br>(ToT)</h1>
<script>
// div要素を得る
const disp = document.getElementById("disp");
// 予定時刻(今日の夜20時)を指定 --- (※1)
const t = new Date();
const target = new Date(t.getFullYear(), t.getMonth(), t.getDate(), 20, 0, 0);
const pad2 = (n) => Math.floor(n).toString().padStart(2, '0');
setInterval(() => { // --- (※2)
    // 現在時刻との差を計算 --- (※3)
    const sec = Math.floor((target - new Date()) / 1000);
    // HH:MM:SS形式に変換 --- (※4)
    const h = pad2(sec / 3600);
    const i = pad2((sec % 3600) / 60);
    const s = pad2(sec % 60);
    // 残り時間を表示 --- (※5)
    disp.innerHTML = `${h}:${i}:${s}`;
    disp.style.color = 'red';
    disp.style.backgroundColor = (sec % 2) ? 'yellow' : 'black';
}, 500); // 500ミリ秒ごとに更新
</script>
</body></html>

上記のプログラムを「countdown.html」という名前でファイルに保存します。そして、ブラウザにドラッグ＆ドロップするとカウントダウン時計が表示されます。

  • 背景色が1秒毎に変わるカウントダウン時計

    背景色が1秒毎に変わるカウントダウン時計

なお、単にカウントダウンするだけでなく、HH:MM:SSの時計部分が1秒毎に変わる視覚効果も付けてみました。こうした、ちょっとした効果を付けられるのが自作ガジェットの面白いところです。

プログラムを確認してみましょう。プログラムの(※1)では予定時刻を今日の20時と設定します。特定の日時であれば、この部分を変更してください。

(※2)では、setIntervalを利用してタイマーを設定します。「setInterval(() => { ... }, 500)」のように書くと、500ミリ秒に1回、{から}までの間に書いたプログラムを実行します。今回のようなカウントダウンタイマーを作るには欠かせない機能です。なお、1秒に1回更新するのでは、現実の秒数とのずれがあるため、500ミリ秒に1回更新するように配慮しています。

(※3)では予定時刻から現在時刻までの秒差を計算します。そして、(※4)では秒をHH:MM:SS形式に変換します。

最後の(※5)で残り時間を画面に表示します。その際、styleプロパティを指定することで、文字色や背景色を変えることができます。

まとめ

以上、今回はJavaScriptでカウントダウンタイマーを作ってみました。JavaScriptでプログラムを作ると、ブラウザで手軽にプログラムが実行できるので、この手の自作ガジェットを作るには便利です。今回は日時処理の書き方をいろいろ紹介したので、本稿を参考にして、自作時計ガジェットを作ってみるのはどうでしょうか。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「実践力をアップする Pythonによるアルゴリズムの教科書(マイナビ出版)」「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。