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

ウェブページにリアルタイムで現在の日時を表示する機能は、多くの場面で有用です。例えば、タイムセールやカウントダウンタイマー、ログのタイムスタンプなど、さまざまな用途で活用できます。この記事では、JavaScriptを使用して、ウェブページに現在の日時をリアルタイムで表示する方法を詳しく解説します。

スポンサーリンク

必要なHTML要素の準備

まず最初に、日時を表示するためのHTML要素を作成します。以下のように、<div>タグを用いてIDを指定します。

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

この<div>要素は、JavaScriptからアクセスして日時を表示する場所となります。

JavaScriptで日時を取得する

次に、JavaScriptを使用して現在の日時を取得します。JavaScriptにはDateオブジェクトがあり、これを用いて日時情報を取得できます。

const now = new Date();
const datetimeString = now.toLocaleString();

new Date()で現在の日時を取得し、toLocaleString()メソッドでそれを文字列に変換しています。

リアルタイムで更新する

現在の日時をリアルタイムで表示するためには、一定間隔で日時を更新する必要があります。JavaScriptのsetInterval関数を使用すると、指定した時間間隔で関数を繰り返し実行できます。

// 関数を初めて呼び出す
displayDateTime();

// 1秒ごとに関数を呼び出すように設定
setInterval(displayDateTime, 1000);

このコードでは、displayDateTime関数を1秒（1000ミリ秒）ごとに呼び出しています。

完全なコードサンプル

以下は、これまでの手順を組み合わせた完全なコードサンプルです。

<!DOCTYPE html>
<html>
<head>
  <title>リアルタイム日時表示</title>
</head>
<body>
  <div id="datetime"></div>

  <script>
    function displayDateTime() {
      const now = new Date();
      const datetimeString = now.toLocaleString();
      document.getElementById("datetime").innerText = datetimeString;
    }

    displayDateTime();
    setInterval(displayDateTime, 1000);
  </script>
</body>
</html>

よくある質問（FAQ）

Q. リアルタイムで文字数を表示するには？
A. inputまたはtextareaのinputイベントを監視し、event.target.value.lengthを文字数表示要素のtextContentに反映します。keyupより精度が高くペースト操作にも対応しています。
Q. 文字数制限を超えた場合に視覚的に警告するには？
A. 上限に近づいたときにCSSクラスを付け替えて色を変更します。例えば残り10文字以下でwarningクラスを追加し、赤色に変えるといった実装が一般的です。
Q. 全角・半角を区別して文字数をカウントするには？
A. 全角1文字を2バイトとして数える場合はlengthではなく独自の計算が必要です。/[^-ÿ]/.test(char)で全角判定し、全角は2、半角は1として加算します。

まとめ

この記事では、JavaScriptを使用してウェブページにリアルタイムで現在の日時を表示する方法を解説しました。HTMLで表示場所を確保し、JavaScriptで日時を取得、そしてsetIntervalでリアルタイムに更新するという流れです。この基本的なテクニックをマスターすることで、さまざまなリアルタイム表示機能に応用することができます。