JavaScriptで経過時間を取得する方法6選

●JavaScriptで経過時間を取得するには
●リアルタイムに経過時間を表示する
●ミリ秒を時分秒に変換する
- ○サンプルコード4：ミリ秒から時分秒への変換
- ○サンプルコード5：yyyy-mm-dd hh:mm:ss形式での表示
●JavaScriptでの時間計算Tips
まとめ

※本記事のコンテンツは、利用目的を問わずご活用いただけます。実務経験10000時間以上のエンジニアが監修しており、基礎知識があれば初心者にも理解していただけるように、常に解説内容のわかりやすさや記事の品質に注力しております。不具合・分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。(理解できない部分などの個別相談も無償で承っております)
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●JavaScriptで経過時間を取得するには

JavaScriptで経過時間を取得したいと思ったことはありませんか？

Webサイトやアプリケーションを開発していると、「あるイベントが発生してから何ミリ秒経過したか」や「ボタンを押してからどれくらいの時間が経ったか」といった情報を取得したい場面に遭遇することがあります。

そんな時、JavaScriptのDate()オブジェクトを使えば簡単に経過時間を計算することができるんです。

Date()を使えば、現在時刻と開始時刻の差分をミリ秒単位で求められるので、それを元に経過時間を割り出せます。

○Date()で現在時刻と開始時刻を取得

まずは、Date()を使って現在時刻と開始時刻を取得する方法を見ていきましょう。

Date()は、呼び出した時点でのタイムスタンプ（1970年1月1日0時0分0秒からの経過ミリ秒数）を返してくれるオブジェクトです。

現在時刻を取得するには、単純にnew Date()とするだけ。

一方、開始時刻は任意の時点で予めDate()を呼び出しておき、そのタイムスタンプを変数に保持しておく必要があります。

○ミリ秒単位で差分を計算

現在時刻と開始時刻のタイムスタンプが手に入ったら、あとはそれらの差分を計算するだけです。

Date()から取得したタイムスタンプはミリ秒単位の数値なので、そのまま引き算すればOK。

const startTime = new Date();
// 何らかの処理
const endTime = new Date();
const elapsedTime = endTime - startTime;

こんな感じで、endTime（現在時刻）からstartTime（開始時刻）を引くことで、経過ミリ秒数が求められます。

シンプルですね。

○サンプルコード1：基本的な経過時間の取得

// 開始時刻を取得
const startTime = new Date();

// 3秒間の重い処理をシミュレート
const endTime = new Date(startTime.getTime() + 3000);

// 経過時間を計算
const elapsedTime = endTime - startTime;
console.log(`経過時間: ${elapsedTime}ミリ秒`);

実行結果

経過時間: 3000ミリ秒

このサンプルコードでは、startTime（開始時刻）を取得した直後に、わざと3000ミリ秒（3秒）後の時刻をendTime（現在時刻）としています。

実際にはendTimeは処理後に取得しますが、ここでは経過時間を分かりやすくするために、このようにしています。

startTimeとendTimeの差分を求めることで、思った通り3000ミリ秒（3秒）が経過したことが確認できますね。

この基本的な仕組みを理解しておけば、任意の処理にかかった時間を簡単に計測できます。

●リアルタイムに経過時間を表示する

さて、先ほどは経過時間を一度だけ取得する方法を見てきましたが、実際のアプリケーションでは、経過時間をリアルタイムで表示したいことも多いのではないでしょうか。

例えば、ストップウォッチ機能を実装する場合などは、経過時間を一定間隔で更新する必要があります。

そこで登場するのが、JavaScriptのsetInterval関数です。

setIntervalを使えば、指定した間隔ごとに特定の処理を実行できるので、経過時間の表示に最適なんです。

○setIntervalを使った定期的な更新

setInterval関数は、一定の遅延時間ごとに関数を繰り返し実行するためのメソッドです。

使い方は次のようになります。

const timerId = setInterval(func, delay);

