読み込み中...

JavaScriptで時計を作る！初心者でもわかる10のサンプルコード

JavaScriptで時計を作る方法を初心者向けに解説する記事のイメージ JS
2023.04.15
この記事は約21分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

JavaScriptで時計を作る方法を解説する記事では、10種類のサンプルコードを通じて、時計の制作方法やカスタマイズの手法を詳しく説明しています。

JavaScriptを初めて触る方でも安心して読み進められるよう、丁寧な解説を心がけています。

●JavaScriptとは

JavaScriptとは、ウェブページに動的な要素を追加するためのプログラミング言語です。

時計のようなリアルタイムで更新される情報を表示する際に便利な言語として知られています。

●時計を作る前に

時計を作成する前に、HTMLとCSSの準備が必要です。

HTMLで時計の基本的な構造を作り、CSSでデザインを整えます。

JavaScriptは、HTMLとCSSで作成した静的な要素に動きを与える役割を果たします。

●基本的な時計の作り方

JavaScriptを使用して基本的な時計を作成する方法を説明します。時計の作成は、JavaScriptの基本的な概念を学ぶ絶好の機会です。

日付や時刻の操作、DOM操作、そして関数の使用方法などを実践的に学ぶことができます。

まずは、最もシンプルなデジタル時計から始めましょう。

このデジタル時計は、現在の時刻を時、分、秒で表示します。

○サンプルコード1：シンプルなデジタル時計

最初に、基本的なデジタル時計を作成してみましょう。

次のサンプルコードをご覧ください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>シンプルなデジタル時計</title>
</head>
<body>
  <div id="clock"></div>

  <script>
    // 時計の表示を更新する関数
    function updateClock() {
      // 現在の日時を取得
      const now = new Date();

      // 時、分、秒を取得
      const hours = now.getHours();
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();

      // 時、分、秒が1桁の場合は0を追加
      const displayHours = hours.toString().padStart(2, "0");
      const displayMinutes = minutes.toString().padStart(2, "0");
      const displaySeconds = seconds.toString().padStart(2, "0");

      // 時計の要素を取得
      const clockElement = document.getElementById("clock");

      // 時計の要素に時刻を表示
      clockElement.textContent = `${displayHours}:${displayMinutes}:${displaySeconds}`;

      // 1秒後に再度更新
      setTimeout(updateClock, 1000);
    }

    // 時計を開始
    updateClock();
  </script>
</body>
</html>

このサンプルコードでは、HTMLで <div id="clock"></div> という要素を用意し、JavaScriptで時刻を表示しています。

updateClock() 関数が現在の時刻を取得し、時、分、秒を0埋めして clock 要素に表示します。

最後の setTimeout(updateClock, 1000) で1秒ごとに updateClock() 関数を呼び出し、時刻を更新しています。

●使い方とカスタマイズ方法

時計の見た目や動作をカスタマイズする方法をいくつか紹介します。

それぞれの方法を試してみることで、自分好みの時計を作ることができるでしょう。

○サンプルコード2：アナログ時計

