TypeScriptでのdate型の使い方を解説！10選の実践的なサンプルコード

はじめに
●TypeScriptのdate型とは
- ○date型の基本
  - □日付の生成
  - □日付の取得
●date型の詳しい使い方
●date型の応用例
●注意点と対処法
- ○日付操作の際の時差問題
- ○date型の不変性
●カスタマイズ方法
- ○外部ライブラリを使用した日付操作
  - □日付の加算
  - □日付の比較
まとめ

はじめに

日付操作は、多くのソフトウェア開発の中心的な部分を担っています。

ウェブサービスやモバイルアプリ、データベースを扱う際、日付や時刻の取得・操作は避けて通れない課題となるでしょう。

TypeScriptという言語もこの課題に対応しており、日付を扱う際の「date型」を提供しています。

この記事では、TypeScriptのdate型を中心として、その基本的な概念や利用方法について詳しく解説していきます。

初心者の方でも理解しやすいよう、具体的な内容と結びつけて説明いたします。

●TypeScriptのdate型とは

TypeScriptのdate型は、JavaScriptのDateオブジェクトを基盤としています。

JavaScriptで日付を扱う際の手法と多くの共通点がありますが、TypeScriptは型を持つ言語であるため、date型を使用する時に型の安全性も考慮されています。

○date型の基本

日付操作を行う際の基本は、date型の特性とその利用方法を理解することです。

それでは、date型の基本的な特徴から見ていきましょう。

□日付の生成

TypeScriptにおける日付の生成は、JavaScriptと同様、Dateオブジェクトのインスタンス化によって行われます。

このとき、新しく生成されるDateオブジェクトは現在の日付と時刻を持ちます。

また、特定の日付を持つDateオブジェクトを生成することも可能です。

これには、年、月、日などの情報を引数として指定することで実現できます。

□日付の取得

Dateオブジェクトから、年や月、日などの情報を取得することもできます。

具体的には、getFullYear、getMonth、getDateなどのメソッドを利用することで、それぞれ年、月、日の情報を取得することが可能です。

また、時間や分、秒に関する情報も同様のメソッドを使用して取得することができます。

●date型の詳しい使い方

日付と時刻の操作はプログラムにおいて頻繁に行われる作業の一つです。特に、TypeScriptを利用してのアプリケーション開発においても、日付の取得や変換、加算・減算など、様々な操作が求められることがあります。

ここでは、TypeScriptのdate型を使用して、これらの日付操作を実行する方法をサンプルコードと共に詳しく解説していきます。

○サンプルコード1：現在の日付・時刻を取得する

まず初めに、一番基本的な日付操作として、現在の日付や時刻を取得する方法を見ていきましょう。

// 現在の日付・時刻を取得
const now = new Date();

// 年を取得
const year = now.getFullYear();

// 月を取得 (注意：月は0から始まるので、実際の月より1小さい値が返されます)
const month = now.getMonth() + 1;

// 日を取得
const date = now.getDate();

// 時を取得
const hour = now.getHours();

// 分を取得
const minute = now.getMinutes();

// 秒を取得
const second = now.getSeconds();

console.log(`現在の日時は${year}年${month}月${date}日 ${hour}時${minute}分${second}秒です。`);

このコードでは、まずnew Date()を使って現在の日付と時刻を取得しています。

その後、getFullYearやgetMonth、getDateなどのメソッドを用いて、それぞれ年や月、日などの詳細な情報を取得しています。

最後に、取得した情報をテンプレートリテラルを用いて表示しています。

このコードを実行すると、現在の日時が「現在の日時は〇〇年〇〇月〇〇日〇〇時〇〇分〇〇秒です。」という形式で出力されます。

○サンプルコード2：特定の日付を生成する

TypeScriptでの日付操作に関して、特定の日付を生成する方法を詳しく紹介します。

これは、あるイベントの日付や、特定の期間を示す日付など、具体的な日付を扱う際に非常に役立ちます。

// 2023年9月1日の日付を生成するサンプルコード
const specificDate = new Date(2023, 8, 1);
console.log(specificDate);

このコードでは、Dateコンストラクタを使って、2023年9月1日の日付を生成しています。

Dateコンストラクタの引数には、年、月（0始まりのため、8は9月を表します）、日を順に指定します。

このコードを実行すると、2023年9月1日の日付が正確に生成されるとともに、その日付がコンソール上に表示されます。

