Typescriptでタイムゾーンを扱う

はじめに

Typescriptのバックエンドでタイムゾーンを扱った時のメモです。

タイムゾーンを扱う場面

バックエンドでタイムゾーンを扱う場合、サーバーのタイムゾーン設定に依存しない実装が必要です。日本のタイムゾーンにおける特定の時間でDateオブジェクトを作る場合は、ライブラリに頼らなくてもISO8601形式で以下のように対応ができます。

new Date("2021-01-01T10:00:00+09:00") // 日本時間の 2021/01/01 10:00

では以下のような場合はどうでしょうか？

ファイル生成時に現在の日本時間をファイル名に入れたい
現在の日本時間から見た、その月の末日をサーバから返却したい

これらを自前の関数でやろうとすると結構面倒だったりします。そこで今回はタイムゾーンを簡単に扱うことができるdayjsの機能をご紹介します。

dayjsをインストール・初期化

dayjsは軽量の日付操作用ライブラリです。以下のようにインストールして対象のファイルからimportします。

npm i dayjs

import dayjs from "dayjs";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";

dayjs.extend(timezone);
dayjs.extend(utc);

これでdayjsオブジェクトを使って自在にタイムゾーンが扱えるようになります。

サンプル

ファイル生成時に現在の日本時間をファイル名に入れたい

const filename = `${dayjs().tz("Asia/Tokyo").format("YYYY-MM-DD-HH-mm-ss")}.jpg`;

tzの後のタイムゾーンを例えばAmerica/New_Yorkとすれば、現在のニューヨークの時間をもとにファイル名が生成されます。

現在の日本時間から見た、その月の末日をサーバから返却したい

const lastDayOfMonth = dayjs()
  .tz("Asia/Tokyo")
  .endOf("month")
  .startOf("date")
  .format("YYYY/MM/DD");

デフォルトのタイムゾーンを設定

dayjs.tz.setDefault("Asia/Tokyo");
const currentTokyoTime = dayjs().tz().format("YYYY-MM-DD-HH-mm"); // 現在の日本時間が表示される

特定のタイムゾーンにdayjsオブジェクトを変換

以下の通り、tzメソッドの第二引数にtrueを渡すと時刻はそのままで、timezoneだけがJSTに変更された形のDateオブジェクトをtoDateメソッドで返却することができます。ただしこの第二引数を渡すとformat関連のメソッドにJSTが考慮されなくなってしまいます。

const sampleDate = new Date("2021-05-01T00:00:00+09:00");

console.log(dayjs(samepleDate).tz("Asia/Tokyo").format(`YYYY年M月`)); // 2021年5月
console.log(dayjs(samepleDate).tz("Asia/Tokyo", true).format(`YYYY年M月`)); // 2021年4月
console.log(dayjs(samepleDate).tz("Asia/Tokyo").toDate().getTime()); // 1588258800000（日本時間 2021/05/01 00:00）
console.log(dayjs(samepleDate).tz("Asia/Tokyo", true).toDate().getTime()); // 1588226400000（日本時間 2021/04/30 15:00）

まとめ

以上、dayjsでタイムゾーンを扱った際のメモでした。dayjsはimmutableなのでその辺りも踏まえて扱いやすいライブラリかと思います。