JavaScript日付の比較方法 - 初心者向け実装パターン3選

JavaScript日付比較の基本的な方法から実践的なパターンまで詳しく解説。getTime()、比較演算子、日付ライブラリを使った3つの実装方法を初心者向けに分かりやすく説明します。

Learning Next 運営
49 分で読めます

JavaScript日付の比較方法 - 初心者向け実装パターン3選

JavaScriptで日付を比較したいと思ったことはありませんか?

「今日よりも前の日付かチェックしたい」 「期限切れを判定したい」 「日付の範囲を確認したい」

そんな疑問を抱えている方も多いと思います。 でも大丈夫です!

JavaScript の日付比較は、適切な方法を知らないと予期しない結果になることがあります。 この記事では、3つの実践的なパターンを使って、確実に日付を比較する方法を初心者向けに詳しく解説します。

getTime()メソッド、比較演算子、日付ライブラリを使った方法を、実際のコード例を交えて分かりやすく説明していきますね。 きっと「なるほど!」と納得できる内容になっていますよ。

日付比較の基本概念を理解しよう

なぜ日付比較が難しいの?

まずは、なぜ日付比較が難しいのかを理解しましょう。

// 直接比較の問題点
let date1 = new Date("2024-01-15");
let date2 = new Date("2024-01-15");
console.log(date1 == date2); // false(予期しない結果)
console.log(date1 === date2); // false(予期しない結果)
// なぜfalseになるのか
console.log(date1); // Mon Jan 15 2024 09:00:00 GMT+0900
console.log(date2); // Mon Jan 15 2024 09:00:00 GMT+0900
console.log(typeof date1); // "object"
console.log(typeof date2); // "object"
// オブジェクトは参照で比較される
console.log("異なるオブジェクト:", date1 !== date2); // true

同じ日付なのにfalseになってしまいます。 これは、日付オブジェクトが「参照」で比較されるからなんです。

簡単に言うと、「箱の中身」ではなく「箱そのもの」を比較しているイメージです。 だから、同じ日付でも違う箱だと「違うもの」と判定されちゃうんですね。

Dateオブジェクトの内部構造

Dateオブジェクトの内部的な仕組みを見てみましょう。

// Dateオブジェクトの内部的な表現
let now = new Date();
console.log("Dateオブジェクト:", now);
console.log("文字列表現:", now.toString());
console.log("ISO文字列:", now.toISOString());
console.log("数値表現(ミリ秒):", now.getTime());
console.log("値のタイプ:", typeof now.getTime());
// 同じ日時の異なるオブジェクト
let time1 = new Date(2024, 0, 15, 10, 30, 0); // 2024年1月15日 10:30:00
let time2 = new Date(2024, 0, 15, 10, 30, 0);
console.log("time1:", time1.getTime()); // 1705289400000
console.log("time2:", time2.getTime()); // 1705289400000
console.log("数値は同じ:", time1.getTime() === time2.getTime()); // true

getTime()で数値に変換すると、同じ値になります。 これが日付比較の鍵になる重要なポイントです。

実は、Dateオブジェクトは内部的に「1970年1月1日からのミリ秒」で時刻を管理しています。 この数値を使って比較すれば、確実に日付を比較できるんです。

パターン1: getTime()メソッドを使用する方法

最も確実で推奨される方法は、getTime()メソッドを使って日付を数値に変換してから比較することです。

基本的な比較の仕方

まずは基本的な比較方法を見てみましょう。

// getTime()を使った確実な比較
function compareDates(date1, date2) {
let time1 = date1.getTime();
let time2 = date2.getTime();
if (time1 > time2) {
return 1; // date1の方が新しい
} else if (time1 < time2) {
return -1; // date2の方が新しい
} else {
return 0; // 同じ日時
}
}
// 使用例
let birthday = new Date("1990-05-15");
let today = new Date();
let futureDate = new Date("2025-12-31");
console.log("誕生日 vs 今日:", compareDates(birthday, today)); // -1
console.log("今日 vs 未来:", compareDates(today, futureDate)); // -1
console.log("同じ日付:", compareDates(today, new Date(today.getTime()))); // 0

getTime()で数値に変換してから比較することで、確実に結果を得られます。 戻り値は、1(新しい)、-1(古い)、0(同じ)で分かりやすいですね。

より実用的な関数も作ってみましょう。

// より実用的な関数
function isDateBefore(date1, date2) {
return date1.getTime() < date2.getTime();
}
function isDateAfter(date1, date2) {
return date1.getTime() > date2.getTime();
}
function isSameDate(date1, date2) {
return date1.getTime() === date2.getTime();
}
// 実用例
let deadline = new Date("2024-03-31");
let submissionDate = new Date("2024-03-25");
if (isDateBefore(submissionDate, deadline)) {
console.log("期限内に提出されました");
} else {
console.log("期限を過ぎています");
}

関数名が分かりやすいので、コードの意図が伝わりやすくなります。

日付範囲の判定機能

日付の範囲をチェックする機能も作ってみましょう。

// 日付範囲チェック機能
class DateRange {
constructor(startDate, endDate) {
this.startDate = new Date(startDate);
this.endDate = new Date(endDate);
// 開始日が終了日より後の場合は入れ替え
if (this.startDate.getTime() > this.endDate.getTime()) {
[this.startDate, this.endDate] = [this.endDate, this.startDate];
}
}
// 指定日が範囲内かチェック
contains(date) {
let checkDate = new Date(date);
let checkTime = checkDate.getTime();
return checkTime >= this.startDate.getTime() &&
checkTime <= this.endDate.getTime();
}
// 範囲の重複をチェック
overlaps(otherRange) {
return this.startDate.getTime() <= otherRange.endDate.getTime() &&
this.endDate.getTime() >= otherRange.startDate.getTime();
}
// 範囲の長さ(日数)を取得
getDuration() {
let diffInMs = this.endDate.getTime() - this.startDate.getTime();
return Math.ceil(diffInMs / (1000 * 60 * 60 * 24));
}
// 範囲情報を取得
getInfo() {
return {
start: this.startDate.toISOString().split('T')[0],
end: this.endDate.toISOString().split('T')[0],
duration: this.getDuration()
};
}
}

このクラスを使えば、日付範囲の様々な操作ができます。 コンストラクタで自動的に日付の順序を調整してくれるのも便利ですね。

使用例を見てみましょう。

// 使用例
let vacationPeriod = new DateRange("2024-07-01", "2024-07-15");
let businessTrip = new DateRange("2024-07-10", "2024-07-20");
console.log("休暇期間:", vacationPeriod.getInfo());
console.log("出張期間:", businessTrip.getInfo());
// 特定の日が休暇期間に含まれるかチェック
let checkDate = new Date("2024-07-08");
console.log("7/8は休暇期間中:", vacationPeriod.contains(checkDate));
// 休暇と出張の重複チェック
console.log("期間が重複:", vacationPeriod.overlaps(businessTrip));

休暇と出張の期間が重複するかどうかも簡単にチェックできます。

日付のソート機能

配列に入った日付をソートする機能も作ってみましょう。

// 日付の配列をソート
function sortDatesAscending(dates) {
return dates.sort((a, b) => a.getTime() - b.getTime());
}
function sortDatesDescending(dates) {
return dates.sort((a, b) => b.getTime() - a.getTime());
}
// 使用例
let importantDates = [
new Date("2024-12-25"), // クリスマス
new Date("2024-01-01"), // 元日
new Date("2024-07-04"), // 独立記念日
new Date("2024-10-31"), // ハロウィン
new Date("2024-04-01") // エイプリルフール
];
console.log("=== 昇順ソート ===");
sortDatesAscending(importantDates).forEach(date => {
console.log(date.toLocaleDateString('ja-JP'));
});
console.log("=== 降順ソート ===");
sortDatesDescending([...importantDates]).forEach(date => {
console.log(date.toLocaleDateString('ja-JP'));
});

sort()メソッドとgetTime()を組み合わせることで、簡単に日付順にソートできます。

イベント管理などでも活用できますね。

// オブジェクト配列の日付ソート
let events = [
{ name: "プロジェクト開始", date: new Date("2024-01-15") },
{ name: "中間レビュー", date: new Date("2024-03-15") },
{ name: "最終発表", date: new Date("2024-05-30") },
{ name: "リリース", date: new Date("2024-06-15") }
];
// 日付順でイベントをソート
events.sort((a, b) => a.date.getTime() - b.date.getTime());
console.log("=== イベントスケジュール ===");
events.forEach(event => {
console.log(`${event.name}: ${event.date.toLocaleDateString('ja-JP')}`);
});

