【JavaScript入門】経過時間の計算

　JavaScript で「ある処理が何秒かかったか」を測定するもっとも手軽な方法は、2 つの時刻の差を取ることです。基準は 1970‑01‑01 00:00:00 UTC からの経過ミリ秒で、Date クラスはその値を次の 2 系統で提供しています。

取得方法特徴精度
Date.now() (静的メソッド)いまこの瞬間の経過ミリ秒を返す約 1 ms
performance.now() (Performance API)ページ読み込みを 0 ms とした高精度タイマーµs オーダー (ブラウザ依存)

ここでは主に Date.now() を使い、処理前後の差分から「経過時間」を算出する手順を解説します。

１．Date.now() で経過ミリ秒を求める

1.1. 基本パターン

const start = Date.now();
// 時間のかかる処理…
const end   = Date.now();
const diff  = end - start; // ミリ秒

diff / 1000 とすれば秒単位に変換できます。

1.2. メリットと注意点

  • 軽量： インスタンス生成不要
  • UTC/ローカル差を意識しなくてよい
  • OS の時計が変わると値も変わる → 長時間計測には performance.now() 推奨

２．実践サンプル ― 画像プリロードの所要時間を測る

ファイル名： elapsed_timer.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>経過時間の計測デモ</title>
<style>
body{font-family:sans-serif;margin:2rem}
#log{white-space:pre-line;background:#f4f4f4;padding:.8rem}
</style>
</head>
<body>
<h2>⏱️ 経過時間の計算</h2>
<button id="run">画像をプリロードして計測</button>
<p id="status">準備完了</p>
<div id="log"></div>

<script>
(() => {
  const btn   = document.getElementById('run');
  const stat  = document.getElementById('status');
  const log   = document.getElementById('log');

  // 計測対象: ダミー画像 5 枚を順に読み込む
  const imgs = [
    'https://picsum.photos/300?random=1',
    'https://picsum.photos/300?random=2',
    'https://picsum.photos/300?random=3',
    'https://picsum.photos/300?random=4',
    'https://picsum.photos/300?random=5'
  ];

  btn.onclick = async () => {
    stat.textContent = '読み込み中…';
    log.textContent  = '';

    const t0 = Date.now();

    // 画像を 1 枚ずつプリロード
    for (const src of imgs) {
      await new Promise(res => {
        const img = new Image();
        img.onload  = res;
        img.onerror = res;
        img.src = src;
      });
      log.textContent += `${src} 読み込み完了\n`;
    }

    const t1   = Date.now();
    const diff = t1 - t0;

    stat.textContent =
      `開始 ${t0} / 終了 ${t1} → 経過 ${diff} ミリ秒 (${(diff/1000).toFixed(2)} 秒)`;
  };
})();
</script>
</body>
</html>

ブラウザ実行例

ログには各画像 URL と「読み込み完了」が順次追記されます。

プログラム解説

ポイント説明
t0 = Date.now()計測スタート
await new Promise(res => img.onload = res)非同期読み込みを逐次待機
diff = t1 - t0経過ミリ秒を算出
toFixed(2)秒を小数第 2 位まで表示

３．高精度が欲しい場合 ― Performance API

const t0 = performance.now();
// 処理
const diff = performance.now() - t0; // µs 単位の float
  • ページリロードを基準にした相対時刻なので OS 時計変更の影響を受けにくい
  • Node.js では process.hrtime.bigint() が類似機能

４．経過時間を部品化する関数例

export function measure(fn) {
  const start = Date.now();
  const ret   = fn();
  const end   = Date.now();
  return { result: ret, ms: end - start };
}

const { result, ms } = measure(() => heavyCalc(10_000));
console.log(`計算結果=${result}, 所要=${ms}ms`);

まとめ

  • Date.now() → end‑start が最短ルート
  • 秒換算は /1000, 分換算は /60000 と覚えると楽
  • 長時間計測や高精度が必要なら performance.now() や Node の hrtime を使用

　まずはサンプルを実行し、ネットワーク速度や処理量を変えて経過時間がどう伸縮するか試してみましょう。