2つの日時の差分を計算する

2つの時間の差を取得する

2つの時間から経過した時間を計算するときはタイムスタンプの値を使って差分を計算します。

以下の例では変数date1とdate2にそれぞれの日時を設定し、2つの時間の差分を変数diffに取得します。

JS コード例

// 2つの日時を用意
let date1 = new Date('2020-04-01 10:00:00');
let date2 = new Date('2020-04-03 10:00:00');

var diff = date2.getTime() - date1.getTime();
console.log(diff / (60*60*1000)); // 48

タイムスタンプの取得にはDateオブジェクトのgetTimeメソッドを使用します。
タイムスタンプは「1970年1月1日 00:00:00」から経過した時間をミリ秒単位で表すNumberの値です。
このタイムスタンプが2つあれば、値の差を計算することで時間差を取得することができます。

計算した時間差もタイムスタンプと同様に単位はミリ秒になりますが、そのままでは分かりづらいため上記のコードでは最後に「diff / (60*60*1000)」という計算で単位を調整しています。
この計算の内訳は「60分 * 60秒 * 1000ミリ秒」で「○時間」の単位に計算し、出力した値は48時間経過したことを示す「48」が出力されます。

以上の計算から時間差を取得できますが、この計算では指定した時間のDateオブジェクトのインスタンスが2つ必要です。
日時を指定してインスタンスを作成する方法はいくつかパターンがあるため、詳しくは「指定した日時からタイムスタンプを取得する」を参照してください。

タイムスタンプの差分が負の値になったときの対応

タイムスタンプは新しいものほど「1970年1月1日 00:00:00」から経過した時間が多くなるので大きい値になります。
しかし、2つのタイムスタンプの差を計算するときにいつでも「新しい時間のタイムスタンプ – 古い時間のタイムスタンプ」になるとは限らない場合があります。

そのときはMath.absメソッドで絶対値を使うようにすると、値が「正」と「負」のいずれも等しく経過した時間を取得できるため便利です。
次の例では、先ほどのコードにMath.absメソッドを追記しています。

JS コード例

// 2つの日時を用意
let date1 = new Date('2020-04-03 10:00:00');
let date2 = new Date('2020-04-01 10:00:00');

// 2つの日時のタイムスタンプで時間差を計算
let diff = date2.getTime() - date1.getTime();
console.log(Math.abs(diff) / (60*60*1000)); // 48

先述したコードとはdate1とdate2の日付を逆にしているため、差分を計算すると負の値「-172800000」になります。
しかし最終行でMath.absメソッドを使って絶対値による計算を行うため、最終的に得られる値は「172800000」を単位調整した値になります。

絶対値を使うことで、2つのタイムスタンプの大小を気にせず計算することができます。

経過した時間の単位を調整する

先ほどは最終的に取得する時間の単位を「○時間」にしましたが、いくつかの単位調整のパターンを紹介していきます。
例では2つのタイムスタンプの差が変数timeに入っていることを前提とします。

JS コード例

// ミリ秒 （そのまま）
console.log(Math.abs(time));

// 秒 （time / 1000ミリ秒）
console.log(Math.abs(time) / 1000);

// 分 （time / (60秒 * 1000ミリ秒))
console.log(Math.abs(diff) / (60 * 1000));

// 時 （time / (60分 * 60秒 * 1000ミリ秒))
console.log(Math.abs(diff) / (60 * 60 * 1000));

// 日 （time / (24時間 * 60分 * 60秒 * 1000ミリ秒))
console.log(Math.abs(diff) / (24 * 60 * 60 * 1000));

// 週 （time / (7日 * 24時間 * 60分 * 60秒 * 1000ミリ秒))
console.log(Math.abs(diff) / (7 * 24 * 60 * 60 * 1000));

// 年 （time / (365日 * 24時間 * 60分 * 60秒 * 1000ミリ秒))
console.log(Math.floor( Math.abs(diff) / (365 * 24 * 60 * 60 * 1000)));

単位を「年」に変換するときは、端数を切り捨てるMath.floorメソッドを使って小数点以下を切り捨てます。

経過した時間を取得する

タイムスタンプを使った時間差の計算とsetIntervalメソッドを組み合わせると、ページが読み込まれてからの経過時間を取得することができます。

JS コード例

// 開始時点のタイムスタンプを取得
let start_time = Date.now();

setInterval(function(){
  let diff = start_time - Date.now();
  console.log(Math.floor( Math.abs(diff)/1000 ) + '秒経過');
}, 5000);

// 5秒経過
// 10秒経過
// 15秒経過
// 20秒経過
// 25秒経過
// 30秒経過
//...
// 延々と続く
//...

ここではDateオブジェクトのインスタンスを作成しないで処理を進めるため、getTimeメソッドの代わりにDate.nowメソッドを使ってタイムスタンプを取得しています。

ページが読み込まれたときに開始時点の時間を変数start_timeに保持しておき、その後はsetIntervalメソッドで5秒（5000）ごとに現時刻を取得して開始時点との差分を計算して経過した時間を取得します。

上記のコードは終わりがなく、コードが実行されている間（ページが表示されている間）はずっと約5秒ごとに出力が繰り返されます。
setIntervalメソッドの第2パラメータに指定する秒数を変更することで、10秒（10000）ごとや1分（60000）ごとなど調整することができます。