JavaScriptで現在時刻をミリ秒単位で表示する方法10選

はじめに
●JavaScriptの基本
- ○JavaScriptとは
- ○JavaScriptを使ってみよう
●現在時刻をミリ秒単位で表示する方法10選
●カスタマイズ方法
●注意点
まとめ

はじめに

この記事を読めば、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()関数が実行され、リアルタイムで経過時間が表示されます。

この方法で、ページを開いてからの経過時間がリアルタイムで更新されるようになります。