オブジェクトの配列でも、日付プロパティを使って簡単にソートできます。

パターン2: 比較演算子を直接使用する方法

比較演算子(<, >, <=, >=)は、Dateオブジェクトに対しても使用できます。 内部的にgetTime()が呼ばれるので、便利な場面もあります。

基本的な比較演算子の使用

まずは基本的な使い方を見てみましょう。

// 比較演算子の直接使用
let date1 = new Date("2024-01-15");
let date2 = new Date("2024-03-20");
let date3 = new Date("2024-01-15");
// 大小比較は正常に動作
console.log(date1 < date2); // true
console.log(date1 > date2); // false
console.log(date1 <= date3); // true
console.log(date1 >= date3); // true
// ただし等価比較は注意が必要
console.log(date1 == date3); // false(オブジェクトの参照が異なる)
console.log(date1 === date3); // false(オブジェクトの参照が異なる)
// 等価比較にはgetTime()を使用
console.log(date1.getTime() === date3.getTime()); // true

大小比較(<, >, <=, >=)は問題なく使えます。 ただし、等価比較(==, ===)は期待通りに動かないので注意が必要です。

実用的な比較関数を作ろう

比較演算子を使った便利な関数群を作ってみましょう。

// 比較演算子を使った便利な関数群
const DateUtils = {
// 今日より前かチェック
isInPast(date) {
return date < new Date();
},
// 今日より後かチェック
isInFuture(date) {
return date > new Date();
},
// 今日かチェック
isToday(date) {
let today = new Date();
return this.isSameDay(date, today);
},
// 同じ日かチェック(時刻は無視)
isSameDay(date1, date2) {
return date1.getFullYear() === date2.getFullYear() &&
date1.getMonth() === date2.getMonth() &&
date1.getDate() === date2.getDate();
},
// 指定した日数以内かチェック
isWithinDays(date, days) {
let diffInMs = Math.abs(new Date() - date);
let diffInDays = diffInMs / (1000 * 60 * 60 * 24);
return diffInDays <= days;
},
// 期限が近いかチェック
isDeadlineNear(deadlineDate, warningDays = 7) {
let now = new Date();
let diffInMs = deadlineDate - now;
let diffInDays = diffInMs / (1000 * 60 * 60 * 24);
return diffInDays > 0 && diffInDays <= warningDays;
}
};

これらの関数を使えば、日付の判定が簡単になります。 特にisSameDay()は時刻を無視して日付だけを比較できるので便利ですね。

使用例を見てみましょう。

// 使用例
let events = [
{ name: "会議", date: new Date("2024-01-20") },
{ name: "プレゼン", date: new Date() },
{ name: "締切", date: new Date("2024-02-15") },
{ name: "旅行", date: new Date("2024-06-01") }
];
events.forEach(event => {
let status = "";
if (DateUtils.isToday(event.date)) {
status = "今日";
} else if (DateUtils.isInPast(event.date)) {
status = "過去";
} else if (DateUtils.isDeadlineNear(event.date)) {
status = "期限間近";
} else if (DateUtils.isInFuture(event.date)) {
status = "未来";
}
console.log(`${event.name} (${event.date.toLocaleDateString('ja-JP')}): ${status}`);
});

イベントの状態が一目で分かるようになります。

条件分岐での活用例

比較演算子を使った実用的な例をもう少し見てみましょう。

// 年齢計算と条件分岐
function calculateAge(birthDate) {
let today = new Date();
let birth = new Date(birthDate);
if (birth > today) {
throw new Error("誕生日が未来の日付です");
}
let age = today.getFullYear() - birth.getFullYear();
let monthDiff = today.getMonth() - birth.getMonth();
// まだ誕生日が来ていない場合は年齢を1引く
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
age--;
}
return age;
}
// 年齢に基づく分類
function categorizeByAge(birthDate) {
try {
let age = calculateAge(birthDate);
if (age < 0) {
return "無効な年齢";
} else if (age < 18) {
return "未成年";
} else if (age < 65) {
return "成人";
} else {
return "高齢者";
}
} catch (error) {
return "エラー: " + error.message;
}
}

年齢計算でも日付比較を活用できます。 未来の誕生日をエラーとして処理するのもポイントですね。

営業日の判定機能も作ってみましょう。

