JavaScript で日付の差を秒単位で計算する

はじめに

この実験では、JavaScript を使用して 2 つの日付の差を秒単位で計算する方法を探ります。日付と時間を扱う方法を理解することは、多くのウェブアプリケーションにとって不可欠です。2 つの Date オブジェクトを入力として受け取り、それらの間の時間差を秒単位で返す関数を作成します。このテクニックは、時間間隔の測定、期間の計算、またはタイマーの作成など、さまざまなアプリケーションで役立ちます。この実験の終わりまでに、JavaScript の Date オブジェクトと、時間計算を効率的に実行する方法について、より深い理解を得ることができるでしょう。

JavaScript の Date オブジェクトの使い始め方

JavaScript は、日付と時間を扱うための組み込みの Date オブジェクトを提供しています。日付の差を計算する前に、まず JavaScript で Date オブジェクトを作成して操作する方法を理解しましょう。

Node.js 環境の起動

まずは、対話型の Node.js 環境を開きましょう。

WebIDE 上部の「Terminal」メニューをクリックしてターミナルを開きます。
以下のコマンドを入力して Enter キーを押します。

node

これで Node.js のプロンプト (>) が表示され、JavaScript の対話型環境に入ったことがわかります。これにより、ターミナルで直接 JavaScript コードを実行できます。

node-prompt

Date オブジェクトの作成

JavaScript では、いくつかの方法で新しい Date オブジェクトを作成できます。

// 現在の日付と時刻
let now = new Date();
console.log(now);

// 特定の日付と時刻 (年，月 [0-11], 日，時，分，秒)
let specificDate = new Date(2023, 0, 15, 10, 30, 45); // 2023 年 1 月 15 日 10:30:45
console.log(specificDate);

// 文字列からの日付
let dateFromString = new Date("2023-01-15T10:30:45");
console.log(dateFromString);

これらの例を Node.js 環境でそれぞれ入力し、出力を確認してみてください。

なお、JavaScript では月は 0 から始まるインデックスで表されます。つまり、1 月は 0、2 月は 1 といった具合です。

Date オブジェクトからタイムスタンプを取得する

JavaScript のすべての Date オブジェクトは、内部的に 1970 年 1 月 1 日 (UTC) から経過したミリ秒数として時間を格納しています。これをタイムスタンプと呼びます。

let now = new Date();
console.log(now.getTime()); // ミリ秒単位のタイムスタンプを取得

このタイムスタンプは、日付の差を計算する際に役立ちます。

JavaScript での日付計算の理解

これで Date オブジェクトの作成方法がわかったので、2 つの日付の差を計算する方法を学んでみましょう。

JavaScript での日付演算

JavaScript では、Date オブジェクトに対して直接算術演算を行うことができます。ある Date オブジェクトから別の Date オブジェクトを引くと、JavaScript は自動的にそれらをタイムスタンプ（ミリ秒）に変換して減算を行います。

let date1 = new Date("2023-01-01T00:00:00");
let date2 = new Date("2023-01-01T00:01:00");

let differenceInMilliseconds = date2 - date1;
console.log(differenceInMilliseconds); // 60000 (60 seconds * 1000 milliseconds)

このコードを Node.js 環境で実行してみてください。結果は 60000 になり、これは 60 秒をミリ秒で表したものです。

ミリ秒を秒に変換する

時間差をミリ秒から秒に変換するには、単に 1000 で割ればいいです。

let differenceInSeconds = differenceInMilliseconds / 1000;
console.log(differenceInSeconds); // 60

これにより、時間差が秒単位で得られます。この例では 60 秒、つまり 1 分です。

日付差を計算する関数の作成

ここまでの概念が理解できたので、2 つの日付の差を秒単位で計算する簡単な関数を作成してみましょう。

function getDateDifferenceInSeconds(startDate, endDate) {
  return (endDate - startDate) / 1000;
}

// Test the function
let start = new Date("2023-01-01T00:00:00");
let end = new Date("2023-01-01T00:01:30");
let difference = getDateDifferenceInSeconds(start, end);
console.log(difference); // 90 (1 minute and 30 seconds)

この関数を Node.js 環境で入力して実行してみてください。結果は 90 になり、これは 1 分 30 秒を表しています。

アロー関数を使用した日付差関数の実装

これで日付の差を計算する方法がわかったので、アロー関数を使って関数をより簡潔なバージョンで実装してみましょう。

JavaScript のアロー関数

アロー関数は、JavaScript で関数を書くための短い構文を提供します。以下は、アロー関数の構文を使って日付差関数を書き換えた例です。

const getSecondsDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / 1000;

この関数は、前の関数とまったく同じことを行いますが、よりクリーンで簡潔な構文になっています。

JavaScript ファイルの作成

関数を保存してテストするために、JavaScript ファイルを作成しましょう。Ctrl+D を押すか、.exit と入力して Enter を押して Node.js 環境を終了します。

次に、WebIDE で dateDifference.js という名前の新しいファイルを作成します。

左側のサイドバーにある「Explorer」アイコンをクリックします。
ファイルエクスプローラー内で右クリックし、「New File」を選択します。
ファイル名を dateDifference.js と入力し、Enter を押します。
以下のコードをファイルに追加します。

// Function to calculate difference between two dates in seconds
const getSecondsDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / 1000;

