17
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Typescriptでタイムゾーンを扱う

Last updated at Posted at 2020-12-16

はじめに

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なのでその辺りも踏まえて扱いやすいライブラリかと思います。

17
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?