// 営業日判定
function isBusinessDay(date) {
let dayOfWeek = date.getDay(); // 0: 日曜, 1: 月曜, ..., 6: 土曜
return dayOfWeek >= 1 && dayOfWeek <= 5; // 月曜〜金曜
}
// 次の営業日を取得
function getNextBusinessDay(date) {
let nextDay = new Date(date);
do {
nextDay.setDate(nextDay.getDate() + 1);
} while (!isBusinessDay(nextDay));
return nextDay;
}
// 営業日数を計算
function countBusinessDays(startDate, endDate) {
if (startDate >= endDate) {
return 0;
}
let count = 0;
let currentDate = new Date(startDate);
while (currentDate < endDate) {
if (isBusinessDay(currentDate)) {
count++;
}
currentDate.setDate(currentDate.getDate() + 1);
}
return count;
}
// 使用例
let projectStart = new Date("2024-01-15"); // 月曜日
let projectEnd = new Date("2024-01-26"); // 金曜日
console.log("プロジェクト開始:", projectStart.toLocaleDateString('ja-JP'));
console.log("プロジェクト終了:", projectEnd.toLocaleDateString('ja-JP'));
console.log("営業日数:", countBusinessDays(projectStart, projectEnd));
console.log("次の営業日:", getNextBusinessDay(new Date("2024-01-13")).toLocaleDateString('ja-JP')); // 土曜日の次

ビジネスロジックでよく使われる営業日計算も、日付比較の応用で実現できます。

パターン3: 日付ライブラリの活用

より高度な日付操作には、専用のライブラリやユーティリティクラスを使用することをおすすめします。

独自日付ユーティリティクラス

高機能な日付ユーティリティクラスを作ってみましょう。

// 高機能な日付ユーティリティクラス
class DateHelper {
constructor(date = new Date()) {
this.date = new Date(date);
}
// 基本的な比較メソッド
isBefore(otherDate) {
return this.date < new Date(otherDate);
}
isAfter(otherDate) {
return this.date > new Date(otherDate);
}
isSame(otherDate) {
return this.date.getTime() === new Date(otherDate).getTime();
}
// 日付の差を計算
diffInDays(otherDate) {
let other = new Date(otherDate);
let diffInMs = Math.abs(this.date - other);
return Math.floor(diffInMs / (1000 * 60 * 60 * 24));
}
diffInHours(otherDate) {
let other = new Date(otherDate);
let diffInMs = Math.abs(this.date - other);
return Math.floor(diffInMs / (1000 * 60 * 60));
}
diffInMinutes(otherDate) {
let other = new Date(otherDate);
let diffInMs = Math.abs(this.date - other);
return Math.floor(diffInMs / (1000 * 60));
}
// 日付の加算・減算
addDays(days) {
let newDate = new Date(this.date);
newDate.setDate(newDate.getDate() + days);
return new DateHelper(newDate);
}
addHours(hours) {
let newDate = new Date(this.date);
newDate.setHours(newDate.getHours() + hours);
return new DateHelper(newDate);
}
addMinutes(minutes) {
let newDate = new Date(this.date);
newDate.setMinutes(newDate.getMinutes() + minutes);
return new DateHelper(newDate);
}
// フォーマット
format(pattern = 'YYYY-MM-DD') {
let year = this.date.getFullYear();
let month = String(this.date.getMonth() + 1).padStart(2, '0');
let day = String(this.date.getDate()).padStart(2, '0');
let hours = String(this.date.getHours()).padStart(2, '0');
let minutes = String(this.date.getMinutes()).padStart(2, '0');
let seconds = String(this.date.getSeconds()).padStart(2, '0');
return pattern
.replace('YYYY', year)
.replace('MM', month)
.replace('DD', day)
.replace('HH', hours)
.replace('mm', minutes)
.replace('ss', seconds);
}
// 相対的な表示
fromNow() {
let now = new Date();
let diffInMs = now - this.date;
let diffInMinutes = Math.floor(diffInMs / (1000 * 60));
if (diffInMinutes < 1) {
return "たった今";
} else if (diffInMinutes < 60) {
return `${diffInMinutes}分前`;
} else if (diffInMinutes < 1440) { // 24時間
let hours = Math.floor(diffInMinutes / 60);
return `${hours}時間前`;
} else {
let days = Math.floor(diffInMinutes / 1440);
if (days < 7) {
return `${days}日前`;
} else if (days < 30) {
let weeks = Math.floor(days / 7);
return `${weeks}週間前`;
} else if (days < 365) {
let months = Math.floor(days / 30);
return `${months}ヶ月前`;
} else {
let years = Math.floor(days / 365);
return `${years}年前`;
}
}
}
}

