【JS応用|豆知識】JavaScriptでミリ秒単位の精密な制御を!Date.prototype.getMillisecondsの使い方

1. 導入

Webアプリケーション開発において、時刻の扱いは避けて通れません。特に、アニメーションのタイミング計測、ログのタイムスタンプ記録、あるいは高頻度なイベントのデバウンス処理などでは、「秒」よりも細かい「ミリ秒(ms)」の精度が不可欠です。JavaScriptの標準機能であるDate.prototype.getMillisecondsは、このミリ秒単位の情報を取得するための非常に重要なメソッドです。この記事では、このAPIを正しく理解し、現場で活用する方法を解説します。

2. 基礎知識

Date.prototype.getMillisecondsは、Dateオブジェクトが保持する時刻情報のうち、0から999までの「ミリ秒」部分を数値で返すメソッドです。

・戻り値:0〜999の整数
・対象:ローカル時刻に基づいたミリ秒
・仕組み:Dateオブジェクトは内部的に「1970年1月1日 00:00:00 UTCからの経過ミリ秒数」を保持しています。このメソッドは、その膨大な数値から現在の「秒以下の端数」のみを抽出して提供してくれます。

3. 実装/解決策

使い方は非常にシンプルです。まずDateオブジェクトを生成し、そのインスタンスに対してメソッドを呼び出すだけです。注意点として、getMillisecondsは「その時点」の時刻を取得するため、処理の開始時と終了時で値を比較したい場合は、それぞれでDateオブジェクトを生成するか、`getTime()`で比較する必要があります。

4. サンプルプログラム

以下のコードは、現在の時刻からミリ秒単位まで正確に取得し、コンソールに表示する実用的な例です。

// 現在時刻のオブジェクトを生成
const now = new Date();

// ミリ秒を取得
const ms = now.getMilliseconds();

// 時・分・秒・ミリ秒を整形して表示する関数
function displayCurrentTime() {
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  const milliseconds = date.getMilliseconds();

  // ミリ秒が3桁に満たない場合(例: 5ms)でも005と表示されるようパディング処理
  const formattedMs = String(milliseconds).padStart(3, '0');

  console.log(`現在の時刻: ${hours}:${minutes}:${seconds}.${formattedMs}`);
}

// 実行して確認
displayCurrentTime();

5. 応用・注意点

現場で活用する上で、以下の2点に注意してください。

1. パディング(桁埋め)の重要性
`getMilliseconds`は数値を返すため、0〜99の範囲では「050」ではなく「50」のように桁が減ってしまいます。表示用に使用する場合は、上記のサンプルコードのように`padStart(3, ‘0’)`を使って必ず3桁に揃える癖をつけましょう。

2. パフォーマンス計測には注意
単純な時刻表示には適していますが、コードの実行速度を計測したい場合は、`Date`オブジェクトよりも高精度な performance.now() を使用することを強く推奨します。`Date`はシステム時刻に依存するため、OSの時刻同期(NTPなど)の影響で値が前後する可能性がありますが、`performance.now()`はページ読み込み時からの経過時間をマイクロ秒単位で計測できるため、より信頼性が高いです。

用途に合わせてAPIを使い分けることで、より堅牢なフロントエンド開発が可能になります。ぜひ試してみてください。

タイトルとURLをコピーしました