JavaScriptでリアルタイム時計を作成！現在時刻を表示し続けるシンプルな方法

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Webサイトにちょっとした動きを加えたいとき、JavaScriptで作る「リアルタイム時計」はとても役立つテクニックの一つです。

「今この瞬間の時刻を表示し続ける」だけの機能ですが、ユーザーにとっては動きのある情報があることで、サイトへの信頼感や没入感が増すという効果も期待できます。

今回は、JavaScriptだけで現在時刻をリアルタイムに更新表示する方法を、初心者の方にもわかりやすく解説します。

さらに、実際に動かせる完成コードやデザインの工夫まで含めて、実用的な内容に仕上げていきますね！

JavaScriptで現在時刻を取得する基本

JavaScriptには、現在の日時を取得できる便利なオブジェクトがあります。
それが Date オブジェクトです。

次のように使えば、時・分・秒を簡単に取り出せます。

const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();

この Date オブジェクトを定期的に呼び出して、値をHTMLに表示させるのが「リアルタイム時計」の基本です。

リアルタイム更新にはsetIntervalを使う

「1秒ごとに時刻を更新する」ために使うのが setInterval 関数です。

これは指定した時間ごとに、特定の関数を自動で繰り返し実行してくれる便利な仕組みです。

  setInterval(showTime, 1000); // 1000ミリ秒＝1秒ごとにshowTime関数を実行  

HTML＋JavaScriptの完成コード

以下が、実際にWebページに貼り付けて動かせるサンプルコードです。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

ポイントは padStart(2, '0') を使って、1桁の時刻も「08:03:05」のように2桁表示に揃えるところです。

CSSでデジタル風にスタイリング

表示される時刻にスタイルをつけて、見やすくかっこよくするのも大事です!
以下は、シンプルで使いやすいスタイルの例です。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

背景を暗く、フォントをモノスペース系にするだけで、ぐっと「デジタル時計」感が出てきます。

リアルタイム時計の使いどころアイデア

リアルタイム時計はちょっとした機能ですが、ユーザー体験（UX）を高めるのに効果的です。

時計だけでも、「いまを伝える」表現として十分に価値があるんですよ。

まとめ

今回は、JavaScriptだけで「リアルタイム時計」を作る方法をご紹介しました。

「動的な情報を表示する」という体験は、それだけでサイトへの信頼感や活気を感じさせる演出になります!

特にJavaScriptに慣れていない方でも、今日紹介したコードはそのままコピペで動くので、ぜひ気軽に試してみてください。

Webサイトに“時の流れ”を感じさせる小さな工夫、始めてみませんか？

satokotadesignキャンペーン実施中！