JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

Day.jsを使って2つの時刻の差を求める方法【JavaScript】

日付や時刻を扱う際、軽量で使いやすいJavaScriptライブラリ「Day.js」が便利です。この記事では、Day.jsを使って2つの時刻の差（時間数）を計算する方法を解説します。

時刻データの準備

まず、比較対象となる開始時刻と終了時刻をdayjs()で作成します。ここでは例として、開始時刻を10時、終了時刻を22時に設定します。

var startHour = dayjs().hour(10)
var endHour = dayjs().hour(22)

diff()メソッドで時刻の差を取得する

2つの時刻の差を求めるには、diff()メソッドを使用します。第1引数に比較対象のDay.jsオブジェクト、第2引数に単位（ここでは"hours"＝時間）を指定します。

サンプルコード

以下に完全なコード例を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.8.20/dayjs.min.js"></script>
<script>
   var startHour = dayjs().hour(10)
   var endHour = dayjs().hour(22)
   console.log("時間の差は=" + endHour.diff(startHour, "hours"));
</script>
</html>

プログラムの実行方法

上記のコードをindex.htmlなどの名前で保存します。その後、VS Codeエディタでファイルを右クリックし、「Open with Live Server」を選択して実行してください。

実行結果

プログラムを実行すると、ブラウザのコンソールに以下のような結果が出力されます。

Day.jsを使って2つの時刻の差を求める方法【JavaScript】

このように、endHour.diff(startHour, "hours")により、開始時刻と終了時刻の差である「12時間」が正しく計算されます。


  1. PHPとJavaScriptの違いとは?特徴・実行環境・使い分けを徹底解説

    はじめに 本記事では、Web開発で広く使われる2つのプログラミング言語——PHPとJavaScriptの主な違いについて詳しく解説します。それぞれの特徴や動作環境を理解することで、プロジェクトに応じた適切な言語選択ができるようになります。 JavaScriptの特徴 フロントエンドとバックエンドの両方を担当可能:ブラウザ上のUI制御から、Node.jsを使ったサーバーサイド処理まで幅広く対応できます。 非同期処理に対応:入出力操作の完了を待たずに次の処理へ進むため、レスポンスの速いアプリケーションを構築できます。 実行環境が柔軟:ブラウザで直接実行できるほか、「Node.js」の登場以降は

  2. JavaScriptで2次元平面上の2点間の距離を求める方法

    問題x・yプロパティを持つ2つのオブジェクト（平面上の2点を表す）を受け取り、それらの点間の距離を計算して返すJavaScript関数を作成する必要があります。距離の計算式2次元平面上の2点間の距離は、ユークリッド距離の公式を使って求められます。d = √((x₂ − x₁)² + (y₂ − y₁)²)つまり、x座標の差の2乗とy座標の差の2乗を足し合わせ、その平方根を取ればよいことになります。JavaScriptでは Math.sqrt() メソッドと指数演算子（**）を組み合わせることで、この計算を簡単に実装できます。実装例以下が実際のコードです −const a = {x: 5, y: