【JS応用】n 日前の日付はなんでしょう？

概要

Web開発において、特定の日付から数日前の日付を計算する必要性は非常に高いです。例えば、過去のデータを集計する際、ユーザーの登録日からの経過日数を確認する際、あるいは特定イベントの締め切り日を算出する際など、様々な場面で日付計算は不可欠となります。JavaScriptでは、`Date`オブジェクトを用いて日付の取得や操作を行うことができますが、「n日前の日付」を正確に計算するには、いくつかの注意点があります。

本記事では、JavaScriptの`Date`オブジェクトを活用し、「n日前の日付」を正確かつ効率的に計算する方法を、詳細な解説と具体的なサンプルコードを交えて解説します。さらに、実務で遭遇しがちな注意点や、より堅牢な日付計算を行うためのアドバイスも提供します。

詳細解説

JavaScriptで日付を扱う際には、`Date`オブジェクトが中心となります。`Date`オブジェクトは、1970年1月1日午前0時（UTC）からの経過ミリ秒数を保持しており、これを利用して日付の加算・減算を行います。

「n日前の日付」を計算する基本的な考え方は、現在の日付から指定した日数分だけ減算することです。`Date`オブジェクトには、日付（日）を設定するための`setDate()`メソッドがあります。このメソッドは、現在の日付から指定した日数を加算または減算した日付を設定します。

具体的には、以下の手順で「n日前の日付」を計算できます。

1. **現在の日付を取得する:** `new Date()` を使用して、現在の日付と時刻を持つ`Date`オブジェクトを作成します。
2. **n日前の日付を計算する:** 取得した`Date`オブジェクトの`setDate()`メソッドを使用します。このメソッドに `date.getDate() – n` を渡すことで、現在の日付からn日前の日付を設定できます。`setDate()`メソッドは、自動的に月や年の繰り下がり（または繰り上がり）を処理してくれるため、非常に便利です。
3. **計算結果を取得する:** `setDate()`メソッドで更新された`Date`オブジェクトから、必要な日付情報を取得します。例えば、`getFullYear()`、`getMonth()`、`getDate()`などを利用して、年、月、日を個別に取得できます。`getMonth()`は0から始まる（0が1月、11が12月）ことに注意が必要です。

ここで重要なのは、`setDate()`メソッドの挙動です。例えば、現在が3月15日で、5日前の日付を計算したい場合、`date.setDate(date.getDate() – 5)` を実行すると、`date.getDate()`は15なので、`15 – 5 = 10` となり、3月10日の日付が正しく設定されます。

しかし、もし現在が3月5日で、7日前の日付を計算したい場合はどうなるでしょうか？ `date.getDate() – 7` は `5 – 7 = -2` となります。`setDate()`メソッドは、このような負の値や、月の最大日数を超える値を適切に解釈し、自動的に前の月や年へと繰り下げてくれます。この例では、-2という値は、2月（または前年の12月）の最後の日から2日前を意味し、自動的に2月27日（または28日）といった正しい日付を計算してくれます。

この自動的な繰り下がり機能により、複雑な条件分岐（月末の判定やうるう年の考慮など）を自分で実装する必要がなく、非常に簡潔に日付計算を行うことができます。

また、日付のフォーマットについても考慮が必要です。計算された`Date`オブジェクトは、そのままでは人間が読みにくい形式です。一般的には、「YYYY-MM-DD」や「YYYY年MM月DD日」といった形式に整形して表示することが多いです。この整形には、`getFullYear()`、`getMonth()`、`getDate()`で取得した数値を、必要に応じてゼロ埋め（例: 1月を「01」にする）しながら文字列結合する方法が一般的です。

例えば、`getMonth()`は0から始まるため、`date.getMonth() + 1` として、実際の月（1〜12）に変換する必要があります。また、月や日が1桁の場合に先頭に「0」を付ける（ゼロ埋め）ことで、統一されたフォーマットになります。これは、`String.prototype.padStart()`メソッドを使うと簡単に実現できます。

例えば、`String(date.getMonth() + 1).padStart(2, ‘0’)` は、月を2桁の文字列にし、足りない場合は先頭に’0’を付けます。

サンプルコード

以下に、「n日前の日付」を計算し、指定したフォーマットで表示するJavaScriptのサンプルコードを示します。

/**
* 指定した日付からn日前の日付を計算し、指定されたフォーマットで返します。
*
* @param {number} n – 減算する日数。
* @param {string} [format=’YYYY-MM-DD’] – 出力フォーマット。YYYY, MM, DDが置換されます。
* @returns {string} 計算されたn日前の日付文字列。
*/
function getNdaysAgoDate(n, format = ‘YYYY-MM-DD’) {
// 現在の日付を取得
const today = new Date();

// n日前の日付を計算
// setDate()は月や年の繰り下がりを自動的に処理します。
const targetDate = new Date(today); // 元のtodayオブジェクトを変更しないためにコピーを作成
targetDate.setDate(today.getDate() – n);

// 年、月、日を取得
const year = targetDate.getFullYear();
// getMonth()は0から始まるため、+1して実際の月（1〜12）にします。
const month = String(targetDate.getMonth() + 1).padStart(2, ‘0’);
const day = String(targetDate.getDate()).padStart(2, ‘0’);

// フォーマットに従って文字列を生成
let formattedDate = format.replace(‘YYYY’, year);
formattedDate = formattedDate.replace(‘MM’, month);
formattedDate = formattedDate.replace(‘DD’, day);

return formattedDate;
}

// 使用例：
const today = new Date();
console.log(`今日の日付: ${today.toLocaleDateString(‘ja-JP’)}`); // 例: 2023/10/27