このクラスを使えば、日付操作がとても簡単になります。 メソッドチェーンで連続して操作することもできます。

使用例を見てみましょう。

// 使用例
let now = new DateHelper();
let birthday = new DateHelper("1990-05-15");
let meeting = new DateHelper("2024-02-14 15:30:00");
console.log("現在時刻:", now.format("YYYY-MM-DD HH:mm:ss"));
console.log("誕生日:", birthday.format("YYYY年MM月DD日"));
console.log("会議:", meeting.format("MM/DD HH:mm"));
console.log("誕生日からの日数:", now.diffInDays(birthday));
console.log("会議まで:", meeting.fromNow());
// 7日後の日付を取得
let nextWeek = now.addDays(7);
console.log("来週の今日:", nextWeek.format());

fromNow()メソッドで「〇分前」「〇時間前」のような相対的な表示もできます。 SNSやブログでよく見る表示ですね。

ビジネスロジック向けの日付計算

実際のビジネスで使える日付計算クラスも作ってみましょう。

// ビジネスロジック向けの日付計算
class BusinessDateCalculator {
constructor() {
// 祝日リスト(簡易版)
this.holidays = [
"2024-01-01", // 元日
"2024-01-08", // 成人の日
"2024-02-11", // 建国記念の日
"2024-02-23", // 天皇誕生日
"2024-03-20", // 春分の日
"2024-04-29", // 昭和の日
"2024-05-03", // 憲法記念日
"2024-05-04", // みどりの日
"2024-05-05", // こどもの日
"2024-07-15", // 海の日
"2024-08-11", // 山の日
"2024-09-16", // 敬老の日
"2024-09-22", // 秋分の日
"2024-10-14", // スポーツの日
"2024-11-03", // 文化の日
"2024-11-23", // 勤労感謝の日
].map(date => new Date(date).getTime());
}
// 祝日かどうかチェック
isHoliday(date) {
let checkDate = new Date(date);
let dateOnly = new Date(checkDate.getFullYear(), checkDate.getMonth(), checkDate.getDate());
return this.holidays.includes(dateOnly.getTime());
}
// 営業日かどうかチェック
isBusinessDay(date) {
let dayOfWeek = date.getDay();
return dayOfWeek >= 1 && dayOfWeek <= 5 && !this.isHoliday(date);
}
// 営業日数を計算
calculateBusinessDays(startDate, endDate) {
let start = new Date(startDate);
let end = new Date(endDate);
let count = 0;
let current = new Date(start);
while (current <= end) {
if (this.isBusinessDay(current)) {
count++;
}
current.setDate(current.getDate() + 1);
}
return count;
}
// 営業日を追加
addBusinessDays(startDate, businessDays) {
let current = new Date(startDate);
let addedDays = 0;
while (addedDays < businessDays) {
current.setDate(current.getDate() + 1);
if (this.isBusinessDay(current)) {
addedDays++;
}
}
return new Date(current);
}
// 支払期日を計算(月末締め翌月末払い)
calculatePaymentDate(invoiceDate) {
let invoice = new Date(invoiceDate);
let paymentMonth = invoice.getMonth() + 1;
let paymentYear = invoice.getFullYear();
// 12月の場合は翌年1月
if (paymentMonth > 11) {
paymentMonth = 0;
paymentYear++;
}
// 月末営業日を取得
let lastDay = new Date(paymentYear, paymentMonth + 1, 0);
while (!this.isBusinessDay(lastDay)) {
lastDay.setDate(lastDay.getDate() - 1);
}
return lastDay;
}
}

このクラスを使えば、実際のビジネスで必要な日付計算ができます。 祝日も考慮した営業日計算なので、実用性が高いですね。

使用例を見てみましょう。