ただし、この方法で日付を生成する際の注意点があります。

TypeScriptのDateコンストラクタは、月を0始まり（0が1月、11が12月）で考えるため、9月を指定したい場合は、8として指定する必要があります。

この点を意識しないと、意図した月とは異なる日付が生成される可能性があります。

また、特定の日付のみを指定したい場合、時間や分、秒は自動的に現在の時間、分、秒が適用されます。

時間や分、秒も特定の値を設定したい場合は、それらの値もDateコンストラクタの引数として指定する必要があります。

2023年9月1日の午前10時30分という日付を生成する例を紹介します。

// 2023年9月1日午前10時30分の日付を生成するサンプルコード
const specificDateTime = new Date(2023, 8, 1, 10, 30);
console.log(specificDateTime);

このコードを実行すると、指定した日時が正確に生成され、その日時がコンソール上に表示される結果となります。

このように、TypeScriptのDateコンストラクタは、柔軟に日付や日時を生成するための機能を提供しています。

○サンプルコード3：日付の加算・減算を行う

TypeScriptにおいて、日付の加算・減算はdate型を利用して容易に実現できます。

この操作はプログラムの中で頻繁に行われるため、正確かつ効率的に操作する方法を学ぶことは非常に重要です。

では、まずはサンプルコードを見ていきましょう。

// 日付の加算・減算を行うサンプルコード
const now = new Date();  // 現在の日付と時刻を取得
console.log("元の日付:", now);

// 3日後の日付を計算
const threeDaysLater = new Date(now);
threeDaysLater.setDate(now.getDate() + 3);
console.log("3日後の日付:", threeDaysLater);

// 5日前の日付を計算
const fiveDaysAgo = new Date(now);
fiveDaysAgo.setDate(now.getDate() - 5);
console.log("5日前の日付:", fiveDaysAgo);

このコードでは、まず現在の日付と時刻を取得しています。

次に、取得した日付を元に3日後と5日前の日付を計算しています。

具体的には、setDateメソッドを使用して、日付を加算・減算しています。

このメソッドの引数には、新しい日の日付を渡します。

ここでは、現在の日付の日部分を取得するgetDateメソッドを使用し、その値に3を加算したり、5を減算したりしています。

このコードを実行すると、次のような結果が出力されます。

元の日付: (現在の日付と時刻)
3日後の日付: (現在の日付から3日後の日付)
5日前の日付: (現在の日付から5日前の日付)

○サンプルコード4：2つの日付の差を求める

TypeScriptでの日付操作は多岐にわたりますが、日常的なシステム開発や業務処理では、2つの日付の間の日数を計算することがよく求められます。

例えば、日付の範囲を選択するUIを持つアプリケーションや、予約システム、経過日数を計算するタスク管理ツールなどでこの機能が使われます。

ここでは、2つの日付の差を日数で計算する方法をサンプルコードを交えて解説します。

// 2つの日付を生成
let startDate: Date = new Date(2023, 7, 1); // 2023年8月1日（月は0から始まるので7は8月を表す）
let endDate: Date = new Date(2023, 7, 15); // 2023年8月15日

// 2つの日付の差（ミリ秒）を計算
let diffMilliseconds: number = endDate.getTime() - startDate.getTime();

// ミリ秒を日数に変換
let diffDays: number = diffMilliseconds / (1000 * 60 * 60 * 24);

console.log(diffDays);

このコードでは、まずnew Date()を使って2つの日付を生成しています。

次に、getTime()メソッドを使用して、それぞれの日付を1970年1月1日からのミリ秒として取得します。

これにより、2つの日付の差をミリ秒単位で計算することができます。

ミリ秒単位の差を日数に変換するには、1日のミリ秒数（24時間×60分×60秒×1000ミリ秒）で割ります。

このコードを実行すると、結果として2つの日付の差「14」が出力されます。

○サンプルコード5：日付の書式を変更する

TypeScriptで日付を取り扱う場面では、特定の書式で表示させたいケースがしばしばあります。

例えば、”YYYY-MM-DD”や”YYYY年MM月DD日”のように日付を整形して出力することが求められることが多いです。

しかし、TypeScriptのdate型には、このような日付の書式を直接変更するメソッドは提供されていません。

そのため、自前で書式を変更する関数を用意するか、外部のライブラリを利用する必要があります。

