🕒【初心者向け】JavaScriptでリアルタイム時計をWebサイトに表示する方法！

プロコム開発チーム

Contents

1 ✅ はじめに
2 🔧 完成イメージ
3 🛠 ステップ1：HTMLの土台を作る
4 🧠 ステップ2：JavaScriptで時間を更新する関数を書く
- 4.1 ✅ 解説
5 💡 応用アイデア
6 🏁 まとめ

✅ はじめに

「Webサイトにリアルタイムで動く時計があったらオシャレかも…」と思ったことはありませんか？
JavaScript を使えば、たった数行のコードで現在時刻を動的に表示する時計が実装できます。

この記事では、**HTMLとJavaScriptだけで実装可能な「デジタル時計」**を初心者向けにわかりやすく解説します。

🔧 完成イメージ

🕒 現在の時刻：14:35:22

このように、ページを開いている間に毎秒自動で更新されるリアルタイム時計を作成します。

🛠 ステップ1：HTMLの土台を作る

まずは、時計を表示するためのHTMLを用意します。

<!-- clock.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リアルタイム時計</title>
  <style>
    #clock {
      font-size: 2rem;
      font-family: 'Courier New', monospace;
      color: #333;
      text-align: center;
      margin-top: 100px;
    }
  </style>
</head>
<body>
  <div id="clock">読み込み中...</div>

  <script src="clock.js"></script>
</body>
</html>

<div id="clock"> が、JavaScriptで更新するターゲット要素です。

🧠 ステップ2：JavaScriptで時間を更新する関数を書く

次に、JavaScriptで現在の時刻を取得して表示するコードを書きます。

// clock.js
function updateClock() {
  const now = new Date();
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');

  const timeString = `${hours}:${minutes}:${seconds}`;
  document.getElementById('clock').textContent = `🕒 現在の時刻：${timeString}`;
}

// 毎秒 updateClock 関数を呼び出す
setInterval(updateClock, 1000);

// ページ読み込み時にも1回表示
updateClock();