// 使用例
let businessCalc = new BusinessDateCalculator();
// プロジェクトの期間計算
let projectStart = new Date("2024-01-15");
let projectEnd = new Date("2024-02-29");
console.log("プロジェクト期間の営業日数:",
businessCalc.calculateBusinessDays(projectStart, projectEnd));
// 納期計算(5営業日後)
let orderDate = new Date("2024-01-20");
let deliveryDate = businessCalc.addBusinessDays(orderDate, 5);
console.log("注文日:", orderDate.toLocaleDateString('ja-JP'));
console.log("納期:", deliveryDate.toLocaleDateString('ja-JP'));
// 支払期日計算
let invoiceDate = new Date("2024-01-15");
let paymentDue = businessCalc.calculatePaymentDate(invoiceDate);
console.log("請求日:", invoiceDate.toLocaleDateString('ja-JP'));
console.log("支払期日:", paymentDue.toLocaleDateString('ja-JP'));

「5営業日後」「翌月末払い」といった実際のビジネスでよく使われる計算ができます。

実践的な使用例で理解を深めよう

イベント管理システム

実用的なイベント管理システムを作ってみましょう。

// イベント管理クラス
class EventManager {
constructor() {
this.events = [];
}
// イベントを追加
addEvent(name, startDate, endDate = null) {
let event = {
id: Date.now(),
name: name,
startDate: new Date(startDate),
endDate: endDate ? new Date(endDate) : null,
createdAt: new Date()
};
this.events.push(event);
return event.id;
}
// 特定期間のイベントを取得
getEventsInPeriod(startDate, endDate) {
let start = new Date(startDate);
let end = new Date(endDate);
return this.events.filter(event => {
// イベントが期間と重複するかチェック
let eventStart = event.startDate;
let eventEnd = event.endDate || event.startDate;
return eventStart <= end && eventEnd >= start;
});
}
// 今日のイベントを取得
getTodaysEvents() {
let today = new Date();
let todayStart = new Date(today.getFullYear(), today.getMonth(), today.getDate());
let todayEnd = new Date(todayStart.getTime() + 24 * 60 * 60 * 1000 - 1);
return this.getEventsInPeriod(todayStart, todayEnd);
}
// 期限が迫っているイベントを取得
getUpcomingEvents(days = 7) {
let now = new Date();
let deadline = new Date(now.getTime() + days * 24 * 60 * 60 * 1000);
return this.events.filter(event => {
return event.startDate > now && event.startDate <= deadline;
}).sort((a, b) => a.startDate.getTime() - b.startDate.getTime());
}
}

このイベント管理システムは、期間の重複チェックや今日のイベント取得などができます。 日付比較をフル活用した実用的な例ですね。

締切管理システム

もう一つ、締切管理システムも作ってみましょう。

// 締切管理システム
class DeadlineManager {
constructor() {
this.deadlines = [];
this.warningPeriods = {
urgent: 1, // 1日以内
warning: 7, // 7日以内
notice: 30 // 30日以内
};
}
// 締切を追加
addDeadline(title, dueDate, priority = 'normal') {
let deadline = {
id: Date.now(),
title: title,
dueDate: new Date(dueDate),
priority: priority,
completed: false,
createdAt: new Date()
};
this.deadlines.push(deadline);
return deadline.id;
}
// 締切の状態を取得
getDeadlineStatus(deadline) {
if (deadline.completed) {
return 'completed';
}
let now = new Date();
let dueDate = deadline.dueDate;
let diffInMs = dueDate.getTime() - now.getTime();
let diffInDays = diffInMs / (1000 * 60 * 60 * 24);
if (diffInDays < 0) {
return 'overdue';
} else if (diffInDays <= this.warningPeriods.urgent) {
return 'urgent';
} else if (diffInDays <= this.warningPeriods.warning) {
return 'warning';
} else if (diffInDays <= this.warningPeriods.notice) {
return 'notice';
} else {
return 'normal';
}
}
// 状態別に締切を分類
categorizeDeadlines() {
let categories = {
overdue: [],
urgent: [],
warning: [],
notice: [],
normal: [],
completed: []
};
this.deadlines.forEach(deadline => {
let status = this.getDeadlineStatus(deadline);
categories[status].push(deadline);
});
// 各カテゴリ内で日付順にソート
Object.keys(categories).forEach(key => {
categories[key].sort((a, b) => a.dueDate.getTime() - b.dueDate.getTime());
});
return categories;
}
// ダッシュボード情報を生成
getDashboard() {
let categories = this.categorizeDeadlines();
return {
summary: {
total: this.deadlines.length,
overdue: categories.overdue.length,
urgent: categories.urgent.length,
warning: categories.warning.length,
completed: categories.completed.length
},
categories: categories
};
}
}