ここでは、まず自前で日付の書式を変更する簡単な関数を作成し、その後、外部ライブラリを使用して日付を書式変更する方法も紹介します。

下記のサンプルコードは、date型の日付を”YYYY-MM-DD”の書式で出力する関数を表しています。

function formatDate(date: Date): string {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');  // 月は0から始まるため+1する
    const day = date.getDate().toString().padStart(2, '0');

    return `${year}-${month}-${day}`;
}

const today = new Date();
console.log(formatDate(today));

このコードでは、getFullYearメソッドで年を取得し、getMonthメソッドで月を取得しています。

ただし、getMonthメソッドは0から始まるので、1を足して実際の月を取得します。

getDateメソッドは日を取得します。

そして、これらの結果をテンプレートリテラルを用いて組み合わせ、”YYYY-MM-DD”の書式で文字列として返しています。

このコードを実行すると、今日の日付を”YYYY-MM-DD”の形式でコンソールに出力します。

例えば、2023年9月1日の場合、”2023-09-01″という文字列が出力される結果になります。

また、外部ライブラリを使用する方法も多くの開発者には馴染みが深いです。

例として、date-fnsというライブラリがあります。

このライブラリは、日付の操作や書式変更を簡単に行える便利なメソッドを多数提供しています。

以下のサンプルコードは、date-fnsライブラリを使用して日付の書式を変更する例を表しています。

// まず、date-fnsライブラリをインストールします
// npm install date-fns

import { format } from 'date-fns';

const today = new Date();
const formattedDate = format(today, 'yyyy-MM-dd');
console.log(formattedDate);

このコードでは、date-fnsからformat関数をインポートしています。

この関数を使用すると、第二引数に指定した書式に従って、第一引数の日付を変換できます。

このコードを実行すると、同様に今日の日付を”YYYY-MM-DD”の形式でコンソールに出力します。

同じ2023年9月1日の場合、”2023-09-01″という文字列が得られる結果となります。

●date型の応用例

TypeScriptでの日付操作の基本を把握したところで、date型のさまざまな応用例について解説します。

今回は「特定の曜日の日付を取得する」という実践的なタスクに取り組みながら、その実装方法を詳しく見ていきましょう。

○サンプルコード6：特定の曜日の日付を取得する

日常の業務でよく求められるニーズの1つが「今週の月曜日は何日か？」や「来週の金曜日は何日か？」といった質問に答えることです。

このような場面で役立つのがTypeScriptのdate型です。

指定した曜日の日付を取得するためのサンプルコードを紹介します。

// 指定した曜日の日付を取得する関数
function getSpecificDayDate(targetDay: number, offsetWeek: number = 0): Date {
  const currentDate = new Date();
  const currentDay = currentDate.getDay();
  const difference = targetDay - currentDay + offsetWeek * 7;
  currentDate.setDate(currentDate.getDate() + difference);
  return currentDate;
}

// 使用例
const nextFriday = getSpecificDayDate(5, 1);
console.log(`来週の金曜日は${nextFriday.getFullYear()}年${nextFriday.getMonth() + 1}月${nextFriday.getDate()}日です。`);

このコードでは、getSpecificDayDate関数を使って特定の曜日の日付を取得しています。

関数の第一引数には0（日曜日）から6（土曜日）までの数字を指定し、第二引数には何週間後の曜日の日付を取得するかのオフセットを指定します。

例として、来週の金曜日の日付を取得する場合は、第一引数に5（金曜日）、第二引数に1（1週間後）を指定します。

上記のコードを実行すると、来週の金曜日の日付が表示される結果となります。

例えば、今日が2023年9月1日の場合、結果として「来週の金曜日は2023年9月8日です。」という出力が得られます。

○サンプルコード7：日付を比較する

TypeScriptを利用した日付操作の中で、日付の比較は頻繁に行われる作業の一つです。特に、特定の期間やイベントの開始日・終了日などの判断基準として使用されます。

今回は、TypeScriptのdate型を利用して、2つの日付を比較する方法について詳しく解説していきます。

日付の比較は、基本的には2つのDateオブジェクトのミリ秒の値を直接比較することで実現します。

DateオブジェクトのgetTime()メソッドを使うことで、特定の日付・時刻をミリ秒の数値として取得できます。

2つの日付を比較する基本的なサンプルコードを紹介します。

const date1 = new Date('2023-01-01');
const date2 = new Date('2023-01-02');