// 7日前の日付を取得し、デフォルトフォーマット（YYYY-MM-DD）で表示
const sevenDaysAgo = getNdaysAgoDate(7);
console.log(`7日前の日付 (YYYY-MM-DD): ${sevenDaysAgo}`); // 例: 2023-10-20

// 30日前の日付を取得し、日本語フォーマット（YYYY年MM月DD日）で表示
const thirtyDaysAgo = getNdaysAgoDate(30, ‘YYYY年MM月DD日’);
console.log(`30日前の日付 (YYYY年MM月DD日): ${thirtyDaysAgo}`); // 例: 2023年09月27日

// 月をまたぐ計算の例：3月5日から7日前の計算
// (この関数は現在の日付を基準にするため、直接的なテストは難しいですが、
// setDate()の挙動により、例えば今日が3月5日なら7日前は2月26日（うるう年でない場合）になります)
// 実際には、今日の日付が3月5日だと仮定して、7日前を計算する例を別途示す方が分かりやすいかもしれません。

// 別途、特定の日付からの計算例
function getNdaysAgoFromSpecificDate(specificDate, n, format = ‘YYYY-MM-DD’) {
const date = new Date(specificDate); // 特定の日付から開始
date.setDate(date.getDate() – n);

const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, ‘0’);
const day = String(date.getDate()).padStart(2, ‘0’);

let formattedDate = format.replace(‘YYYY’, year);
formattedDate = formattedDate.replace(‘MM’, month);
formattedDate = formattedDate.replace(‘DD’, day);

return formattedDate;
}

console.log(`2023-03-05 から 7日前の日付: ${getNdaysAgoFromSpecificDate(‘2023-03-05’, 7)}`); // 例: 2023-02-26
console.log(`2024-03-05 から 7日前の日付 (うるう年): ${getNdaysAgoFromSpecificDate(‘2024-03-05’, 7)}`); // 例: 2024-02-27
console.log(`2023-01-01 から 1日前の日付: ${getNdaysAgoFromSpecificDate(‘2023-01-01’, 1)}`); // 例: 2022-12-31

このコードでは、`getNdaysAgoDate` 関数は、引数 `n` で指定された日数だけ現在の日付から減算し、指定されたフォーマットで日付文字列を返します。`format` 引数で「YYYY-MM-DD」や「YYYY年MM月DD日」などのカスタムフォーマットを指定できるようにしています。

また、`setDate()` メソッドの挙動を示すために、特定の日付からの計算を行う `getNdaysAgoFromSpecificDate` 関数も追加しました。これにより、月や年をまたぐ計算、うるう年の考慮などが `setDate()` によって自動的に行われることを確認できます。

実務アドバイス

1. **タイムゾーンへの配慮:** `new Date()` は実行環境のローカルタイムゾーンに基づいた日付を生成します。もし、サーバーサイドで計算を行ったり、異なるタイムゾーンのユーザーを対象とする場合は、UTC（協定世界時）を基準にした計算を行うことを検討してください。`Date.prototype.getUTCDate()` や `Date.prototype.setUTCDate()` を使用することで、UTCでの日付操作が可能です。
2. **ライブラリの活用:** 日付計算は、考慮すべきエッジケース（うるう年、月の日数、タイムゾーンなど）が多く、複雑になりがちです。特に、頻繁に日付計算を行う場合や、より高度な日付操作（期間の計算、曜日の取得、タイムゾーン変換など）が必要な場合は、`date-fns` や `Moment.js`（ただし、Moment.jsはメンテナンスモードに入っているため、新規プロジェクトでの利用は推奨されません。代替として`Day.js`などが挙げられます）といった日付操作ライブラリの利用を強く推奨します。これらのライブラリは、これらの複雑な問題を抽象化し、より安全で直感的なAPIを提供してくれます。
3. **日付の比較:** 日付を比較する際は、`Date`オブジェクトを直接比較するのではなく、`getTime()`メソッドでミリ秒単位の数値に変換してから比較するか、あるいは文字列フォーマットを統一してから比較するようにしましょう。`date1 > date2` のような比較は、`Date`オブジェクトの内部表現に依存するため、意図しない結果を招く可能性があります。
4. **入力値のバリデーション:** ユーザーからの入力（例えば、検索期間の開始日・終了日など）を元に日付計算を行う場合、入力値が有効な日付形式であるかどうかのバリデーションを必ず行いましょう。無効な日付が渡された場合、予期しないエラーや誤った計算結果につながる可能性があります。
5. **パフォーマンス:** 大量のデータを処理する際に、繰り返し日付計算を行う場合は、パフォーマンスに注意が必要です。`new Date()` の生成や `setDate()` の呼び出しは、それなりにコストがかかります。可能であれば、計算結果をキャッシュしたり、一度だけ計算して使い回すなどの工夫を検討しましょう。

まとめ

JavaScriptの`Date`オブジェクトの`setDate()`メソッドを利用することで、「n日前の日付」を比較的容易に計算することができます。このメソッドは、月や年の繰り下がりを自動的に処理してくれるため、複雑なロジックを記述する必要がありません。

しかし、実務においては、タイムゾーン、日付フォーマット、そしてより高度な日付操作の必要性から、日付操作ライブラリの活用が推奨されます。`date-fns` や `Day.js` のようなライブラリは、開発効率とコードの堅牢性を向上させる強力なツールとなります。

本記事で解説した基本的な計算方法と、実務アドバイスを参考に、皆さんの開発プロジェクトで正確かつ効率的な日付計算を実現してください。