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

こんにちは、ryohei(@ityryohei)です!

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

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

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

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

現在の日時を取得する

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

new Date().toLocaleString();

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

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

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

前項で取得した日時をsetIntervalを使って1秒間隔でページ上に表示する処理を作成します。setIntervaldelay(実行感覚)にはミリ秒を指定する必要があるため、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で現在の日時をリアルタイムに表示する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら