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のリリースノートの要約を行った。翻訳したパートにおいて足りていない部分などがあったら、是非ともコメント等を残していただけると助かる所存である。