【JS】date-fns-tzの素敵すぎるtoZonedTimeの使い方

こんにちは！海外に一度も行ったことのないMizutani(@sirycity)です。タイムゾーンを肌で感じたい...！

今日はそんなタイムゾーン(以下、tz)をJavaScriptで扱うライブラリ、date-fns-tzについてです。

はじめに

date-fns-tzとはJavaScriptの有名な時間操作系ライブラリ、date-fnsに関連するライブラリです。date-fnsにtz関連の機能を足すアドオン的な認識でいいと思います。とはいえ別に単体でも使えます。

2024年1月から現在(2024年4月)に至るまでdate-fns-tzはdate-fns本体の更新に追随できていないという問題を抱えています。今インストールするならbeta版にしましょう。

npm i date-fns-tz@beta

まあそのうち治るでしょう。

今回紹介するのがこのtoZonedTimeです。といってもこいつは最近名前変わったばっかで、前まではutcToZonedTimeだったりしました。

参考

簡単に言うとtzの調整です。

import { toZonedTime } from 'date-fns-tz'

// 実行したtzの現在時刻
const date = new Date()
// 東京の現在時刻
const dateTokyo = toZonedTime(date, 'Asia/Tokyo')

こんだけ。

この関数、例えば国内で普通にコーディングするぶんには不要なんですよ。だって実行してる場所が常に東京だから。~~僕は名古屋だけど~~

ただし問題はSSGでビルドしているCIのtzが東京じゃなかったり、SSRで実行している環境のリージョンが東京じゃなかったりする場合です。ってか前者は普通東京にはならないですね。この場合何が起こるかというと開発環境と本番環境で時間がずれることになります。恐ろしい...

んで、それを防ぐためのtoZonedTimeです。この関数、簡単に言えば実行環境を東京に固定するみたいな機能です。もっと分かりやすく言えば地球上から東京以外の全ての都市が消滅したみたいな状態にする機能です。

つまり使い所は全部です。とりあえず使っときましょう。new Date()するなら全部に使ってもいいくらいだと思います。

よく間違えられがちですが時間を9時間ずらす機能ではないです。あえて言うなら時間を調整する機能です。んでもこの説明は分かりにくいのでやはり全てを東京に固定する機能みたいな言い回しが勝つ。

これはdate-fns全部に言えるんですが操作対象はネイティブのDateオブジェクトのため、別のライブラリとも併用できます。具体的にはTempoとか。僕は最近Tempo+date-fns-tzにハマってます。なんかかっこよくない？全身ユニクロなのに靴だけOnみたいな(意味不明)

そんな感じでdate-fns-tzの素敵な関数についての布教でした。世界が一つになればこんな関数要らなくなるのに(キングダム)以上！