第1引数のfuncには、一定間隔で実行したい関数を指定します。

第2引数のdelayは、何ミリ秒ごとに関数を呼び出すかを指定します。

例えば、1000を指定すれば1秒ごとに関数が実行されることになります。

setIntervalはタイマーIDと呼ばれる値を返します。

このタイマーIDを使って、clearInterval関数を呼び出せば、setIntervalを解除できます。

clearInterval(timerId);

これを利用すれば、一定間隔で経過時間を更新し、リアルタイムに表示することが可能になります。

○サンプルコード2：リアルタイム経過時間表示

// 開始時刻
let startTime;

// 経過時間を表示する要素
const elapsedTimeElement = document.getElementById('elapsed-time');

// タイマーID
let timerId;

// 開始ボタンがクリックされたら
document.getElementById('start-button').addEventListener('click', () => {
  // 開始時刻を現在の時刻に設定
  startTime = new Date();

  // 1秒ごとに経過時間を更新
  timerId = setInterval(() => {
    const currentTime = new Date();
    const elapsedTime = currentTime - startTime;

    // 経過時間を表示
    elapsedTimeElement.textContent = `${elapsedTime / 1000}秒`;
  }, 1000);
});

// ストップボタンがクリックされたら
document.getElementById('stop-button').addEventListener('click', () => {
  // タイマーを停止
  clearInterval(timerId);
});

実行結果（1秒ごとに更新）

3秒
4秒 
5秒
...

このサンプルコードでは、開始ボタンがクリックされたタイミングでstartTime（開始時刻）を取得し、setIntervalを使って1秒（1000ミリ秒）ごとに経過時間を計算して表示しています。

elapsedTimeElementは、経過時間を表示するHTML要素です。

ここでは、計算した経過時間をミリ秒から秒に変換して、textContentプロパティに設定することで、画面上に表示しています。

ストップボタンがクリックされたら、clearIntervalを呼び出してタイマーを停止するようにしています。

こうすることで、経過時間の更新を止められます。

○サンプルコード3：ストップウォッチ機能の実装

// 開始時刻
let startTime;

// 停止時間
let stopTime = 0;

// タイマーID
let timerId;

// 経過時間を表示する要素
const elapsedTimeElement = document.getElementById('elapsed-time');

// 開始ボタンがクリックされたら
document.getElementById('start-button').addEventListener('click', () => {
  // 開始時刻を現在の時刻に設定
  startTime = new Date();

  // 1秒ごとに経過時間を更新
  timerId = setInterval(() => {
    const currentTime = new Date();
    const elapsedTime = currentTime - startTime + stopTime;

    // 経過時間を表示
    elapsedTimeElement.textContent = `${elapsedTime / 1000}秒`;
  }, 1000);
});

// ストップボタンがクリックされたら
document.getElementById('stop-button').addEventListener('click', () => {
  // タイマーを停止
  clearInterval(timerId);

  // 停止時間を記録
  const currentTime = new Date();
  stopTime += currentTime - startTime;
});

// リセットボタンがクリックされたら
document.getElementById('reset-button').addEventListener('click', () => {
  // 経過時間をリセット
  elapsedTimeElement.textContent = '0秒';
  stopTime = 0;
});

実行結果

開始ボタンクリック
1秒
2秒
3秒 <- ストップボタンクリック

開始ボタンクリック
4秒
5秒
6秒 <- ストップボタンクリック

リセットボタンクリック
0秒

このサンプルコードは、ストップウォッチ機能を想定したものです。

基本的な仕組みは先ほどのリアルタイム表示と同じですが、ストップボタンを押した時点での経過時間を変数stopTimeに保持しておくことで、一時停止と再開に対応しています。

開始ボタンを押すと、新しいstartTime（開始時刻）を取得し、setIntervalで1秒ごとに経過時間を更新します。

経過時間の計算では、現在時刻からstartTimeを引き、stopTimeを加えることで、一時停止時間を考慮しています。

