今日の日付と現在時刻を自動表示！「10月15日10:15 現在」をJavaScriptで実装する方法

Posted on by

Webサイトのヘッダーやお知らせ欄などで、
「10月15日10:15 現在」のように“今の時刻”を表示したいことはありませんか？

たとえば、

  • ニュースサイトで「更新時刻」を自動反映したい
  • ECサイトで「本日○○時点の在庫状況」と表示したい
  • 天気・交通情報などで「現在のデータ更新時刻」を出したい

といった場面で役立ちます。

この記事では、JavaScriptを使って リアルタイムに日付＋時刻を表示 するシンプルなスクリプトの書き方を、初心者にもわかりやすく解説します。

完成イメージ

完成すると、次のような表示になります👇

10月15日 10:15 現在

しかも、時間部分「10:15 現在」だけを赤色で強調。
日付は自動的に今日のものに変わり、時刻は1分ごとに更新されます。

HTMLとCSSの基本構造

まずはHTMLの土台を用意しましょう。

<div id="datetime"></div>

<style>
  #datetime {
    font-size: 18px;
  }
  #datetime .time {
    color: red;
    font-weight: bold;
  }
</style>

ポイントは .time クラス。
ここに「赤文字＋太字」のスタイルを指定して、
JavaScript側で時間部分だけをこのクラスで囲うようにします。

JavaScriptで現在の日付と時刻を生成

続いてスクリプト部分です。

<script>
function updateDateTime() {
  const now = new Date(); // 現在日時を取得
  const month = (now.getMonth() + 1).toString().padStart(2, '0');
  const day = now.getDate().toString().padStart(2, '0');
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');

  // HTMLに表示（時刻部分を赤色にする）
  const dateTimeString = `${month}月${day}日 <span class="time">${hours}:${minutes} 現在</span>`;
  document.getElementById('datetime').innerHTML = dateTimeString;
}

// 初回表示＋1分ごとに更新
updateDateTime();
setInterval(updateDateTime, 60000);
</script>

コード解説

処理内容説明
new Date()現在の日時を取得
getMonth() + 1JavaScriptの月は0始まりのため +1
padStart(2, '0')1桁の数字を「01」など2桁に整形
innerHTMLHTML要素内に文字列＋タグを挿入
setInterval(updateDateTime, 60000)1分（60,000ミリ秒）ごとに更新

「現在」時刻だけを赤くする理由

たとえば、企業サイトや店舗情報ページなどでは、
「2025年10月15日10:15 現在」と表示されていると、
“いつの情報なのか”が直感的に伝わる という利点があります。

さらに、時間部分を赤く強調することで、
「情報が更新されている」「最新の時刻」だと視覚的に印象づけられます。

小さな工夫ですが、ユーザーの信頼感を高める重要なUI要素です。

秒単位で更新したい場合

リアルタイムの“時計風”にしたい場合は、
更新間隔を「1秒」に変更すればOKです。

setInterval(updateDateTime, 1000);

この場合は、表示も「10:15:36 現在」のように
秒を含めるように書き換えましょう

const seconds = now.getSeconds().toString().padStart(2, '0');
const dateTimeString = `${month}月${day}日 <span class="time">${hours}:${minutes}:${seconds} 現在</span>`;

英語表記にしたい場合

海外向けサイトや多言語対応ページでは、英語表記もよく使われます。

const options = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
const dateTimeString = now.toLocaleString('en-US', options) + ' JST';

出力例

Oct 15, 10:15 JST

ローカルタイムに応じて自動変換もできるため、
多言語サイトでは toLocaleString() を使うのがおすすめです。

サイトデザインに合わせた応用アイデア

単なる表示だけでなく、サイトのトーンや目的に合わせてデザインアレンジもできます。

カスタマイズ例

#datetime {
  font-size: 16px;
  color: #333;
}
#datetime .time {
  color: #e60000;
  background: #fff5f5;
  padding: 2px 6px;
  border-radius: 4px;
}

背景に淡いピンクを敷くことで、やわらかい雰囲気の「現在時刻表示」に変身。

実際の活用シーン

シーン表示例メリット
ニュースサイト10月15日10:15 現在更新時刻を明確に
天気・災害情報10月15日10:15 現在情報の鮮度を保証
店舗の混雑状況10月15日10:15 現在現在のリアル状況を伝える
株価・為替ページ10月15日10:15 現在リアルタイム更新感を演出

こうした“時刻を添えるだけ”の工夫が、サイト全体の信頼性をぐっと高めてくれます。

よくあるエラーと対策

❌ Cannot read properties of null (reading 'innerHTML')

→ <div id="datetime"></div> がHTMLに存在しない場合に出るエラーです。
必ずスクリプトより上に配置しましょう。

❌ 時間がずれている

→ サーバーのタイムゾーンではなく、閲覧者の端末時刻が基準になります。
もし「日本時間固定」にしたい場合は、toLocaleString('ja-JP', { timeZone: 'Asia/Tokyo' }) を利用します。

まとめ

JavaScriptを使えば、わずか数行で「現在の日付と時刻」を動的に表示できます。

今回のポイント

  • new Date() で現在の日時を取得
  • padStart() で桁揃え
  • innerHTML でタグごと出力
  • CSSクラスで時刻を赤く強調
  • 1分おきに更新することで“常に最新”を保つ

シンプルながら、ニュースサイト・企業ページ・在庫情報・店舗案内など、さまざまな場面で応用できます。
ちょっとしたUI改善でも「信頼されるサイト」に一歩近づくはずです。

おまけ：そのまま使える完全版コード

<div id="datetime"></div>

<style>
  #datetime {
    font-size: 18px;
  }
  #datetime .time {
    color: red;
    font-weight: bold;
  }
</style>

<script>
function updateDateTime() {
  const now = new Date();
  const month = (now.getMonth() + 1).toString().padStart(2, '0');
  const day = now.getDate().toString().padStart(2, '0');
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  document.getElementById('datetime').innerHTML =
    `${month}月${day}日 <span class="time">${hours}:${minutes} 現在</span>`;
}
updateDateTime();
setInterval(updateDateTime, 60000);
</script>

これで、あなたのWebサイトにも「最新時刻の信頼感」をプラス。
小さな工夫が、大きなプロフェッショナル感につながります。