date-fns v3から何か変わるのかが気になるので、date-fns v4のリリースノートの要約を書いておく。個人的にいちいち翻訳をするのが面倒だから、というのが動機だ。

https://blog.date-fns.org/v40-with-time-zone-support/

タイムゾーンのサポート

　date-fns v3までは、タイムゾーンを考慮するには、サードパーティ製のdate-fns-tz(https://www.npmjs.com/package/date-fns-tz)を使う必要があったが、今回のリリースによってその必要が無くなり、外部パッケージの@date-fns/tzを用いることが可能になった。リリースノートから引用したコードを閲覧すると、

import { TZDate } from "@date-fns/tz";
import { addHours } from "date-fns";

// Given that the system time zone is America/Los_Angeles
// where DST happens on Sunday, 13 March 2022, 02:00:00

// Using the system time zone will produce 03:00 instead of 02:00 because of DST:
const date = new Date(2022, 2, 13);
addHours(date, 2).toString();
//=> 'Sun Mar 13 2022 03:00:00 GMT-0700 (Pacific Daylight Time)'

// Using Asia/Singapore will provide the expected 02:00:
const tzDate = new TZDate(2022, 2, 13, "Asia/Singapore");
addHours(tzDate, 2).toString();
//=> 'Sun Mar 13 2022 02:00:00 GMT+0800 (Singapore Standard Time)'

　(タイムゾーンがサポートされただけではなく、サマータイムも考慮されている。)
　
　その他のことをまとめると、以下のようになっている。

全ての関数において、引数と結果の両方を最初のオブジェクト引数(Date、Date拡張インスタンス)に正規化する(→さまざまな種類のタイムゾーンが混在できる)
タイムゾーンが影響する可能性のある全ての関数において、使用するタイムゾーンを明示的に指名できるオプション in がある(以下、公式リリースノートより引用)

import { tz } from "@date-fns/tz";

// Will calculate in Asia/Singapore
differenceInBusinessDays(laterDate, earlierDate);
//=> 262

// Will normalize to America/Los_Angeles
differenceInBusinessDays(laterDate, earlierDate, {
 in: tz("America/Los_Angeles"),
});
//=> 261

バンドルのフットプリント

タイムゾーンは@date-fns/tzによってほとんど処理される
TZDate、UTCDateともに他社と比べてサイズが小さい

破壊的変更

　まとめると、以下のようになっている。要するに、極端な破壊的変更はない。

Dual ESM/CommonJSパッケージである(CommonJSサポートの廃止はしていない)
ESMファーストの書き方となっており、package.jsonに"type": "module"があり、.mjsではなく.cjsがある
いくつかの型(主に関数ジェネリック)を変更。一応通常の使用に影響はない(エッジケースあり)

　v5.0以降の展望 は公式のリリースノートにはあるが、date-fns v4とは直接関係がないので、今回は翻訳・要約をしなかった。

　今回の記事ではdate-fns v4のリリースノートの要約を行った。翻訳したパートにおいて足りていない部分などがあったら、是非ともコメント等を残していただけると助かる所存である。