// date1とdate2を比較
if (date1.getTime() === date2.getTime()) {
    console.log('date1とdate2は同じ日付です。');
} else if (date1.getTime() < date2.getTime()) {
    console.log('date1はdate2より前の日付です。');
} else {
    console.log('date1はdate2より後の日付です。');
}

このコードでは、Dateコンストラクタを使って、2つの異なる日付date1とdate2を生成しています。

その後、getTime()メソッドを利用してミリ秒の数値を取得し、それを基に比較を行っています。

このコードを実行すると、次の結果が出力されます。

date1はdate2より前の日付です。

また、日付の比較をより高度に行いたい場合、外部ライブラリを利用することも考慮すると良いでしょう。

例えば、moment.jsなどのライブラリを使用することで、日付の比較をより簡単かつ柔軟に行うことが可能です。

moment.jsを使用して日付の比較を行うサンプルコードを紹介します。

// 必要に応じてmoment.jsをインストール
// npm install moment

import moment from 'moment';

const mDate1 = moment('2023-01-01');
const mDate2 = moment('2023-01-02');

if (mDate1.isSame(mDate2)) {
    console.log('mDate1とmDate2は同じ日付です。');
} else if (mDate1.isBefore(mDate2)) {
    console.log('mDate1はmDate2より前の日付です。');
} else {
    console.log('mDate1はmDate2より後の日付です。');
}

このコードを実行すると、同様の結果が出力され、mDate1はmDate2より前の日付ですと表示されます。

○サンプルコード8：日付の範囲内での操作

TypeScriptのdate型は、日付や時刻を表すのに非常に便利な型です。

ここでは、特定の日付の範囲内での操作方法をサンプルコードを交えて詳細に解説します。

具体的には、与えられた2つの日付の間にある日付を一覧する方法や、指定した範囲内での特定の曜日の日付を抽出する方法などを取り上げます。

□2つの日付の間の日付をリストアップする

このコードでは、2つの日付の間にある全ての日付を配列として取得しています。

startDateとendDateという2つの日付を定義し、その間の日付をwhile文を使って取得します。

const getDatesBetween = (startDate: Date, endDate: Date): Date[] => {
    const dates: Date[] = [];
    let currentDate = new Date(startDate);
    while (currentDate <= endDate) {
        dates.push(new Date(currentDate));
        currentDate.setDate(currentDate.getDate() + 1);
    }
    return dates;
}

const startDate = new Date(2023, 8, 1); // 2023年9月1日
const endDate = new Date(2023, 8, 5);   // 2023年9月5日
const datesBetween = getDatesBetween(startDate, endDate);
console.log(datesBetween);

このコードを実行すると、2023年9月1日から2023年9月5日までの日付が配列として出力されます。

具体的には、[“2023-09-01”, “2023-09-02”, “2023-09-03”, “2023-09-04”, “2023-09-05”]という日付のリストを得られるでしょう。

□指定した範囲内の特定の曜日の日付を抽出する

このコードでは、指定した範囲内で特定の曜日の日付のみを抽出します。

例として、2023年9月1日から2023年9月30日までの間で、金曜日の日付のみを抽出する場面を考えます。

const getSpecificWeekdaysBetween = (startDate: Date, endDate: Date, weekday: number): Date[] => {
    const dates: Date[] = getDatesBetween(startDate, endDate);
    return dates.filter(date => date.getDay() === weekday);
}

const startDate2 = new Date(2023, 8, 1);  // 2023年9月1日
const endDate2 = new Date(2023, 8, 30);   // 2023年9月30日
const fridaysBetween = getSpecificWeekdaysBetween(startDate2, endDate2, 5); // 5は金曜日を表す
console.log(fridaysBetween);

このコードを実行すると、2023年9月1日から2023年9月30日までの間の金曜日の日付のみが配列として出力されます。

この月には複数の金曜日が含まれているため、そのすべての日付を得ることができるでしょう。

○サンプルコード9：日付と文字列の相互変換

TypeScriptでの日付操作には多岐にわたるテクニックや方法が存在しますが、特に日常的なプログラミング作業において重要となるのが、日付と文字列の相互変換です。

Webアプリケーションやデータベースとの連携など、様々な場面で文字列としての日付データと、JavaScriptおよびTypeScriptのdate型との変換が必要となります。

ここでは、日付を文字列に変換し、その逆も行う基本的な方法をサンプルコードと共に詳細に解説していきます。