// Test examples
console.log("Example 1:");
console.log(
  getSecondsDiffBetweenDates(
    new Date("2020-12-24 00:00:15"),
    new Date("2020-12-24 00:00:17")
  )
); // Expected output: 2

console.log("\nExample 2:");
console.log(
  getSecondsDiffBetweenDates(
    new Date("2020-12-24 00:00:00"),
    new Date("2020-12-24 00:01:00")
  )
); // Expected output: 60

console.log("\nExample 3:");
console.log(
  getSecondsDiffBetweenDates(
    new Date("2020-12-24 00:00:00"),
    new Date("2020-12-24 01:00:00")
  )
); // Expected output: 3600

Ctrl+S を押すか、「File」>「Save」をクリックしてファイルを保存します。

JavaScript ファイルの実行

先ほど作成したファイルを実行するには、ターミナルで以下のコマンドを使用します。

node dateDifference.js

以下の出力が表示されるはずです。

Example 1:
2

Example 2:
60

Example 3:
3600

これにより、関数が正しく動作していることが確認できます。

最初の例：00:00:15 と 00:00:17 の差は 2 秒です。
2 番目の例：00:00:00 と 00:01:00 の差は 60 秒（1 分）です。
3 番目の例：00:00:00 と 01:00:00 の差は 3600 秒（1 時間）です。

実用的なアプリケーションの作成

これで日付の差を秒単位で計算する機能が動作する関数ができたので、もっと実用的なアプリケーションを作成しましょう。起動してから経過した時間を計算する簡単なタイマーを作成します。

タイマーアプリケーションの作成

WebIDE で timer.js という名前の新しいファイルを作成します。

左側のサイドバーにある「Explorer」アイコンをクリックします。
ファイルエクスプローラー内で右クリックし、「New File」を選択します。
ファイル名を timer.js と入力し、Enter を押します。
以下のコードをファイルに追加します。

// Function to calculate difference between two dates in seconds
const getSecondsDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / 1000;

// Start time - when the script starts running
const startTime = new Date();
console.log(`Timer started at: ${startTime.toLocaleTimeString()}`);

// Function to update and display the elapsed time
function updateTimer() {
  const currentTime = new Date();
  const elapsedSeconds = getSecondsDiffBetweenDates(startTime, currentTime);

  // Format the time as hours:minutes:seconds
  const hours = Math.floor(elapsedSeconds / 3600);
  const minutes = Math.floor((elapsedSeconds % 3600) / 60);
  const seconds = Math.floor(elapsedSeconds % 60);

  const formattedTime = `${hours.toString().padStart(2, "0")}:${minutes
    .toString()
    .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;

  // Clear the console and display the updated time
  console.clear();
  console.log(`Timer started at: ${startTime.toLocaleTimeString()}`);
  console.log(`Elapsed time: ${formattedTime}`);
}

// Update the timer every second
console.log("Timer is running... Press Ctrl+C to stop.");
const timerInterval = setInterval(updateTimer, 1000);

// Keep the script running
setTimeout(() => {
  clearInterval(timerInterval);
  console.log("\nTimer stopped after 1 minute.");
}, 60000); // Run for 1 minute

Ctrl+S を押すか、「File」>「Save」をクリックしてファイルを保存します。

タイマーアプリケーションの実行

タイマーアプリケーションを実行するには、ターミナルで以下のコマンドを使用します。

node timer.js

タイマーが起動し、1 秒ごとに更新され、起動してから経過した時間が表示されます。タイマーは 1 分後に自動的に停止しますが、Ctrl+C を押すことで早く停止することもできます。

タイマーアプリケーションの仕組みの理解

タイマーアプリケーションがどのように動作するかを分解してみましょう。

getSecondsDiffBetweenDates 関数を定義して、時間の差を秒単位で計算します。
スクリプトが実行を開始したときの開始時間を記録します。
updateTimer 関数を定義します。この関数は以下のことを行います。
- 現在の時間を取得します。
- 開始時間から経過した秒数を計算します。
- 経過時間を「時：分：秒」の形式に整形します。
- 整形された時間を表示します。
setInterval を使用して、updateTimer 関数を 1000 ミリ秒（1 秒）ごとに実行します。
setTimeout を使用して、60000 ミリ秒（1 分）後にタイマーを停止します。

このアプリケーションは、日付差関数を実時間のタイマーを作成するために実用的に利用する例を示しています。

まとめ

この実験では、JavaScript で日付を扱う方法と、2 つの日付の差を秒単位で計算する方法を学びました。以下は、あなたが達成したことのまとめです。

JavaScript の Date オブジェクトを作成し、操作する方法を学びました。
JavaScript が内部的にタイムスタンプを使用して日付の算術を処理する方法を理解しました。
2 つの日付の差を秒単位で計算する関数を実装しました。
日付差関数を利用した実用的なタイマーアプリケーションを作成しました。

これらのスキルは、以下のような多くの実世界のアプリケーションで役立ちます。

イベントのカウントダウンタイマーを作成する
Web アプリケーションのパフォーマンスやロード時間を測定する
ユーザーアクション間の期間を計算する
Web アプリケーションに時間ベースの機能を実装する

JavaScript の Date オブジェクトは、日付と時間を扱うための強力なツールであり、時間の差を計算する方法を知ることは、Web 開発者にとって不可欠なスキルです。