締切管理システムでは、期限までの日数によって自動的に緊急度を分類します。 ダッシュボード機能で一覧表示もできるので、とても実用的ですね。

よくある間違いとその対策

オブジェクト比較の間違い

最も多い間違いから確認しましょう。

// 間違った比較方法
function wrongDateComparison() {
let date1 = new Date("2024-01-15");
let date2 = new Date("2024-01-15");
// これらはすべてfalseになる(オブジェクトの参照が異なる)
console.log("== 比較:", date1 == date2); // false
console.log("=== 比較:", date1 === date2); // false
// 文字列比較も問題がある
console.log("文字列比較:", date1.toString() === date2.toString()); // false(タイムゾーンで異なる場合がある)
}
// 正しい比較方法
function correctDateComparison() {
let date1 = new Date("2024-01-15");
let date2 = new Date("2024-01-15");
// getTime()を使用
console.log("getTime()比較:", date1.getTime() === date2.getTime()); // true
// valueOf()を使用(getTime()と同じ)
console.log("valueOf()比較:", date1.valueOf() === date2.valueOf()); // true
// 数値変換を使用
console.log("数値変換比較:", +date1 === +date2); // true
}

同じ日付でも=====では正しく比較できません。 必ずgetTime()を使って数値で比較するようにしましょう。

タイムゾーンの問題

タイムゾーンによる問題も注意が必要です。

// タイムゾーンの問題と対策
function handleTimezoneIssues() {
// 文字列から日付を作成する際の注意点
// 問題のある例:ブラウザのタイムゾーンに依存
let date1 = new Date("2024-01-15"); // ローカルタイムゾーン
let date2 = new Date("2024-01-15T00:00:00"); // ローカルタイムゾーン
let date3 = new Date("2024-01-15T00:00:00Z"); // UTC
console.log("date1:", date1.toISOString());
console.log("date2:", date2.toISOString());
console.log("date3:", date3.toISOString());
// 安全な日付作成方法
function createSafeDate(year, month, day, hour = 0, minute = 0, second = 0) {
// 月は0ベース(1月=0, 2月=1, ...)
return new Date(year, month - 1, day, hour, minute, second);
}
let safeDate = createSafeDate(2024, 1, 15);
console.log("安全な日付:", safeDate.toISOString());
}
// 日付の正規化関数
function normalizeDateForComparison(date) {
// 時刻を00:00:00にリセット
let normalized = new Date(date);
normalized.setHours(0, 0, 0, 0);
return normalized;
}

文字列から日付を作成するときは、タイムゾーンに注意しましょう。 日付だけを比較したい場合は、正規化関数を使うと安全です。

まとめ:日付比較をマスターしよう

JavaScript日付比較の3つの主要なパターンについて詳しく解説しました。

パターン1: getTime()メソッド

  • 最も確実で推奨される方法
  • 数値比較で正確な結果が得られる
  • 等価比較にも対応
  • すべてのブラウザで安全に使用可能

パターン2: 比較演算子

  • シンプルで直感的な記述
  • 大小比較(<, >, <=, >=)は問題なく使用可能
  • 等価比較(==, ===)は使用不可
  • 条件分岐で活躍

パターン3: 日付ライブラリ

  • 高機能で豊富な操作が可能
  • 可読性の高いAPIを提供
  • カスタマイズしやすい
  • 複雑な日付処理に最適

実践でのポイント

  • 正確性を重視するならgetTime()による数値比較
  • パフォーマンスを考慮してキャッシュや最適化を活用
  • 関数化とモジュール化で保守性を向上
  • タイムゾーンやエラーハンドリングを適切に処理

よくある間違いの対策

  • オブジェクト比較の誤解を避ける
  • タイムゾーンを適切に処理する
  • パフォーマンスを考慮した実装にする
  • 充実したエラーハンドリングを行う

適切な日付比較方法を選択し活用することで、より信頼性が高く効率的なJavaScriptアプリケーションが作れるようになります。

まずは基本的なgetTime()を使った比較から始めて、徐々に高度なテクニックも取り入れてみてください。 ぜひ今日から、これらの知識を活用してより良い日付処理機能を実装してみてくださいね。

関連記事