このコードでは、Dateオブジェクトを使用して現在の日付を取得し、その日付をISO形式の文字列に変換しています。

const currentDate: Date = new Date();
const dateString: string = currentDate.toISOString();
console.log(dateString);

このコードを実行すると、例えば”2023-09-01T12:34:56.789Z”のような形式で現在の日付と時刻が表示されます。

ISO形式は一般的に利用される日付の文字列フォーマットで、多くのシステムやサービスで対応しているため、この形式での変換は非常に有用です。

次に、文字列形式の日付データをDateオブジェクトに変換する方法を見てみましょう。

const sampleDateString: string = "2023-09-01T12:34:56.789Z";
const convertedDate: Date = new Date(sampleDateString);
console.log(convertedDate);

このコードでは、事前に定義したISO形式の日付文字列をDateオブジェクトに変換しています。

このコードを実行すると、文字列で定義された日付と時刻がDateオブジェクトとして取得され、それが表示されます。

これらの相互変換は、日付データを外部システムやAPIとの間でやり取りする際など、頻繁に使用されます。

特に、文字列としての日付データは非常に扱いやすく、フォーマットも多岐にわたるため、適切な方法で変換を行うことが重要です。

また、日常的なアプリケーションの中では、ISO形式以外の日付フォーマットも頻繁に使用されます。

例えば、”YYYY年MM月DD日”のような形式や、”YYYY/MM/DD HH:mm:ss”のような形式などが考えられます。

カスタムフォーマットでの日付文字列の取得を行うサンプルコードを紹介します。

const dateForCustomFormat: Date = new Date();
const year: string = dateForCustomFormat.getFullYear().toString();
const month: string = (dateForCustomFormat.getMonth() + 1).toString().padStart(2, '0');
const day: string = dateForCustomFormat.getDate().toString().padStart(2, '0');
const customDateString: string = `${year}年${month}月${day}日`;
console.log(customDateString);

このコードを実行すると、例えば”2023年09月01日”のような形式で日付が表示されます。

この方法を利用することで、さまざまなフォーマットの日付文字列を取得することができます。

○サンプルコード10：タイムゾーンによる日付の変換

TypeScriptにおけるdate型の操作の中で、特に重要かつ注意が必要なのがタイムゾーンによる日付の変換です。

多くのWebアプリケーションやシステムは、国や地域をまたいで使用されるため、タイムゾーンに応じた日付の表示や計算が求められることが多いです。

ここでは、TypeScriptでタイムゾーンを意識した日付の変換方法について解説していきます。

まず、JavaScriptおよびTypeScriptのDateオブジェクトは、基本的にブラウザのローカルタイムゾーンに依存します。

しかし、特定のタイムゾーンに合わせて日付を取得、または変換するためには外部ライブラリを利用することが一般的です。

今回は、このようなタイムゾーンの操作を容易にするためのライブラリとして「luxon」を使用します。

まず、luxonを使うためには、プロジェクトにインストールする必要があります。

// luxonのインストール
npm install luxon

luxonをインストールしたら、次のようにしてTypeScriptで利用できます。

import { DateTime, IANAZone } from 'luxon';

// タイムゾーンを考慮して現在の日付と時刻を取得する
const nowInTokyo = DateTime.now().setZone("Asia/Tokyo");
console.log(nowInTokyo.toString());

const nowInNewYork = DateTime.now().setZone("America/New_York");
console.log(nowInNewYork.toString());

このコードでは、まずluxonからDateTimeとIANAZoneをインポートしています。

次に、DateTime.now().setZone("タイムゾーン")を使用して、指定したタイムゾーンの現在の日付と時刻を取得しています。

このコードを実行すると、Asia/Tokyoのタイムゾーンでの現在の日付と時刻、およびAmerica/New_Yorkのタイムゾーンでの現在の日付と時刻がそれぞれ表示されます。

さらに、特定の日付を指定のタイムゾーンに変換する場合も簡単です。

const date = DateTime.local(2023, 5, 10, 12, 0); // 2023年5月10日12時を表す
const dateInTokyo = date.setZone("Asia/Tokyo");
console.log(dateInTokyo.toString());

上記のコードは、2023年5月10日12時をAsia/Tokyoのタイムゾーンに変換して表示しています。

●注意点と対処法

TypeScriptでdate型を扱う際には、多くの注意点が存在します。