デジタル時計ではなく、アナログ時計を作成したい場合は、次のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>アナログ時計</title>
  <style>
    #clock {
      position: relative;
      width: 200px;
      height: 200px;
      border: 5px solid black;
      border-radius: 50%;
    }
    .hand {
      position: absolute;
      width: 50%;
      height: 2px;
      background-color: black;
      top: 50%;
      transform-origin: 100%;
    }
    .second-hand {
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="clock">
    <div id="hour-hand" class="hand"></div>
    <div id="minute-hand" class="hand"></div>
    <div id="second-hand" class="hand second-hand"></div>
  </div>

  <script>
    function updateClock() {
      const now = new Date();

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

      const hourDeg = (hours % 12) * 30 + minutes * 0.5;
      const minuteDeg = minutes * 6 + seconds * 0.1;
      const secondDeg = seconds * 6;

      const hourHand = document.getElementById("hour-hand");
      const minuteHand = document.getElementById("minute-hand");
      const secondHand = document.getElementById("second-hand");

      hourHand.style.transform = `rotate(${hourDeg}deg)`;
      minutehand.style.transform = `rotate(${minuteDeg}deg)`;
      secondHand.style.transform = `rotate(${secondDeg}deg)`;

      setTimeout(updateClock, 1000);
    }

    updateClock();
  </script>
</body>
</html>

このサンプルコードでは、CSSで時計の背景と針を作成し、JavaScriptで針の角度を計算して回転させています。

updateClock() 関数で時、分、秒の角度を計算し、それぞれの針に角度を適用しています。

○サンプルコード3：秒針の色を変更する

時計の秒針の色を変更するには、CSSで指定することができます。

次のサンプルコードを参考にしてください。

.second-hand {
  background-color: blue; /* 色を変更 */
}

このCSSコードを追加することで、秒針の色を青色に変更できます。

色を変えることで、時計のデザインに変化を付けることができます。

○サンプルコード4：時刻をカスタムフォーマットで表示

時刻をカスタムフォーマットで表示するには、JavaScriptで表示する文字列を調整します。

次のサンプルコードを参考にしてください。

function formatTime(hours, minutes, seconds) {
  return `${hours}:${minutes}:${seconds} ${hours < 12 ? "AM" : "PM"}`;
}

この関数を使って、時刻をフォーマットして表示することができます。

AM/PMの表記を追加することで、12時間制の時計を作ることができます。

○サンプルコード5：タイムゾーンを表示

タイムゾーンを表示するには、Intl.DateTimeFormat を使って時刻をフォーマットします。

次のサンプルコードを参考にしてください。

function displayTimeWithTimeZone(timeZone) {
  const now = new Date();
  const formatter = new Intl.DateTimeFormat('ja-JP', {
    timeZone: timeZone,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  });
  console.log(formatter.format(now));
}

displayTimeWithTimeZone('Asia/Tokyo');  // 東京の時刻を表示

この関数を使って、指定したタイムゾーンの時刻を表示することができます。

世界各地の時刻を表示したい場合に便利な機能です。

●応用例とサンプルコード

JavaScriptで時計をカスタマイズする応用例として、いくつかのサンプルコードをご紹介します。

これらの例を参考に、独自の機能を持つ時計を作成してみてください。

○サンプルコード6：カウントダウンタイマー

カウントダウンタイマーを作成するには、次のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カウントダウンタイマー</title>
</head>
<body>
  <h1 id="timer">00:00:00</h1>

  <script>
    const endTime = new Date(Date.now() + 10 * 60 * 1000); // 10分後に設定
    const timerElement = document.getElementById("timer");

    function updateTimer() {
      const now = new Date();
      const remainingTime = endTime - now;

      if (remainingTime <= 0) {
        timerElement.textContent = "00:00:00";
        return;
      }

      const hours = Math.floor(remainingTime / (60 * 60 * 1000));
      const minutes = Math.floor((remainingTime % (60 * 60 * 1000)) / (60 * 1000));
      const seconds = Math.floor((remainingTime % (60 * 1000)) / 1000);

      timerElement.textContent = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;

      setTimeout(updateTimer, 1000);
    }

    updateTimer();
  </script>
</body>
</html>

このサンプルコードでは、指定した終了時刻から現在時刻を引いて残り時間を計算し、タイマーに表示しています。

カウントダウンタイマーは、イベントの開始時間までの残り時間を表示するなど、様々な用途に使用できます。

○サンプルコード7：ストップウォッチ

ストップウォッチを作成するには、次のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ストップウォッチ</title>
</head>
<body>
  <h1 id="stopwatch">00:00:00</h1>
  <button id="start">スタート</button>
  <button id="stop">ストップ</button>
  <button id="reset">リセット</button>

  <script>
    let startTime = null;
    let elapsedTime = 0;
    let timerId = null;
    const stopwatchElement = document.getElementById("stopwatch");

    function updateStopwatch() {
      const now = new Date();
      elapsedTime += now - startTime;
      startTime = now;

      const minutes = Math.floor(elapsedTime / (60 * 1000));
      const seconds = Math.floor((elapsedTime % (60 * 1000)) / 1000);
      const milliseconds = elapsedTime % 1000;

      stopwatchElement.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}:${String(milliseconds).padStart(3, '0')}`;
      timerId = setTimeout(updateStopwatch, 10);
    }

    document.getElementById("start").addEventListener("click", () => {
      if (timerId) return;
      startTime = new Date();
      updateStopwatch();
    });

    document.getElementById("stop").addEventListener("click", () => {
      clearTimeout(timerId);
      timerId = null;
    });

    document.getElementById("reset").addEventListener("click", () => {
      clearTimeout(timerId);
      elapsedTime = 0;
      stopwatchElement.textContent = "00:00:00";
      timerId = null;
    });
  </script>
</body>
</html>

このサンプルコードでは、スタート、ストップ、リセットの各ボタンを使ってストップウォッチを操作できます。

ストップウォッチは、時間を計測したい場面で役立ちます。

○サンプルコード8：アラーム機能

アラーム機能を作成するには、次のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>アラーム機能</title>
</head>
<body>
  <input type="time" id="alarmTime">
  <button id="setAlarm">アラームを設定</button>
  <audio id="alarmSound" src="alarm.mp3" preload="auto"></audio>

  <script>
    let alarmTimeoutId = null;
    const alarmTimeInput = document.getElementById("alarmTime");
    const alarmSound = document.getElementById("alarmSound");

    function checkAlarm() {
      const now = new Date();
      const alarmTimeString = alarmTimeInput.value;

      if (!alarmTimeString) return;

      const alarmTime = new Date(now);
      const [hours, minutes] = alarmTimeString.split(":");
      alarmTime.setHours(hours);
      alarmTime.setMinutes(minutes);
      alarmTime.setSeconds(0);
      alarmTime.setMilliseconds(0);

      if (now >= alarmTime) {
        alarmSound.play();
        alarmTimeoutId = null;
      } else {
        alarmTimeoutId = setTimeout(checkAlarm, 1000);
      }
    }

    document.getElementById("setAlarm").addEventListener("click", () => {
      clearTimeout(alarmTimeoutId);
      checkAlarm();
    });
  </script>
</body>
</html>

このサンプルコードでは、アラーム時刻を入力し、「アラームを設定」ボタンをクリックすることでアラームが設定されます。

指定した時刻になると、alarm.mp3 の音が鳴ります。アラーム機能は、重要な予定を忘れないようにするのに役立ちます。

○サンプルコード9：ワールドクロック

ワールドクロックを作成するには、次のサンプルコードを参考にしてください。

このコードを使用すると、複数の都市の時刻を同時に表示することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ワールドクロック</title>
</head>
<body>
  <div id="localTime">現地時刻: </div>
  <div id="tokyoTime">東京時刻: </div>
  <div id="newYorkTime">ニューヨーク時刻: </div>
  <div id="londonTime">ロンドン時刻: </div>

  <script>
    const localTimeElement = document.getElementById("localTime");
    const tokyoTimeElement = document.getElementById("tokyoTime");
    const newYorkTimeElement = document.getElementById("newYorkTime");
    const londonTimeElement = document.getElementById("londonTime");

    function updateTime() {
      const now = new Date();
      localTimeElement.textContent = `現地時刻: ${now.toLocaleString()}`;

      tokyoTimeElement.textContent = `東京時刻: ${now.toLocaleString("ja-JP", { timeZone: "Asia/Tokyo" })}`;
      newYorkTimeElement.textContent = `ニューヨーク時刻: ${now.toLocaleString("en-US", { timeZone: "America/New_York" })}`;
      londonTimeElement.textContent = `ロンドン時刻: ${now.toLocaleString("en-GB", { timeZone: "Europe/London" })}`;
    }

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

このサンプルコードでは、現地時刻、東京時刻、ニューヨーク時刻、およびロンドン時刻が表示されます。

各時刻は1秒ごとに更新されるため、リアルタイムで世界各地の時間を確認できます。

ワールドクロックは、国際的なビジネスや旅行の際に非常に便利です。

○サンプルコード10：カレンダーと組み合わせた時計

最後に、カレンダーと組み合わせた時計を作成する方法を紹介します。

日付と時刻を同時に表示することで、より多くの情報を提供できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カレンダーと組み合わせた時計</title>
</head>
<body>
  <div id="clock">現在時刻: </div>
  <div id="calendar">今日の日付: </div>

  <script>
    const clockElement = document.getElementById("clock");
    const calendarElement = document.getElementById("calendar");

    function updateDateTime() {
      const now = new Date();
      clockElement.textContent = `現在時刻: ${now.toLocaleTimeString()}`;
      calendarElement.textContent = `今日の日付: ${now.toLocaleDateString()}`;
    }

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

このサンプルコードでは、現在時刻と今日の日付が表示されます。時刻は1秒ごとに更新されるため、常に正確な情報を表示できます。

カレンダーと時計を組み合わせることで、日付と時刻を一目で確認できる便利なツールとなります。

●注意点と対処法

JavaScriptで時計を作成する際には、いくつかの注意点があります。

下述の点に気をつけることで、より安定した時計アプリケーションを作成できます。

タイマー関数（setTimeout、setInterval）の使用時には、ページを離れる際やリソースを解放する際に、clearTimeoutやclearIntervalを使ってタイマーをキャンセルすることが重要です。

このプラクティスにより、メモリリークや予期しない動作を未然に防ぐことができます。

時刻の表示や計算には、Dateオブジェクトを使用しますが、タイムゾーンの違いやサマータイムの影響に注意が必要です。

この問題に対処するため、必要に応じて外部ライブラリ（例：Moment.js、date-fns、Luxon）の使用を検討するのがよいでしょう。

時計の表示には、パフォーマンスに影響する要素（例：アニメーション、高解像度の画像）が含まれる場合があります。

パフォーマンスを向上させるために、リクエストアニメーションフレーム（requestAnimationFrame）の使用や、適切な最適化手法の検討が推奨されます。

ブラウザの互換性にも注意が必要です。

特定のブラウザでのみ動作する機能や、古いブラウザではサポートされていない機能がある場合があります。

対応策として、機能検出（feature detection）を使用して、ブラウザが特定の機能をサポートしているかどうかをチェックし、適切な代替手段を提供することが大切です。

まとめ

この記事では、JavaScriptを使用して時計を作成する方法について、詳しく解説しました。

基本的なデジタル時計から始まり、アナログ時計、カスタムフォーマット、タイムゾーン表示、カウントダウンタイマー、ストップウォッチ、アラーム機能、ワールドクロック、そしてカレンダーと組み合わせた時計まで、様々な種類の時計を作成する方法を紹介しました。

時計作成は、日付や時刻の操作、DOM操作、イベントハンドリングなど、多くの重要な概念を実践的に学ぶことができます。

さらに、これらスキルは他のウェブアプリケーション開発にも応用できるため、非常に有益な学習経験となるはずです。