JavaScriptで日時の差分を計算する

日常のプログラムにおいて、2つの日時の差分を計算する場面はよくあります。この記事では、JavaScriptを使って日時の差分をどのように計算するのか、具体的なコード例とともに解説します。

Dateオブジェクトとは
ミリ秒単位での差分の取得
ミリ秒を日、時間、分、秒に変換
結果を整形して表示
考慮すべきポイント
サンプルコードイベントまでのカウントダウンタイマー
1. HTML
JavaScript (countdown.js)
1. 解説
まとめ

Dateオブジェクトとは

JavaScriptには、Dateオブジェクトという日付と時刻を扱うための組み込みオブジェクトが用意されています。これを使って、日時の差分を計算します。

const date1 = new Date("2023-08-17T10:00:00");
const date2 = new Date("2023-08-19T12:30:00");

ミリ秒単位での差分の取得

最初のステップは、2つの日時の差分をミリ秒単位で取得することです。

const diffInMilliseconds = date2 - date1;
console.log(diffInMilliseconds); // 出力: 183000000

この結果は2つの日時の差分が183,000,000ミリ秒であることを示しています。

ミリ秒を日、時間、分、秒に変換

得られたミリ秒の差分を、日や時間、分、秒に変換します。これには、以下のように計算します。

const millisecondsInOneSecond = 1000;
const secondsInOneMinute = 60;
const minutesInOneHour = 60;
const hoursInOneDay = 24;

const diffInSeconds = diffInMilliseconds / millisecondsInOneSecond;
const diffInMinutes = Math.floor(diffInSeconds / secondsInOneMinute);
const diffInHours = Math.floor(diffInMinutes / minutesInOneHour);
const diffInDays = Math.floor(diffInHours / hoursInOneDay);

const remainingSeconds = Math.floor(diffInSeconds % secondsInOneMinute);
const remainingMinutes = Math.floor(diffInMinutes % minutesInOneHour);
const remainingHours = Math.floor(diffInHours % hoursInOneDay);

結果を整形して表示

最後に、計算した差分を整形して表示します。

console.log(`日時の差分: ${diffInDays}日 ${remainingHours}時間 ${remainingMinutes}分 ${remainingSeconds}秒`);
// 出力: 日時の差分: 2日 2時間 30分 0秒

考慮すべきポイント

上記の方法はシンプルですが、タイムゾーンや夏時間の影響も受けます。更に正確な計算を行いたい場合には、moment.jsやluxonのような日付・時刻操作を容易にするライブラリの使用を検討しましょう。

サンプルコードイベントまでのカウントダウンタイマー

HTML

まず、カウントダウンの表示場所をHTMLで定義します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カウントダウンタイマー</title>
</head>
<body>
  <h1>イベントまであと:</h1>
  <p id="timer"></p>
  <script src="countdown.js"></script>
</body>
</html>

JavaScript (countdown.js)

次に、カウントダウンのロジックを書きます。Dateオブジェクトを使って未来の日時を設定し、現在時刻との差分を計算します。この差分を整形して画面に表示し、1秒ごとに更新します。

// イベントの日時を設定（例: 2023年12月31日23時59分59秒）
const eventDate = new Date("2023-12-31T23:59:59");
const timerElement = document.getElementById("timer");

function updateCountdown() {
  const now = new Date();
  const diffInMilliseconds = eventDate - now;

  if (diffInMilliseconds <= 0) {
    timerElement.textContent = "イベントは終了しました！";
    return;
  }
  
  const millisecondsInOneSecond = 1000;
  const secondsInOneMinute = 60;
  const minutesInOneHour = 60;
  const hoursInOneDay = 24;

  const diffInSeconds = diffInMilliseconds / millisecondsInOneSecond;
  const diffInMinutes = Math.floor(diffInSeconds / secondsInOneMinute);
  const diffInHours = Math.floor(diffInMinutes / minutesInOneHour);
  const diffInDays = Math.floor(diffInHours / hoursInOneDay);
  
  const remainingSeconds = Math.floor(diffInSeconds % secondsInOneMinute);
  const remainingMinutes = Math.floor(diffInMinutes % minutesInOneHour);
  const remainingHours = Math.floor(diffInHours % hoursInOneDay);
  
  timerElement.textContent = `${diffInDays}日 ${remainingHours}時間 ${remainingMinutes}分 ${remainingSeconds}秒`;
}

// 1秒ごとにカウントダウンを更新
setInterval(updateCountdown, 1000);

解説

このコードは、2023-12-31T23:59:59という未来の日時をイベントの日時として設定しています。現在時刻とこの未来の日時との差分を計算し、それを日、時間、分、秒の形式でWebページに表示します。そして、setInterval関数を使って1秒ごとにこの表示を更新しています。

ブラウザでこのHTMLとJavaScriptを実行すると、指定した未来の日時までの残り時間がリアルタイムで表示され、イベントが終了したら「イベントは終了しました！」と表示されるカウントダウンタイマーが動作します。

このシンプルな例をベースに、さらに高度な機能（例えば、ユーザーが日時を自由に設定できる機能や、カウントダウンが0になった時に音を鳴らす機能など）を追加して、独自のカウントダウンタイマーアプリケーションを作ることも可能です。

まとめ

JavaScriptで日時の差分を計算する方法はシンプルですが、多くの場面で非常に有用です。この記事で紹介した基本的な手法をマスターして、日時に関する処理を自在に操りましょう。