それでは、その主要な問題点とそれを適切に対処する方法を詳細に解説します。

○日付操作の際の時差問題

TypeScriptのdate型は、JavaScriptのDateオブジェクトを基盤としています。

そのため、日付操作を行う際には、時差に関する問題が発生することがあります。

例として、ユーザが海外の時間帯でアクセスしてきた場合、日本の時間とは異なる時間が表示されることが考えられます。

これは、Dateオブジェクトがブラウザのローカル時間を基に動作するためです。

この問題を解決するための一つの方法は、UTC（協定世界時）を基準とした時間を使用することです。

UTCを基準とした現在の日付・時刻を取得するサンプルコードを紹介します。

// 現在の日付・時刻をUTCで取得する
const now = new Date();
console.log(`UTCの年: ${now.getUTCFullYear()}`);
console.log(`UTCの月: ${now.getUTCMonth() + 1}`);
console.log(`UTCの日: ${now.getUTCDate()}`);
console.log(`UTCの時間: ${now.getUTCHours()}`);
console.log(`UTCの分: ${now.getUTCMinutes()}`);

このコードでは、getUTCFullYear(), getUTCMonth()などのUTCを取得するメソッドを使っています。

このコードを実行すると、協定世界時に基づいた日付と時刻が出力されます。

また、特定のタイムゾーンに合わせたい場合は、外部ライブラリなどを利用して変換する方法もあります。

○date型の不変性

TypeScriptのdate型は、内部的にはミリ秒単位のタイムスタンプとして保存されています。

このため、一度生成されたDateオブジェクトの値を直接変更することはできません。

しかし、新しいDateオブジェクトを生成することで、日付や時刻の変更が可能です。

例えば、現在の日付から7日後の日付を取得する場合、次のようなサンプルコードを使用できます。

// 現在の日付を取得
const today = new Date();

// 7日後の日付を計算
const sevenDaysLater = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);
console.log(sevenDaysLater);

このコードでは、getTime()メソッドを使って現在の日付のタイムスタンプを取得し、7日分のミリ秒を加算しています。

その後、新しいDateオブジェクトを生成して7日後の日付を表示します。

重要なのは、todayというDateオブジェクトの値自体は変わらないという点です。

新しい日付や時刻を取得する場合は、常に新しいDateオブジェクトを生成することが必要となります。

●カスタマイズ方法

TypeScriptでの日付操作は、基本的な操作だけでなく、多岐にわたるカスタマイズや応用も可能です。

特に、外部ライブラリを活用することで、より高度な日付操作や煩雑な処理をシンプルに、かつ効率的に実装することができます。

ここでは、外部ライブラリを使用した日付操作に焦点を当て、その実装方法やカスタマイズの手順を詳細に解説していきます。

○外部ライブラリを使用した日付操作

多くの開発者に支持されている日付操作のための外部ライブラリとして、moment.jsやdate-fnsが挙げられます。

今回は、date-fnsを例に、TypeScriptでの日付操作のカスタマイズ方法を学びます。

まずは、date-fnsのインストールから始めます。

下記のコマンドでインストールを行うことができます。

// npmを利用する場合
npm install date-fns

// yarnを利用する場合
yarn add date-fns

このコードでは、パッケージ管理ツールとしてnpmやyarnを使用して、date-fnsライブラリをプロジェクトに追加しています。

インストールが完了したら、次に具体的なカスタマイズ例を見てみましょう。

□日付の加算

date-fnsを使うことで、日付の加算も簡単に行えます。

import { addDays } from 'date-fns';

const today = new Date();
const fiveDaysLater = addDays(today, 5);

console.log(fiveDaysLater);

このコードでは、addDays関数を使って、現在の日付に5日を加算しています。

このコードを実行すると、5日後の日付が出力されます。

□日付の比較

日付同士の比較もdate-fnsを使用することで容易になります。

import { isBefore, isAfter } from 'date-fns';

const date1 = new Date(2023, 1, 10);  // 2023年2月10日
const date2 = new Date(2023, 1, 15);  // 2023年2月15日

console.log(isBefore(date1, date2));  // true
console.log(isAfter(date1, date2));   // false

このコードでは、isBeforeとisAfter関数を利用して、日付date1が日付date2より前か、後かを判断しています。

このコードを実行すると、isBefore関数はtrueを、isAfter関数はfalseを返すことになります。