今、頑匵らないずいけないのに「やる気が出ない」ずいう時がありたす。そんな時に残り時間が明確に分かれば、「時間がない、頑匵らないず」ずいう気分になるかもしれたせん。そこで、今回は「残された時間を秒数で衚瀺するカりントダりン時蚈」を䜜っおみたしょう。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(マむナビ出版)」など。