JavaScriptでのタイムゾーンの扱いは面倒

サイトの開発をしていて、やはり日付の取り扱いは面倒だなと実感しました。特にタイムゾーンの取り扱いが、です。JavaScriptのDateオブジェクトにはgetHours等々の関数がありますが、これらはマシンに設定されたタイムゾーンでの値を返すのです。これは、自分のマシンでのみプログラムを使う場合には問題にはなりませんが、異なるタイムゾーンのマシンで動かすと結果が変わることがあります。

私のサイトでは、各投稿の作成日時がページ上に表示されます。ページはサーバーサイドで一度描画されるのですが、この際に作成日時のDateオブジェクトからgetHoursなどを使用して日時を文字列化すると、サーバーのタイムゾーンの日時として描画されてしまいます。この問題を解決するためには、タイムゾーンを指定してDateオブジェクトを文字列化しなければなりません。date-fns-tzを使うと、タイムゾーンを指定して、Dateオブジェクトを文字列化することができます。

import formatInTimeZone from 'date-fns-tz/esm/formatInTimeZone';

export function toISOStringJST(date: Date) {
  return formatInTimeZone(date, 'Asia/Tokyo', "yyyy-MM-dd'T'HH:mm:ssXXX");
}