はじめに
この記事を読めば、JavaScriptで時計を作る方法がわかり、10のサンプルコードを使って時計の作り方やカスタマイズ方法が身につくでしょう。
JavaScriptを触ったことがない初心者でも安心して読み進められる内容です。
●JavaScriptとは
JavaScriptは、ウェブページに動的な要素を追加するために使用されるプログラミング言語です。
例えば、時計のようなリアルタイムで更新される情報を表示するのに便利です。
●時計を作る前に
まず、HTMLとCSSを用意しておきましょう。HTMLは時計の枠組みを作成し、CSSでデザインを整えます。
JavaScriptは、HTMLとCSSに動きを与える役割を果たします。
●基本的な時計の作り方
○サンプルコード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; /* 色を変更 */
}○サンプルコード4：時刻をカスタムフォーマットで表示
時刻をカスタムフォーマットで表示するには、JavaScriptで表示する文字列を調整します。
下記のサンプルコードを参考にしてください。
function formatTime(hours, minutes, seconds) {
return `${hours}:${minutes}:${seconds} ${hours < 12 ? "AM" : "PM"}`;
}この関数を使って、時刻をフォーマットして表示することができます。
○サンプルコード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秒ごとに更新されます。
●注意点と対処法
- タイマー関数（setTimeout、setInterval）を使用する際は、ページを離れるときやリソースを解放する際に、clearTimeoutやclearIntervalを使ってタイマーをキャンセルしてください。
これにより、メモリリークや予期しない動作を防ぐことができます。 - 時刻の表示や計算には、Dateオブジェクトを使用しますが、タイムゾーンの違いやサマータイムの影響に注意してください。
必要に応じて、外部ライブラリ（例：Moment.js、date-fns、Luxon）を使用することで、これらの問題に対処できます。 - 時計の表示には、パフォーマンスに影響する要素（例：アニメーション、高解像度の画像）が含まれる場合があります。
パフォーマンスを向上させるために、リクエストアニメーションフレーム（requestAnimationFrame）を使用し、適切な最適化手法を検討してください。 - ブラウザの互換性に注意してください。
特定のブラウザでのみ動作する機能や、古いブラウザではサポートされていない機能がある場合があります。
対応策として、機能検出（feature detection）を使用して、ブラウザが特定の機能をサポートしているかどうかをチェックし、適切な代替手段を提供してください。
まとめ
この回答では、時計の作り方を学ぶためのサンプルコードを提供しました。
また、デジタル時計、アナログ時計、秒針の色変更、カスタムフォーマット、タイムゾーン表示、カウントダウンタイマー、ストップウォッチ、アラーム機能、ワールドクロック、カレンダーと組み合わせた時計の例を含めています。
さらに、注意点と対処法についても言及しました。これらのサンプルコードと注意点を参考に、独自の時計を作成し、カスタマイズしてみてください。
