Moment.jsチュートリアル：JavaScriptで賢く日付時刻を扱う

2024-04-02

Moment.js を使った日付時刻比較：JavaScript、jQuery、datetime

Moment.js のインストール

Moment.js を使う前に、プロジェクトにインストールする必要があります。

1 CDN を使う

CDN を使えば、簡単に Moment.js をプロジェクトに追加できます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

2 npm を使う

npm install moment

日付時刻の比較

Moment.js では、以下の方法で日付時刻を比較できます。

isBefore() と isAfter() メソッドは、指定された日付時刻が現在の日付時刻より前か後かを判断します。

const now = moment();
const past = moment("2023-12-01");
const future = moment("2025-01-01");

console.log(now.isAfter(past)); // true
console.log(now.isBefore(future)); // true

2 isSame()

const now = moment();
const same = moment("2024-03-22");

console.log(now.isSame(same)); // true

3 diff()

diff() メソッドは、2つの日付時刻の間の差分を計算します。

const now = moment();
const past = moment("2023-12-01");

const diff = now.diff(past);

console.log(diff); // 10374400000 (ミリ秒)

// 日数に換算
const days = Math.floor(diff / (1000 * 60 * 60 * 24));

console.log(days); // 117

jQuery を使えば、Moment.js をより簡単に操作できます。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

<p id="date-time"></p>

<script>
$(document).ready(function() {
  const now = moment();
  $("#date-time").text(now.format("YYYY年MM月DD日 HH時mm分ss秒"));
});
</script>

このコードは、現在の日付時刻を #date-time 要素に表示します。

まとめ

Moment.js は JavaScript で日付時刻を扱うための強力なライブラリです。Moment.js を使えば、複雑な日付時刻の比較処理を簡単に実行できます。

Moment.js を使った日付時刻比較のサンプルコード

単純な比較

const now = moment();
const past = moment("2023-12-01");
const future = moment("2025-01-01");

console.log(now.isAfter(past)); // true
console.log(now.isBefore(future)); // true
console.log(now.isSame(now)); // true

差分の計算

const now = moment();
const past = moment("2023-12-01");

const diff = now.diff(past);

console.log(diff); // 10374400000 (ミリ秒)

// 日数に換算
const days = Math.floor(diff / (1000 * 60 * 60 * 24));

console.log(days); // 117

特定の部分だけ比較

const now = moment();
const past = moment("2023-12-01");

console.log(now.isSame(past, "year")); // true
console.log(now.isSame(past, "month")); // false

フォーマット

const now = moment();

console.log(now.format("YYYY年MM月DD日")); // 2024年03月22日
console.log(now.format("YYYY-MM-DD")); // 2024-03-22
console.log(now.format("HH:mm:ss")); // 17:01:00

jQuery と Moment.js の併用

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

<p id="date-time"></p>

<script>
$(document).ready(function() {
  const now = moment();
  $("#date-time").text(now.format("YYYY年MM月DD日 HH時mm分ss秒"));
});
</script>

その他

Moment.js は非常に多くの機能を提供しています。詳細は公式ドキュメントを参照してください。

Moment.js 以外の日付時刻比較の方法

Date オブジェクトは、JavaScript で標準的に提供されている日付時刻を表すオブジェクトです。Date オブジェクトの getTime() メソッドを使えば、ミリ秒単位で日付時刻を比較できます。

const now = new Date();
const past = new Date("2023-12-01");
const future = new Date("2025-01-01");

console.log(now.getTime() > past.getTime()); // true
console.log(now.getTime() < future.getTime()); // true

比較演算子 (<, >, <=, >=, ==, !=) を使って、2つの Date オブジェクトを比較できます。

const now = new Date();
const past = new Date("2023-12-01");
const future = new Date("2025-01-01");

console.log(now > past); // true
console.log(now < future); // true
console.log(now == now); // true