ストップボタンを押すと、clearIntervalでタイマーを停止し、stopTimeに現在までの経過時間を追加します。

リセットボタンを押すと、表示されている経過時間を0に戻し、stopTimeもリセットします。

●ミリ秒を時分秒に変換する

ここまで経過時間をミリ秒単位で取得する方法を見てきましたが、実際にアプリケーションで表示する際は、ミリ秒よりも時分秒の形式の方が分かりやすいことが多いですよね。

特に、経過時間が長くなると、ミリ秒表示では読みづらくなってしまいます。

そこで、ミリ秒を時分秒に変換する方法を身につけておくと便利です。

JavaScriptでは、簡単な計算でミリ秒から時分秒を求めることができますよ。

まずは、ミリ秒を秒に変換するところから始めましょう。

ミリ秒を1000で割れば、秒単位の値が得られます。例えば、90000ミリ秒は90秒ですね。

次に、秒数から分と秒を求めていきます。60で割った商が分、余りが秒になります。

先ほどの90秒の場合、90÷60=1余り30なので、1分30秒というわけです。

同様に、分から時と分を計算することもできます。

これも60で割って、商が時、余りが分になります。

このように、ミリ秒から時分秒を求めるには、次のステップを踏むことになります。

ミリ秒を1000で割って秒に変換
秒を60で割った商が分、余りが秒
分を60で割った商が時、余りが分

○サンプルコード4：ミリ秒から時分秒への変換

function convertToHMS(milliseconds) {
  // ミリ秒を秒に変換
  const totalSeconds = Math.floor(milliseconds / 1000);

  // 秒を分と秒に分割
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;

  // 分を時と分に分割  
  const hours = Math.floor(minutes / 60);
  const remainingMinutes = minutes % 60;

  return `${hours}時間${remainingMinutes}分${seconds}秒`;
}

// 使用例
const elapsedTime = 3661000; // 1時間1分1秒
const hms = convertToHMS(elapsedTime);
console.log(hms);

実行結果

1時間1分1秒

このサンプルコードでは、convertToHMS関数を定義して、ミリ秒を時分秒の形式に変換しています。

まず、ミリ秒を1000で割って小数点以下を切り捨てることで、秒数を求めています。

Math.floor関数は、引数の値以下の最大の整数を返してくれます。

次に、秒数を60で割った商をminutesに、余りをsecondsに代入しています。

これで分と秒が求まります。

同様に、minutesを60で割った商をhoursに、余りをremainingMinutesに代入することで、時と分を求めています。

最後に、hours, remainingMinutes, secondsを使って、「〇時間〇分〇秒」という形式の文字列を返しています。

このconvertToHMS関数を使えば、ミリ秒単位の経過時間を、より読みやすい時分秒の形式に変換することができます。

○サンプルコード5：yyyy-mm-dd hh:mm:ss形式での表示

