はじめに
この記事を読めば、JavaScriptで現在時刻をミリ秒単位で表示する方法が身につくでしょう。
JavaScript初心者の方でも、サンプルコード付きでわかりやすく解説しているので、ぜひ挑戦してみてください。
●JavaScriptの基本
○JavaScriptとは
JavaScriptは、ウェブページに動的な機能を追加するためのプログラミング言語です。
HTMLとCSSで構成されるウェブページに対して、JavaScriptを使うことで、ユーザーとのインタラクションを向上させることができます。
○JavaScriptを使ってみよう
まずは、HTMLファイルを作成し、下記のコードを記述してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptで現在時刻をミリ秒単位で表示する</title>
</head>
<body>
<div id="currentTime"></div>
<script>
// 現在時刻を表示する関数
function displayCurrentTime() {
const currentTimeDiv = document.getElementById('currentTime');
const now = new Date();
currentTimeDiv.innerHTML = now;
}
// 関数を実行
displayCurrentTime();
</script>
</body>
</html>上記のコードでは、<div>要素に現在時刻を表示するためのコードが含まれています。
<script>タグ内には、現在時刻を表示する関数displayCurrentTime()が定義されており、この関数が実行されることで、現在時刻が表示されます。
●現在時刻をミリ秒単位で表示する方法10選
JavaScriptを使って現在時刻をミリ秒単位で表示する方法を10通り紹介します。
サンプルコード付きで解説しているので、初心者の方でも理解しやすい内容となっています。
○方法1：Dateオブジェクトを使用する
JavaScriptのDateオブジェクトを使って、現在時刻をミリ秒単位で表示する方法です。
const now = new Date();
const milliseconds = now.getMilliseconds();
console.log(milliseconds);上記のサンプルコードでは、new Date()で現在時刻を取得し、getMilliseconds()メソッドを使ってミリ秒単位の値を取得しています。
最後に、console.log()で取得したミリ秒を表示しています。
○方法2：toLocaleTimeStringを利用する
toLocaleTimeStringメソッドを利用して、現在時刻をミリ秒単位で表示する方法です。
const now = new Date();
const currentTime = now.toLocaleTimeString('ja-JP', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit', fractionalSecondDigits: 3 });
console.log(currentTime);上記のサンプルコードでは、toLocaleTimeStringメソッドにオプションを指定して、時刻を24時間制の形式でミリ秒単位まで表示しています。
○方法3：setIntervalを使って自動更新する
setIntervalを使って、現在時刻をミリ秒単位で自動更新する方法です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>現在時刻を自動更新する</title>
</head>
<body>
<div id="currentTime"></div>
<script>
// 現在時刻を表示する関数
function displayCurrentTime() {
const currentTimeDiv = document.getElementById('currentTime');
const now = new Date();
const milliseconds = now.getMilliseconds();
currentTimeDiv.innerHTML = now + ' ' + milliseconds;
}
// 関数を1秒ごとに実行
setInterval(displayCurrentTime, 1000);
</script>
</body>
</html>上記のサンプルコードでは、setInterval関数を使って、displayCurrentTime関数を1秒ごとに実行しています。これにより、現在時刻が自動的に更新されます。
○方法4：カウントダウンタイマーを作成する
カウントダウンタイマーを作成して、ミリ秒単位で表示する方法です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>カウントダウンタイマー</title>
</head>
<body>
<div id="countdown"></div>
<script>
// カウントダウンタイマーの終了時刻を設定
const endTime = new Date().getTime() + 10000; // 現在時刻から10秒後
// カウントダウンを表示する関数
function displayCountdown() {
const countdownDiv = document.getElementById('countdown');
const now = new Date().getTime();
const remainingTime = endTime - now;
if (remainingTime <= 0) {
clearInterval(intervalId);
countdownDiv.innerHTML = '終了';
} else {
countdownDiv.innerHTML = remainingTime + 'ミリ秒';
}
}
// 関数を1秒ごとに実行
const intervalId = setInterval(displayCountdown, 1000);
</script>
</body>
</html>上記のサンプルコードでは、終了時刻を設定し、それまでの残り時間をミリ秒単位で表示しています。
終了時刻に達したら、「終了」と表示されます。
○方法5：カスタムフォーマットで表示する
現在時刻を自分で定めたフォーマットで表示する方法です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>カスタムフォーマットで現在時刻を表示する</title>
</head>
<body>
<div id="customFormatTime"></div>
<script>
// カスタムフォーマットで日付を表示する関数
function customFormat(date) {
const hour = date.getHours().toString().padStart(2, '0');
const minute = date.getMinutes().toString().padStart(2, '0');
const second = date.getSeconds().toString().padStart(2, '0');
const millisecond = date.getMilliseconds().toString().padStart(3, '0');
return `${hour}:${minute}:${second}.${millisecond}`;
}
// 現在時刻をカスタムフォーマットで表示する
const customFormatTimeDiv = document.getElementById('customFormatTime');
const now = new Date();
customFormatTimeDiv.innerHTML = customFormat(now);
</script>
</body>
</html>このコードでは、customFormat関数がカスタムフォーマットを行っています。
引数として受け取ったdateオブジェクトから時・分・秒・ミリ秒を取得し、padStartメソッドを使って2桁または3桁に揃えています。
最後に文字列を結合し、カスタムフォーマットで現在時刻を表示しています。
○方法6：タイムゾーンを指定して表示する
指定したタイムゾーンで現在時刻を表示する方法です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>タイムゾーンを指定して現在時刻を表示する</title>
</head>
<body>
<div id="timezoneTime"></div>
<script>
// タイムゾーンを指定して日付を表示する関数
function displayTimezoneTime(timezoneOffset) {
const now = new Date();
const localTime = now.getTime();
const localOffset = now.getTimezoneOffset() * 60000;
const utc = localTime + localOffset;
const timezoneTime = new Date(utc + (60000 * timezoneOffset));
document.getElementById('timezoneTime').innerHTML = timezoneTime.toLocaleString();
}
// 東京のタイムゾーンオフセットを指定
const tokyoOffset = 9 * 60;
// 東京のタイムゾーンで現在時刻を表示
displayTimezoneTime(tokyoOffset);
</script>
</body>
</html>このコードでは、displayTimezoneTime関数がタイムゾーンを指定して現在時刻を表示しています。
まず、現在時刻を取得し、ローカルタイムとUTC（協定世界時）を計算しています。
次に、指定したタイムゾーンオフセットを加算し、新しいDateオブジェクトを作成しています。
最後に、toLocaleStringメソッドを使って指定したタイムゾーンで現在時刻を表示しています。
○方法7：Unixタイムスタンプを利用する
Unixタイムスタンプ（1970年1月1日からの経過ミリ秒数）を利用して現在時刻を表示する方法です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Unixタイムスタンプを利用して現在時刻を表示する</title>
</head>
<body>
<div id="unixTimestampTime"></div>
<script>
// Unixタイムスタンプを取得
const unixTimestamp = Date.now();
// UnixタイムスタンプをDateオブジェクトに変換
const unixTimestampDate = new Date(unixTimestamp);
// 現在時刻を表示
document.getElementById('unixTimestampTime').innerHTML = unixTimestampDate.toLocaleString();
</script>
</body>
</html>このコードでは、Date.now()メソッドを使って現在時刻のUnixタイムスタンプを取得しています。
その後、取得したUnixタイムスタンプを引数に与えてDateオブジェクトを作成しています。
最後に、toLocaleStringメソッドを使用して、ローカルタイムゾーンの現在時刻を表示しています。
○方法8：ライブラリを使って表示する
JavaScriptで日付や時刻を扱うためのライブラリを利用することで、より簡単に表示やフォーマットの変更が可能です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ライブラリを使って現在時刻を表示する</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
<div id="momentJsTime"></div>
<script>
// Moment.jsを使用して現在時刻を表示
const momentJsTimeDiv = document.getElementById('momentJsTime');
const momentJsTime = moment().format('YYYY年MM月DD日 HH:mm:ss');
momentJsTimeDiv.innerHTML = momentJsTime;
</script>
</body>
</html>このコードでは、Moment.jsを使って現在時刻を取得し、カスタムフォーマットで表示しています。
moment()関数で現在時刻のMomentオブジェクトを作くり、formatメソッドを使って指定されたフォーマットで時刻を表示しています。
この方法では、簡単に様々なフォーマットで時刻を表示できます。
○方法9：ミリ秒単位の経過時間を表示する
ミリ秒単位で経過時間を表示するには、performance.now()メソッドを使用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ミリ秒単位の経過時間を表示する</title>
</head>
<body>
<button onclick="showElapsedTime()">経過時間を表示</button>
<div id="elapsedTime"></div>
<script>
// 経過時間を表示する関数
function showElapsedTime() {
// ページ読み込みからの経過時間を取得
const elapsedTime = performance.now();
// 経過時間を表示
document.getElementById('elapsedTime').innerHTML = '経過時間：' + elapsedTime.toFixed(2) + 'ミリ秒';
}
</script>
</body>
</html>このサンプルコードでは、ボタンをクリックするとshowElapsedTime関数が実行され、経過時間がミリ秒単位で表示されます。
performance.now()を使用して経過時間を取得し、toFixed()メソッドで小数点以下2桁に丸めて表示しています。
○方法10：リアルタイムで経過時間を表示する
リアルタイムで経過時間を表示するには、setInterval()を利用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>リアルタイムで経過時間を表示する</title>
</head>
<body>
<div id="realtimeElapsedTime"></div>
<script>
// ページ読み込み時の時刻を取得
const startTime = performance.now();
// 経過時間をリアルタイムで表示する関数
function updateElapsedTime() {
const elapsedTime = performance.now() - startTime;
document.getElementById('realtimeElapsedTime').innerHTML = '経過時間：' + elapsedTime.toFixed(2) + 'ミリ秒';
}
// 100ミリ秒ごとにupdateElapsedTime関数を実行
setInterval(updateElapsedTime, 100);
</script>
</body>
</html>このサンプルコードでは、setInterval()を使って100ミリ秒ごとにupdateElapsedTime()関数が実行され、リアルタイムで経過時間が表示されます。
この方法で、ページを開いてからの経過時間がリアルタイムで更新されるようになります。
●カスタマイズ方法
上記の方法を応用し、さらにカスタマイズすることで、独自の時計やタイマーを作成することができます。
例えば、表示するフォーマットを変更したり、特定のイベントが発生したときに経過時間をリセットする機能を追加したりできます。
また、CSSを用いて、表示される時刻のデザインをカスタマイズすることもできます。
●注意点
JavaScriptで時刻を扱う際には、ブラウザやデバイスによって異なる挙動があることに注意が必要です。
例えば、いくつかのブラウザはDateオブジェクトのタイムゾーンオフセットが正しく取得できないことがあります。
そのため、タイムゾーンを指定して表示する場合は、ライブラリを使用することをお勧めします。
また、setInterval()やsetTimeout()は、タブが非アクティブになると遅延することがあります。
そのため、正確なタイミングが重要な場合は、requestAnimationFrame()などの代替手段を検討してください。
まとめ
この記事では、JavaScriptを使用して現在時刻をミリ秒単位で表示する方法を10通り紹介しました。
これらの方法を組み合わせることで、様々な時刻表示やタイマー機能を実装することができます。
どの方法が最適かは、表示したい時刻の形式や、アプリケーションの要件によって異なります。
適切な方法を選択し、カスタマイズして、自分のアプリケーションに最適な時刻表示を実現しましょう。
