この記事では、JavaScriptでの日付比較の基本概念と実務でよく使うテクニックを、実例コードとともに分かりやすく解説します。さらに、実際にAmazonや楽天で販売されている製品(例:スマートウォッチ、カレンダー機能付きガジェット等)を題材にして、日付比較を使った実用的な実装例を紹介します。コードはそのままコピーして使える形式で示すので、開発現場や学習にすぐ役立ちます。
1. 日付比較の基礎知識
JavaScriptで日付を扱う中心は組み込みのDateオブジェクトです。Dateオブジェクト同士は大小比較演算子(<, >, <=, >=)や数値比較(getTime())で比較できます。getTime()は1970/01/01 00:00:00 UTCからの経過ミリ秒を返すため、日時の差や大小判定に適しています。これらの基本的な取り扱いは、実務上の多くの場面で最も確実に動作します。
重要な注意点として、Dateには時刻情報が含まれているため、**「同じ日付」かどうかを判定したい場合**は時刻部分の調整が必要です。たとえば、片方が00:00:00、もう片方が12:34:56だと「同じ日」に見えても厳密比較では異なります。対処法としては以下の方法が有効です。
- 両方のDateを00:00:00にリセットして比較する
- 年・月・日だけを取り出して文字列や数値で比較する
- toDateString()やtoLocaleDateString()で文字列化して比較する
これらの方法は用途によって使い分けます。例えば「期間内かどうかチェック」や「期日を過ぎているか判定」などです。
2. よく使う比較パターンとサンプルコード
2-1. 単純な日時の大小比較(タイムスタンプ)
getTime() を使った基本例。ミリ秒として比較するので正確です。
// 例:日時比較(タイムスタンプ)
const d1 = new Date('2025-05-16T10:00:00');
const d2 = new Date('2025-05-17T09:00:00');
if (d1.getTime() > d2.getTime()) {
console.log('d1はd2より後の日時です');
} else if (d1.getTime() < d2.getTime()) {
console.log('d1はd2より前の日時です');
} else {
console.log('同じ日時です');
}
2-2. 「日付のみ」を比較する(時刻を無視)
日付だけを比較したい場合、時刻を00:00:00に揃えるか、年/月/日を取り出して比較します。
// 日付のみを比較する関数(時刻を00:00:00にリセット)
function toDateOnly(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
}
const a = new Date('2025-05-16T23:59:59');
const b = new Date('2025-05-16T00:00:00');
if (toDateOnly(a).getTime() === toDateOnly(b).getTime()) {
console.log('同じ日付です');
}
2-3. ある期間内かどうかを判定する
予約やセール期間などでよく使うパターンです。
// 期間内判定(開始日時
2-4. 日数の差を計算する
2つの日付の差を日数で取得するには、ミリ秒差を86400000(= 1000*60*60*24)で割ります。
// 日数差(絶対値)
function daysBetween(d1, d2) {
const msPerDay = 1000 * 60 * 60 * 24;
const a = toDateOnly(d1).getTime();
const b = toDateOnly(d2).getTime();
return Math.abs(Math.round((a - b) / msPerDay));
}
console.log(daysBetween(new Date('2025-05-20'), new Date('2025-05-16'))); // 4
3. 実践的な注意点とベストプラクティス
- タイムゾーンに注意:ブラウザやサーバーのタイムゾーン設定によってDateの解釈が変わるため、UTCを基準にするか、明示的なタイムゾーン付きフォーマット(ISO 8601)を扱うと安全です。
- 入力データの正規化:ユーザー入力(日付文字列)を受け取る場合は、不正な日付(Invalid Date)チェックを必ず行ってください。
- 月は0始まり:new Date(year, monthIndex, day) の monthIndex は0から始まる点に注意してください(例:5は6月)。
- 日付だけを扱う専用の関数を作る:日付操作に関するユーティリティを自前でまとめておくとバグが減ります。
- ライブラリの選択:複雑なカレンダー計算(夏時間対応、ロケールごとの週番号等)が必要なら外部ライブラリを検討しますが、単純な大小比較や差分計算は組み込みで十分です。
4. 製品を題材にしたユースケースとコード例
以下では、Amazonや楽天で販売されている一般的な製品を想定して、日付比較を使った実装例を紹介します。扱う製品は購買や保証、セール通知など日付関連の処理が発生しやすいものに絞っています。各商品の見出し(h3)は指定どおり id="productaffi" を付与しています。
スマートウォッチ(カレンダー/アラーム機能付き)
スマートウォッチは予定管理やアラームが主な機能であり、内部で日付比較が頻繁に行われます。以下は、端末の予定一覧から「今日の予定のみ」を抽出するサンプルです。
// サンプル:予定配列から今日の予定を抽出する
const events = [
{ id: 1, title: '朝の散歩', date: '2025-05-16T07:00:00' },
{ id: 2, title: '会議', date: '2025-05-16T13:00:00' },
{ id: 3, title: '友人と食事', date: '2025-05-17T19:00:00' }
];
function getEventsForDate(events, targetDate) {
const t = toDateOnly(new Date(targetDate)).getTime();
return events.filter(e => toDateOnly(new Date(e.date)).getTime() === t);
}
console.log(getEventsForDate(events, new Date())); // 今日の予定だけが返る
この方法は時刻を無視して「日付」でグルーピングする場合に役立ちます。スマートウォッチの通知や日付表示ロジックにそのまま応用できます。
デジタルフォトフレーム(スケジュール表示機能)
デジタルフォトフレームでイベント日に特別なスライドを表示したい場合、日付比較で当日のイベントを判定します。以下は「イベントが今日なら特別表示」を行う例です。
// サンプル:フォトフレームで当日のイベント判定
function shouldShowSpecialSlide(eventDate) {
const today = toDateOnly(new Date()).getTime();
return toDateOnly(new Date(eventDate)).getTime() === today;
}
if (shouldShowSpecialSlide('2025-05-16T00:00:00')) {
// 特別スライドを表示する処理
}
カレンダー付き手帳型ケース(デジタル連携アプリ)
物理商品に紐づくアプリで「購入から○日後に通知」や「保証期間の残日数表示」を行う場合、購入日と現在日を比較する実装が必要です。以下は購入日からの経過日数を表示する例です。
// 購入日からの経過日数
function daysSincePurchase(purchaseDate) {
return daysBetween(new Date(), new Date(purchaseDate));
}
console.log(daysSincePurchase('2025-05-10')); // 購入からの経過日数を返す
この値をユーザー向けのUIで「購入からX日経過しました」と表示することができます。
ギフト(配達予定日管理)
EC商品では配達予定日や受け取り期限など、期限管理が重要です。以下は配達予定日が今日かどうかをチェックしてプッシュ通知を出す簡単なロジック例です。
// 配達予定日チェック
function isDeliveryToday(deliveryDate) {
return toDateOnly(new Date(deliveryDate)).getTime() === toDateOnly(new Date()).getTime();
}
if (isDeliveryToday('2025-05-16T10:00:00')) {
// プッシュ通知を送る処理
}
このように日付比較は販売・物流・通知周りの処理で特に重要になります。
5. 実装例:Webフォームで日付範囲チェック(商品購入フォームの例)
商品購入時に「予約開始日と終了日」が妥当か検証するフロントエンドの例です。
// 予約フォームのバリデーション例
function validateReservation(startStr, endStr) {
const start = new Date(startStr);
const end = new Date(endStr);
if (isNaN(start)) throw new Error('開始日が不正です');
if (isNaN(end)) throw new Error('終了日が不正です');
if (start.getTime() > end.getTime()) {
return { valid: false, message: '開始日は終了日より前にしてください' };
}
// 例:最短期間は1日、最長期間は30日
const days = daysBetween(start, end);
if (days < 1) return { valid: false, message: '期間は少なくとも1日必要です' };
if (days > 30) return { valid: false, message: '期間は30日以内にしてください' };
return { valid: true };
}
// 使用例
try {
const result = validateReservation('2025-06-01', '2025-06-10');
if (!result.valid) console.warn(result.message);
} catch (e) {
console.error(e.message);
}
このサンプルでは入力の正当性チェック、範囲チェック、エラーハンドリングを含めており、ECサイトの予約商品やレンタル商品のフロント実装にそのまま使えます。
6. よくあるトラブルと対処法
- Invalid Dateが出る:ユーザー入力をそのままnew Date()に渡すと環境依存でInvalid Dateになることがあります。入力フォーマットを統一(例:YYYY-MM-DDやISO 8601)してから解析してください。
- 同じ日なのに異なる判定になる:時刻差が原因です。toDateOnly関数やgetFullYear/getMonth/getDateで日付のみを比較してください。
- 夏時間(DST)の影響:日付差の計算に時間帯依存のズレが入る場合があります。日数単位での差分は、先に時刻を00:00に揃えてから計算することで影響を軽減できます。
- 月は0始まりのミス:new Date(2025, 5, 1) は6月1日です。UIの入力/表示と内部表現を混同しないよう注意してください。
7. より便利にする拡張アイデア
- ユーティリティの作成:toDateOnly、daysBetween、isWithinRangeなどをプロジェクト共通ライブラリとして切り出す。
- ロケール対応の表示:ユーザー向け表示は toLocaleDateString や Intl.DateTimeFormat を用いてわかりやすく整形する。
- 入力補助:日付選択UI(date picker)を使ってフォーマットのばらつきを減らす。
- サーバー側検証:フロントでのチェックだけでなく、サーバー側でも必ず日付検証を行う(信頼性の確保)。
8. 参考となる実装パターンまとめ(コードスニペット集)
次に示すユーティリティ群は、日付比較で頻繁に使う基本関数です。プロジェクトにコピーしてカスタマイズしてください。
// 汎用ユーティリティ(まとめ)
function toDateOnly(date) {
const d = new Date(date);
return new Date(d.getFullYear(), d.getMonth(), d.getDate());
}
function isSameDate(d1, d2) {
return toDateOnly(d1).getTime() === toDateOnly(d2).getTime();
}
function isBefore(d1, d2) {
return toDateOnly(d1).getTime() < toDateOnly(d2).getTime();
}
function isAfter(d1, d2) {
return toDateOnly(d1).getTime() > toDateOnly(d2).getTime();
}
function daysBetween(d1, d2) {
const msPerDay = 1000 * 60 * 60 * 24;
const a = toDateOnly(d1).getTime();
const b = toDateOnly(d2).getTime();
return Math.abs(Math.round((a - b) / msPerDay));
}
function isWithinRange(date, start, end) {
const t = toDateOnly(date).getTime();
return toDateOnly(start).getTime() <= t && t <= toDateOnly(end).getTime();
}
9. 開発者向けチェックリスト
- 入力フォーマットは統一されているか(例:ISO 8601)
- タイムゾーンに起因するバグが発生しうる箇所を洗い出したか
- 日付のみ比較する箇所では時刻を除外しているか
- 夏時間や閏秒の影響を想定したテストを行っているか
- フロント・サーバー両方で日付検証をしているか
10. よくある質問(FAQ)
Q. Dateオブジェクトは直接===で比較できますか?
A. Dateオブジェクト同士を===や==で比較すると参照の比較になり、同じ日時でもfalseになります。日時の値で比較する場合はgetTime()を使うか、年/月/日/時/分/秒を比較してください。
Q. ユーザー入力が "2025/5/16" のような形式のときどうする?
A. 環境によって解釈が異なるため、可能なら"2025-05-16"(ISO風)に変換するか、入力を分割して new Date(year, month-1, day) で生成するのが安全です。
Q. 日付差が小数になることがありますか?
A. ミリ秒差を日数に変換すると小数が発生することがありますが、**日数を整数で扱う場合はtoDateOnlyで時刻を切り捨てた上で丸める**(Math.roundやMath.floor)と意図した結果が得られます。
まとめ
JavaScriptでの日付比較は、組み込みのDateオブジェクトとgetTime()を中心に考えるのが基本です。用途に応じて「日付のみ比較」や「期間チェック」「日数計算」などの処理を使い分け、タイムゾーンや入力フォーマットの違いに注意すれば、ECサイトの販売管理や商品連携アプリ、スマートデバイスの通知など多くの場面で正確に日付処理ができます。実務ではユーティリティ関数を共通化し、フロントとサーバーの両方で日付検証を行うことが信頼性向上のポイントです。
実務で使えるJavaScriptの日付比較とコード集をまとめました
この記事では、日付比較の基礎、よく使うパターン、製品を題材にしたユースケース、実務での注意点と便利なユーティリティを紹介しました。紹介したコードはそのままプロジェクトに取り込みやすい形にしてありますので、日付処理の共通ライブラリとして活用してください。