function formatDate(milliseconds) {
  const date = new Date(milliseconds);

  const year = date.getFullYear();
  const month = ("0" + (date.getMonth() + 1)).slice(-2);
  const day = ("0" + date.getDate()).slice(-2);
  const hours = ("0" + date.getHours()).slice(-2);
  const minutes = ("0" + date.getMinutes()).slice(-2);
  const seconds = ("0" + date.getSeconds()).slice(-2);

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

// 使用例
const currentTime = new Date().getTime();
const formattedDate = formatDate(currentTime);
console.log(formattedDate);

実行結果

2023-06-05 14:30:45

yyyy-mm-dd hh:mm:ss形式でも日時を表示したい場合は、このサンプルコードのように、Date()オブジェクトのメソッドを使って年月日時分秒をそれぞれ取得し、文字列として組み立てればOKです。

ただ、月、日、時、分、秒が1桁の場合は、前に0をつけて2桁にしておくと見栄えが良くなります。

ここでは、(“0” + 値).slice(-2)というテクニックを使って、2桁の文字列に変換しています。

●JavaScriptでの時間計算Tips

JavaScriptで経過時間を扱う際に、知っておくと便利なTipsをいくつか紹介しましょう。

これを押さえておけば、時間計算やフォーマット変換の幅が広がること間違いなしです。

○現在時刻をyyyymmddhhmmss形式で取得

現在時刻を取得する際、yyyy-mm-dd hh:mm:ss形式だけでなく、yyyymmddhhmmss形式で取得したいこともあるでしょう。

この形式は、日時を表す文字列を数値として扱いやすいため、データベースへの保存や比較処理などで役立ちます。

JavaScriptでは、Date()オブジェクトのメソッドを組み合わせることで、現在時刻をyyyymmddhhmmss形式で取得できます。

padStart()メソッドを使えば、先頭に0を付けて2桁にそろえることも簡単です。

function getCurrentDateTime() {
  const date = new Date();
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}${month}${day}${hours}${minutes}${seconds}`;
}

// 使用例
const currentDateTime = getCurrentDateTime();
console.log(currentDateTime);

実行結果

20230605143045

この関数を使えば、現在時刻をyyyymmddhhmmss形式の文字列として取得できます。

padStart()メソッドを使って、月、日、時、分、秒が1桁の場合は0を先頭に付けて2桁にしているのがポイントですね。

○2つの日時の差分を求める

アプリケーション開発では、2つの日時の差分を求めることも多いでしょう。

例えば、「あるタスクにかかった時間」や「料金の計算に使う時間」などを算出する際に、日時の差分計算が必要になります。

JavaScriptでは、2つのDate()オブジェクトの差分をミリ秒単位で取得し、それを元に時間や日数を計算することができます。

次のgetTimeDifference関数は、開始日時と終了日時を引数に取り、その差分を時分秒形式の文字列で返します。

function getTimeDifference(startDateTime, endDateTime) {
  const startDate = new Date(startDateTime);
  const endDate = new Date(endDateTime);
  const timeDiff = endDate.getTime() - startDate.getTime();

  const seconds = Math.floor(timeDiff / 1000) % 60;
  const minutes = Math.floor(timeDiff / 1000 / 60) % 60;
  const hours = Math.floor(timeDiff / 1000 / 60 / 60);

  return `${hours}時間${minutes}分${seconds}秒`;
}

// 使用例
const startDateTime = '2023-06-05 10:00:00';
const endDateTime = '2023-06-05 12:30:45';
const timeDifference = getTimeDifference(startDateTime, endDateTime);
console.log(timeDifference);

実行結果

2時間30分45秒

startDateTimeとendDateTimeには、’yyyy-mm-dd hh:mm:ss’形式の日時文字列を渡します。

これらをDate()オブジェクトに変換し、getTime()メソッドでミリ秒のタイムスタンプを取得します。

endDateのタイムスタンプからstartDateのタイムスタンプを引くことで、2つの日時の差分をミリ秒単位で求めています。

あとは、このミリ秒を使って時分秒を計算するだけです。

○サンプルコード6：日数や月数の経過計算

function getElapsedTime(startDateTime, endDateTime) {
  const startDate = new Date(startDateTime);
  const endDate = new Date(endDateTime);
  const timeDiff = endDate.getTime() - startDate.getTime();

  const seconds = Math.floor(timeDiff / 1000) % 60;
  const minutes = Math.floor(timeDiff / 1000 / 60) % 60;
  const hours = Math.floor(timeDiff / 1000 / 60 / 60) % 24;
  const days = Math.floor(timeDiff / 1000 / 60 / 60 / 24);
  const months = Math.floor(days / 30);
  const years = Math.floor(months / 12);

  return `${years}年${months%12}ヶ月${days%30}日${hours}時間${minutes}分${seconds}秒`;
}

// 使用例
const startDateTime = '2022-01-01 00:00:00';
const endDateTime = '2023-06-05 14:30:45';
const elapsedTime = getElapsedTime(startDateTime, endDateTime);
console.log(elapsedTime);

実行結果