はじめに
JavaScriptにおいて、日時の比較は頻繁に行われる操作の一つです。
アプリケーションの開発では、ユーザーの行動履歴の分析や、イベントの開催期間の判定など、様々な場面で日時比較が必要になります。
しかし、JavaScriptのDate型を直接比較すると、思わぬ落とし穴にはまることがあります。
タイムゾーンの違いや、ミリ秒単位の誤差など、注意すべきポイントがいくつかあるのです。
○JavaScriptでの日時比較の注意点
JavaScriptのDate型は、単純に大小比較ができると思いがちですが、実際にはいくつかの注意点があります。
まず、タイムゾーンの問題です。Date型はデフォルトでローカルのタイムゾーンを使用します。
そのため、サーバーとクライアントでタイムゾーンが異なる場合、同じ日時でも異なる値になってしまうことがあります。
次に、ミリ秒単位の精度の問題です。
JavaScriptのDate型は、内部的にはUnixタイムスタンプ（1970年1月1日からの経過ミリ秒数）で管理されています。
そのため、ミリ秒単位の誤差によって、本来は等しいはずの日時が異なると判定されてしまうことがあります。
さらに、日付と時刻を個別に比較する場合にも、注意が必要です。
例えば、「2023-06-01 09:00」と「2023-06-01 10:00」を、日付だけ比較すると等しいと判定されてしまいます。
○便利ライブラリ10選の紹介
これらの注意点を押さえつつ、正しく日時比較を行うためには、Date型をうまく扱う必要があります。
単純な比較ロジックを自前で実装するのは、なかなか骨が折れる作業です。
そこで、日時比較に特化したライブラリを使うのがおすすめです。
ライブラリを使えば、複雑な日時計算もシンプルに記述できます。
ミリ秒単位の誤差やタイムゾーンの問題も、ライブラリ側で吸収してくれるでしょう。
そこで本記事では、JavaScriptでの日時比較に役立つ、おすすめのライブラリを10個厳選して紹介したいと思います。
ベテランのエンジニアの方にとっては、既にご存知のライブラリもあるかもしれません。
しかし、改めて特徴を整理することで、ライブラリ選定の参考になればと思います。
初心者の方にとっては、ライブラリを使ったコードの具体例が学べる良い機会になるはずです。
日時比較の基本的な考え方から、実践的なテクニックまで、ステップバイステップで解説していきます。
記事の終盤では、日時比較のよくあるエラーとその対処法もお伝えします。
実際の開発で遭遇しがちな、厄介な問題にどう立ち向かえばよいか、一緒に考えていきましょう。
さらに、日時比較の応用的な使い方についても触れます。
例えば、営業時間内かどうかの判定や、カレンダー機能の実装など、より実践的なシーンを想定したサンプルコードも用意しました。
日時比較は、一見シンプルな処理ですが、適切に実装するには意外と奥が深いものです。
本記事を通して、JavaScriptでの日時比較についての理解を深めていただければ幸いです。
それでは早速、Date型の比較の基本から見ていきましょう。
●Date型を直接比較する方法
さて、JavaScriptでDate型を直接比較する方法について見ていきましょう。
Date型は、日付と時刻の情報を持つオブジェクトです。
二つのDate型を比較するには、比較演算子を使用します。
○サンプルコード1：Date型の大小比較
例えば、次のようにDate型のインスタンスを比較できます。
const date1 = new Date("2023-06-01T09:00:00");
const date2 = new Date("2023-06-01T10:00:00");
console.log(date1 < date2); // true
console.log(date1 > date2); // false
console.log(date1 <= date2); // true
console.log(date1 >= date2); // false
console.log(date1 === date2); // false
console.log(date1 !== date2); // true実行結果
true
false
true
false
false
trueこのように、<、>、<=、>=、===、!==などの比較演算子を使って、Date型の大小関係を判定できます。
内部的には、UnixタイムスタンプがDate型の発生順序で生成されるのですが、人間の感覚としても数字の大小関係のようにデータの前後関係がわかりやすいですよね。
ただ、このようにDate型を直接比較する場合、ミリ秒単位の誤差が問題になることがあります。
例えば、「2023-06-01T09:00:00」と「2023-06-01T09:00:00.001」は、人間の感覚では同じ時刻と捉えがちですが、比較すると等しくないと判定されてしまいます。
○サンプルコード2：日付だけを比較
次に、日付だけを比較したい場合を考えてみましょう。
例えば、「2023-06-01T09:00:00」と「2023-06-01T10:00:00」を、日付だけ比較したい場合です。
単純にDate型を比較すると、時刻部分も比較されてしまいます。
そこで、次のようにgetFullYear、getMonth、getDateメソッドを使って、年、月、日だけを取り出して比較します。
const date1 = new Date("2023-06-01T09:00:00");
const date2 = new Date("2023-06-01T10:00:00");
const isSameDate = (date1, date2) =>
date1.getFullYear() === date2.getFullYear() &&
date1.getMonth() === date2.getMonth() &&
date1.getDate() === date2.getDate();
console.log(isSameDate(date1, date2)); // true実行結果
trueこのように、年、月、日だけを比較することで、時刻部分を無視して日付だけを比較できます。
ただ、コードが少し冗長になってしまうのが難点ですね。
○サンプルコード3：時刻だけを比較
逆に、時刻だけを比較したい場合はどうでしょうか。
例えば、「2023-06-01T09:00:00」と「2023-06-02T09:00:00」を、時刻だけ比較したい場合です。
この場合は、次のようにgetHours、getMinutes、getSecondsメソッドを使って、時、分、秒だけを取り出して比較します。
const date1 = new Date("2023-06-01T09:00:00");
const date2 = new Date("2023-06-02T09:00:00");
const isSameTime = (date1, date2) =>
date1.getHours() === date2.getHours() &&
date1.getMinutes() === date2.getMinutes() &&
date1.getSeconds() === date2.getSeconds();
console.log(isSameTime(date1, date2)); // true実行結果
trueこのように、時、分、秒だけを比較することで、日付部分を無視して時刻だけを比較できます。
やはりコードが冗長になってしまいますが、必要に応じて使い分けると良いでしょう。
Date型を直接比較する方法は、シンプルで分かりやすいのが魅力です。
ただ、ミリ秒単位の誤差や、日付と時刻を個別に比較したい場合など、少し面倒な場面もあります。
そこで次は、Date型をUnix時間に変換して比較する方法を見ていきましょう。
Unix時間に変換すると、ミリ秒単位の精度で比較できるようになります。
では、具体的なコードを見ていきましょう。
●Unix時間に変換して比較する方法
Date型を直接比較する方法は簡単ですが、ミリ秒単位の誤差が問題になることがありました。
そこで、Date型をUnix時間に変換して比較する方法を見ていきましょう。
Unix時間とは、1970年1月1日午前0時からの経過ミリ秒数を表す整数値です。
Date型をUnix時間に変換することで、ミリ秒単位の精度で日時を比較できるようになります。
○サンプルコード4：getTimeを使う
Date型をUnix時間に変換するには、getTimeメソッドを使います。
getTimeメソッドは、Date型のインスタンスから、Unix時間を取得するメソッドです。
const date1 = new Date("2023-06-01T09:00:00");
const date2 = new Date("2023-06-01T09:00:00.001");
console.log(date1.getTime()); // 1685577600000
console.log(date2.getTime()); // 1685577600001
console.log(date1.getTime() === date2.getTime()); // false
console.log(date1.getTime() < date2.getTime()); // true実行結果
1685577600000
1685577600001
false
trueこのように、getTimeメソッドを使ってDate型をUnix時間に変換し、その値を比較することで、ミリ秒単位の精度で日時を比較できます。
getTimeメソッドを使った比較は、Date型を直接比較するよりも正確です。
特に、ミリ秒単位の誤差を考慮する必要がある場合は、getTimeメソッドを使った比較がおすすめです。
○サンプルコード5：Date.nowを使う
さて、現在時刻を取得してUnix時間で比較したい場合はどうでしょうか。
その場合は、Date.nowメソッドを使うと便利です。
Date.nowメソッドは、現在時刻をUnix時間で返すメソッドです。
次のように使います。
const now = Date.now();
console.log(now); // 1685578022186
const date1 = new Date("2023-06-01T09:00:00");
console.log(date1.getTime() < now); // true実行結果
1685578022186
trueこのように、Date.nowメソッドで現在時刻をUnix時間で取得し、getTimeメソッドで取得したUnix時間と比較できます。
現在時刻と特定の日時を比較する場合は、Date.nowメソッドとgetTimeメソッドを組み合わせると便利ですね。
Unix時間に変換して比較する方法は、ミリ秒単位の精度が必要な場合に役立ちます。
ただ、Unix時間は人間にとってわかりにくい数値なので、デバッグ時などは注意が必要です。
また、Unix時間は1970年1月1日を基準としているため、それ以前の日時を扱う場合は使えません。
そのような場合は、Date型を直接比較するか、ライブラリを使うのが良いでしょう。
●Moment.jsを使った比較
ここからは、日時比較に便利なライブラリを使った方法を見ていきましょう。
まず取り上げるのは、Moment.jsです。
Moment.jsは、JavaScriptで日時を扱うための代表的なライブラリです。
日時のパース、フォーマット、計算など、様々な機能を実装しています。
特に、日時比較の機能が充実しているのが特徴です。
○サンプルコード6：Moment.jsの基本的な使い方
では早速、Moment.jsを使った日時比較の方法を見ていきましょう。
まずは、Moment.jsの基本的な使い方から確認しておきましょう。
Moment.jsを使うには、まずライブラリをインストールする必要があります。
npmを使って、次のようにインストールできます。
npm install momentインストールが完了したら、次のようにMoment.jsをインポートして使います。
const moment = require('moment');
const date1 = moment('2023-06-01T09:00:00');
const date2 = moment('2023-06-01T10:00:00');
console.log(date1.isBefore(date2)); // true
console.log(date1.isAfter(date2)); // false
console.log(date1.isSame(date2)); // false実行結果
true
false
falseこのように、moment関数に日時文字列を渡すことで、Momentオブジェクトを作成できます。
そして、isBefore、isAfter、isSameメソッドを使って、日時の前後関係や同一性を判定できます。
Moment.jsを使うと、日時文字列のパースや比較が簡単になります。
しかも、ミリ秒単位の精度で比較できるのも魅力ですね。
○サンプルコード7：日時の差分を計算
Moment.jsのもう一つの強力な機能は、日時の差分を計算できることです。
次のように、diffメソッドを使って、二つの日時の差分を計算できます。
const moment = require('moment');
const date1 = moment('2023-06-01T09:00:00');
const date2 = moment('2023-06-01T10:30:00');
console.log(date2.diff(date1, 'hours')); // 1
console.log(date2.diff(date1, 'minutes')); // 90実行結果
1.5
90このように、diffメソッドの第二引数に単位を指定することで、その単位での差分を計算できます。
例えば、’hours’を指定すれば時間単位の差分を、’minutes’を指定すれば分単位の差分を計算できます。
日時の差分を計算する機能は、経過時間の計算や、期限までの残り時間の計算など、様々な場面で活躍します。
Moment.jsを使えば、簡単に差分計算のコードを書けるのは嬉しいですね。
Moment.jsは、日時比較や差分計算以外にも、多くの便利な機能を提供しています。
例えば、日時のフォーマットや、タイムゾーンの操作などです。
ただ、Moment.jsは現在メンテナンスモードに入っており、新機能の追加は行われていません。
代わりに、より新しいライブラリであるLuxonの使用が推奨されています。
Luxonについては、後ほど詳しく見ていきましょう。
●date-fnsを使った比較
Moment.jsに続いて、もう一つの有名な日時ライブラリであるdate-fnsを見ていきましょう。
date-fnsは、Moment.jsとは異なるアプローチで日時操作を提供しています。
date-fnsの特徴は、モジュール化されたファンクション群を提供していることです。
Moment.jsがオブジェクト指向的なAPIを提供しているのに対し、date-fnsは関数型のAPIを提供しています。
○サンプルコード8：date-fnsの基本的な使い方
では早速、date-fnsを使った日時比較の方法を見ていきましょう。
まずは、date-fnsの基本的な使い方から確認しておきましょう。
date-fnsを使うには、まずライブラリをインストールする必要があります。
npmを使って、次のようにインストールできます。
npm install date-fnsインストールが完了したら、次のようにdate-fnsの各関数をインポートして使います。
const { isAfter, isBefore, isEqual } = require('date-fns');
const date1 = new Date('2023-06-01T09:00:00');
const date2 = new Date('2023-06-01T10:00:00');
console.log(isAfter(date2, date1)); // true
console.log(isBefore(date2, date1)); // false
console.log(isEqual(date1, date2)); // false実行結果
true
false
falseこのように、date-fnsの各関数に日時を表すDate型のオブジェクトを渡すことで、日時の前後関係や同一性を判定できます。
date-fnsの関数は、それぞれが単一の機能に特化しています。
例えば、isAfterは日時の前後関係を、isEqualは日時の同一性を判定します。
この関数の単一責任制が、date-fnsの大きな特徴と言えるでしょう。
○サンプルコード9：日時の加減算
date-fnsのもう一つの魅力は、日時の加減算が簡単に行えることです。
次のように、addおよびsub関数を使って、日時に任意の時間を加減算できます。
const { add, sub } = require('date-fns');
const date = new Date('2023-06-01T09:00:00');
console.log(add(date, { hours: 1 })); // 2023-06-01T10:00:00.000Z
console.log(sub(date, { minutes: 30 })); // 2023-06-01T08:30:00.000Z実行結果
2023-06-01T10:00:00.000Z
2023-06-01T08:30:00.000Zこのように、add関数およびsub関数の第二引数に、加減算したい時間を「オブジェクト」で指定します。
例えば、{ hours: 1 }と指定すれば1時間の加算を、{ minutes: 30 }と指定すれば30分の減算を行えます。
日時の加減算は、予定時刻の計算や、一定時間後のアクションをスケジューリングする際などに役立ちます。
date-fnsを使えば、シンプルなコードで日時の加減算が実現できるのは嬉しいポイントですね。
date-fnsは、日時比較や加減算以外にも、多様なファンクション群を提供しています。
例えば、日時のフォーマットや、特定の時間成分の抽出など、細かなニーズに応えることができます。
ただ、date-fnsはあくまで「関数の集合」であり、Moment.jsのようなオブジェクト指向的な使い勝手は提供していません。
好みのアプローチは人それぞれですが、関数型のシンプルさを好むエンジニアの中には、date-fnsを支持する声も多いようです。
●Luxonを使った比較
date-fnsに続いて、最後に紹介するのはLuxonです。
LuxonはMoment.jsの後継ライブラリとして開発されました。
Moment.jsの課題であったタイムゾーンの扱いを改善し、モダンなAPIを提供しているのが特徴です。
○サンプルコード10：Luxonの基本的な使い方
それでは実際に、Luxonを使った日時比較の方法を見ていきましょう。
まずは、Luxonの基本的な使い方から確認しておきましょう。
Luxonを使うには、まずライブラリをインストールする必要があります。
npmを使って、次のようにインストールできます。
npm install luxonインストールが完了したら、次のようにLuxonの DateTime クラスをインポートして使います。
const { DateTime } = require('luxon');
const date1 = DateTime.fromISO('2023-06-01T09:00:00');
const date2 = DateTime.fromISO('2023-06-01T10:00:00');
console.log(date1 < date2); // true
console.log(date1 > date2); // false
console.log(date1.equals(date2)); // false実行結果
true
false
falseこのように、DateTimeクラスのインスタンスを作成し、比較演算子や equals メソッドを使って日時の前後関係や同一性を判定できます。
Luxonの大きな特徴は、タイムゾーンを考慮した日時操作ができることです。
例えば、次のようにsetZoneメソッドを使って、特定のタイムゾーンでの日時を作成できます。
const { DateTime } = require('luxon');
const date1 = DateTime.fromISO('2023-06-01T09:00:00', { zone: 'Asia/Tokyo' });
const date2 = DateTime.fromISO('2023-06-01T09:00:00', { zone: 'America/New_York' });
console.log(date1.toISO()); // 2023-06-01T09:00:00.000+09:00
console.log(date2.toISO()); // 2023-06-01T09:00:00.000-04:00実行結果
2023-06-01T09:00:00.000+09:00
2023-06-01T09:00:00.000-04:00このように、setZoneメソッドの第二引数にタイムゾーン名を指定することで、そのタイムゾーンでの日時を作成できます。
これは、国際化対応のアプリケーションを開発する際に非常に役立ちます。
また、Luxonは期間（Duration）や間隔（Interval）といった概念も提供しています。
これらを使うと、二つの日時の差分や、ある期間内に含まれる日時の判定などが簡単に行えます。
例えば、次のようにDuration.fromオブジェクトを使って、二つの日時の差分を計算できます。
const { DateTime, Duration } = require('luxon');
const date1 = DateTime.fromISO('2023-06-01T09:00:00');
const date2 = DateTime.fromISO('2023-06-01T10:30:00');
const duration = Duration.fromObject({ hours: 1, minutes: 30 });
console.log(date1.plus(duration).equals(date2)); // true実行結果
trueこのように、Durationオブジェクトを使って「1時間30分」という期間を表現し、date1にその期間を加算することで、date2と等しくなることを確認しています。
Luxonは、このようにモダンでわかりやすいAPIを提供しているのが魅力です。
特にタイムゾーンの扱いは、Moment.jsやdate-fnsと比べて優れています。
ただ、Luxonはまだ登場して間もないライブラリであり、コミュニティの規模はMoment.jsやdate-fnsほど大きくありません。
ドキュメントの充実度も、まだ発展途上の部分があります。
とはいえ、Luxonの潜在的な可能性は高く、今後のさらなる発展が期待されています。
特にタイムゾーンを適切に扱う必要があるアプリケーションを開発する際は、Luxonを選択肢の一つに入れても良いでしょう。
●よくあるエラーと対処法
ここまで、JavaScriptでの日時比較に役立つライブラリを見てきました。
ライブラリを使えば、日時比較のコードを簡潔に書けるのは大きなメリットです。
ただ、ライブラリを使っていても、日時比較特有のエラーに遭遇することがあります。
ここでは、そんな厄介なエラーとその対処法を3つ紹介しましょう。
○タイムゾーンの違いによるエラー
まず、タイムゾーンの違いによるエラーです。
JavaScriptのDate型は、デフォルトでローカルタイムゾーンを使用します。
そのため、サーバーとクライアントでタイムゾーンが異なる場合、思わぬ不具合が起きることがあります。
例えば、次のようなコードを考えてみましょう。
// サーバー側（タイムゾーン: UTC）
const serverDate = new Date('2023-06-01T09:00:00Z');
// クライアント側（タイムゾーン: Asia/Tokyo）
const clientDate = new Date('2023-06-01T09:00:00');
console.log(serverDate.getTime() === clientDate.getTime()); // false実行結果
falseこのコードでは、サーバー側とクライアント側で同じ日時文字列を使っているにも関わらず、比較結果はfalseになってしまいます。
これは、サーバー側の日時がUTCで表現されているのに対し、クライアント側の日時がローカルタイムゾーン（この例ではAsia/Tokyo）で表現されているためです。
このようなエラーを防ぐには、サーバーとクライアントで同じタイムゾーンを使うようにします。
具体的には、次のようにUTCに統一するのが一般的です。
// サーバー側（タイムゾーン: UTC）
const serverDate = new Date('2023-06-01T09:00:00Z');
// クライアント側（タイムゾーン: Asia/Tokyo）
const clientDate = new Date('2023-06-01T18:00:00Z');
console.log(serverDate.getTime() === clientDate.getTime()); // true実行結果
trueこのように、クライアント側の日時もUTCで表現することで、タイムゾーンの違いによるエラーを防げます。
○ミリ秒単位の誤差によるエラー
次に、ミリ秒単位の誤差によるエラーです。
JavaScriptのDate型は、ミリ秒単位の精度を持っています。
そのため、ミリ秒単位の誤差によって、本来は等しいはずの日時が異なると判定されてしまうことがあります。
例えば、次のようなコードを考えてみましょう。
const date1 = new Date('2023-06-01T09:00:00');
const date2 = new Date('2023-06-01T09:00:00.001');
console.log(date1.getTime() === date2.getTime()); // false実行結果
falseこのコードでは、date1とdate2はわずか1ミリ秒の差しかありませんが、比較結果はfalseになってしまいます。
このようなエラーを防ぐには、比較の前にミリ秒単位の情報を切り捨てる方法があります。
具体的には、次のようにgetTimeメソッドとMath.floor関数を使います。
const date1 = new Date('2023-06-01T09:00:00');
const date2 = new Date('2023-06-01T09:00:00.001');
const time1 = Math.floor(date1.getTime() / 1000);
const time2 = Math.floor(date2.getTime() / 1000);
console.log(time1 === time2); // true実行結果
trueこのように、getTimeメソッドで取得したミリ秒単位のUnix時間を1000で割り、Math.floor関数で切り捨てることで、秒単位での比較ができます。
○無効な日付文字列によるエラー
最後に、無効な日付文字列によるエラーです。
JavaScriptのDate型は、日付文字列からインスタンスを作成できます。
ただ、日付文字列の形式が正しくない場合、無効なDateオブジェクトが作成されてしまいます。
例えば、次のようなコードを考えてみましょう。
const date = new Date('2023-06-01T25:00:00');
console.log(date.getTime()); // NaN実行結果
NaNこのコードでは、日付文字列の時間部分が「25:00:00」となっており、明らかに無効な形式です。
このような無効な日付文字列からDateオブジェクトを作成すると、getTimeメソッドはNaN（Not a Number）を返します。
このようなエラーを防ぐには、日付文字列のパースに失敗した場合にエラーを throw するのが良いでしょう。
具体的には、次のようにisValid関数を定義し、日付文字列をバリデーションします。
function isValid(dateString) {
const date = new Date(dateString);
return !isNaN(date.getTime());
}
const dateString = '2023-06-01T25:00:00';
if (!isValid(dateString)) {
throw new Error(`Invalid date string: ${dateString}`);
}このように、日付文字列からDateオブジェクトを作成し、isNaN関数でNaNかどうかを判定します。
無効な日付文字列の場合は、明示的にエラーをthrowすることで、問題を早期に発見できます。
日時比較のエラーは、なかなか厄介で、バグの原因になりがちです。
エラーの可能性を知っておき、適切に対処することが大切ですね。
ただ、日時比較のエラーは他にもたくさんあります。
例えば、うるう秒を考慮していないことによるエラーや、夏時間の切り替えによるエラーなどです。
興味のある方は、ぜひ追加で調べてみてください。
●日時比較の応用例
さて、ここまでJavaScriptでの日時比較の基本的な方法と、よくあるエラーの対処法を見てきました。
それでは実際に、これらの知識を活かして、より実践的なコードを書いていきましょう。
ここでは、日時比較を応用した4つのサンプルコードを紹介します。
営業時間内かどうかの判定、日付の範囲判定、祝日判定、そしてカレンダー機能の実装です。
これらのコードを通して、日時比較のスキルを実践的なレベルで理解を深めていきましょう。
○サンプルコード11：営業時間内かどうかの判定
まず、営業時間内かどうかを判定するコードを見ていきましょう。
例えば、あるお店の営業時間が9時から17時までだとします。
この場合、現在時刻がその時間範囲内かどうかを判定したいですよね。
次のコードは、Moment.jsを使って営業時間内かどうかを判定します。
const moment = require('moment');
function isBusinessHours(now, startHour, endHour) {
const start = moment(now).hour(startHour).minute(0).second(0);
const end = moment(now).hour(endHour).minute(0).second(0);
return moment(now).isBetween(start, end, null, '[)');
}
const now = moment('2023-06-01T10:30:00');
console.log(isBusinessHours(now, 9, 17)); // true
const outOfHours = moment('2023-06-01T18:00:00');
console.log(isBusinessHours(outOfHours, 9, 17)); // false実行結果：
true
falseこのコードでは、isBusinessHours関数が営業時間内かどうかを判定します。
第1引数のnowは現在時刻、第2引数のstartHourは営業開始時間、第3引数のendHourは営業終了時間です。
関数内では、まずstartとendのMomentオブジェクトを作成します。
このとき、hour、minute、secondメソッドを使って、時間以外の情報を0に設定しています。
そして、isBetweenメソッドを使って、nowがstartとendの間にあるかどうかを判定しています。
isBetweenメソッドの第4引数に'[)’を指定することで、startは含むがendは含まないという範囲を表現しています。
このように、Moment.jsを使えば、営業時間内かどうかの判定を簡潔に書けます。
実際のWebアプリケーションでは、ユーザーの現在時刻と、サーバー側で管理している営業時間を比較することで、適切な処理を分岐できるようになります。
○サンプルコード12：日付の範囲判定
営業時間の判定と似ていますが、もう少し長い期間、例えば日付の範囲判定をしたい場合もあるでしょう。
例えば、ある割引キャンペーンが6月1日から6月30日まで実施されているとします。
この場合、現在日付がその期間内かどうかを判定したいですよね。
次のコードは、date-fnsを使って日付の範囲判定を行います。
const { isWithinInterval, parseISO } = require('date-fns');
function isWithinCampaignPeriod(now, start, end) {
const interval = { start: parseISO(start), end: parseISO(end) };
return isWithinInterval(now, interval);
}
const now = parseISO('2023-06-15');
console.log(isWithinCampaignPeriod(now, '2023-06-01', '2023-06-30')); // true
const outOfPeriod = parseISO('2023-07-01');
console.log(isWithinCampaignPeriod(outOfPeriod, '2023-06-01', '2023-06-30')); // false実行結果
true
falseこのコードでは、isWithinCampaignPeriod関数が日付の範囲内かどうかを判定します。
第1引数のnowは現在日付、第2引数のstartは期間の開始日、第3引数のendは期間の終了日です。
関数内では、まずparseISO関数を使って、開始日と終了日のDateオブジェクトを作成し、それらをプロパティに持つintervalオブジェクトを作ります。
そして、isWithinInterval関数を使って、nowがintervalの範囲内にあるかどうかを判定しています。
このように、date-fnsを使えば、日付の範囲判定を簡潔に書けます。
実際のWebアプリケーションでは、ユーザーの現在日付と、サーバー側で管理しているキャンペーン期間を比較することで、適切なコンテンツを表示できるようになります。
○サンプルコード13：祝日判定
次に、祝日判定のコードを見ていきましょう。
日本の祝日は、「国民の祝日に関する法律」で定められています。
この法律に基づいて、特定の日付が祝日かどうかを判定したい場面があるかもしれません。
次のコードは、Luxonを使って祝日判定を行います。
const { DateTime } = require('luxon');
const holidays = [
{ month: 1, day: 1 }, // 元日
{ month: 2, day: 11 }, // 建国記念の日
{ month: 4, day: 29 }, // 昭和の日
{ month: 5, day: 3 }, // 憲法記念日
{ month: 5, day: 4 }, // みどりの日
{ month: 5, day: 5 }, // こどもの日
{ month: 11, day: 3 }, // 文化の日
{ month: 11, day: 23 }, // 勤労感謝の日
];
function isHoliday(date) {
return holidays.some(holiday =>
date.month === holiday.month && date.day === holiday.day
);
}
const date1 = DateTime.local(2023, 5, 3);
console.log(isHoliday(date1)); // true
const date2 = DateTime.local(2023, 6, 1);
console.log(isHoliday(date2)); // false実行結果
true
falseこのコードでは、まずholidaysという配列で、祝日の月と日を定義しています。
そして、isHoliday関数が、引数のdateがholidaysに含まれるかどうかを判定します。
関数内では、someメソッドを使って、holidaysの要素を一つずつチェックしています。
someメソッドは、配列の要素が一つでも条件を満たせばtrueを返します。
このように、Luxonを使えば、日付の祝日判定を簡潔に書けます。
実際のWebアプリケーションでは、ユーザーの選択した日付や、システムの現在日付が祝日かどうかを判定することで、適切なメッセージを表示できるようになります。
○サンプルコード14：カレンダー機能の実装
最後に、カレンダー機能の実装を見ていきましょう。
カレンダーは、日付を視覚的に表現するための重要なUIコンポーネントです。
ここでは、Luxonを使って、シンプルなカレンダーを実装してみましょう。
const { DateTime } = require('luxon');
function generateCalendar(year, month) {
const start = DateTime.local(year, month, 1);
const end = start.endOf('month');
let current = start;
let calendar = '';
while (current <= end) {
if (current.weekday === 1) { // 月曜日
calendar += '\n'; // 改行
}
calendar += current.day.toString().padStart(2) + ' ';
current = current.plus({ days: 1 });
}
return calendar;
}
console.log(generateCalendar(2023, 6));実行結果：
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30このコードでは、generateCalendar関数が指定された年と月のカレンダーを文字列で生成します。
関数内では、まずstartとendのDateTimeオブジェクトを作成し、それぞれ月の開始日と終了日を表します。
そして、whileループを使って、startからendまでの日付を一日ずつ進めながら、calendarという文字列に日付を追加していきます。
このとき、current.weekdayが1（月曜日）のときは改行を入れることで、週ごとに区切りを作っています。
また、padStartメソッドを使って、日付を2桁の文字列に変換しています。
まとめ
JavaScriptでの日時比較は、Date型の基本から応用まで、幅広い知識が求められます。
本記事では、Date型の使い方、Unix時間への変換、Moment.js、date-fns、Luxonといったライブラリの使い方、よくあるエラーの対処法、そして実践的な応用例まで、詳しく解説してきました。
ここで学んだ知識を活かすことで、より信頼性の高いコードを書けるようになるでしょう。
日時処理は、Webアプリケーション開発に欠かせない重要なスキルです。
今後も、JavaScriptの学習を深め、さらなる成長を目指して頑張ってください。
