【JavaScript】現在の日時をリアルタイムに表示する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで現在の日時をリアルタイムに表示する方法をご紹介しています。

ページ上に現在の日時をリアルタイムに表示したいな。良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

現在の日時を取得する

JavaScriptで日時を取得する場合はDateオブジェクトを参照します。Dateオブジェクトで現在の日時を取得するには、下記のようにDateオブジェクトを呼び出します。

new Date().toLocaleString();

上記の記述で現在の日時を取得することができますので、取得した日付を一定の間隔で画面に表示するための処理を作成していきます。

現在Temporalという日付と時刻の新しいAPIが開発されているようです。公開はまだ先のようですが、楽しみですね！

現在の日時をリアルタイムに表示する

前項で取得した日時をsetIntervalを使って1秒間隔でページ上に表示する処理を作成します。setIntervalのdelay（実行感覚）にはミリ秒を指定する必要があるため、1秒間隔で日時を更新する場合は100を指定します。

HTML

<p id="now"></p>

JavaScript

setInterval(()=>{
    document.querySelector('#now').textContent = new Date().toLocaleString();
}, 100);

実行結果は下記の通りです。

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

日時がページ上で更新されています。これで現在の日時をリアルタイムにページに表示することができますね。

参考：Date - JavaScript | MDN

最後に

本記事でご紹介した内容は、JavaScriptの入門的な位置づけとして紹介されることが内容となっていますが、日時の処理自体は実務でたまに使用することがあります。基本的にDateオブジェクトの使い方と、取得した日時を使った計算ができれば対応できるケースがほとんどです。本記事を閲覧いただいてるということは、日時を使って何らかの処理を作成している最中だと思います。せっかくですので、これを機に日時の計算に慣れておくのも良いかもしれませんね。

以上、JavaScriptで現在の日時をリアルタイムに表示する方法のご紹介でした！