🕐

[JS]Temporalの嬉しい進捗 MDNドキュメント&Firefox対応開始

2025/01/30に公開

こんにちは、booost technologiesバックエンドエンジニアのma_meです。
直近の業務でフロントエンドのタイムゾーンで苦しめられていた中、JSの日付処理を劇的に改善するTemporalの明るい進捗ニュースが飛び込んできて、大変喜んでいます。
今回はそんなTemporalの明るいニュースをお伝えしたいと思います。

記事の概要まとめ

  • Temporalの包括的なドキュメントがMDNに追加された
  • Firefox Nightlyにも実装されはじめた

嬉しいニュース
JavaScript Temporal is coming | MDN Blog

Temporal って何?

そもそもTemporalについての説明です。
JSの日付APIは選択肢が殆ど無いうえ、あまり機能が充実しておらず、フロントエンドで日付を扱う際にはライブラリが必須な状況でした。
ライブラリも一筋縄ではなかなかいかず、Moment.jsのメンテナンスが止まり、移行先を探したのも記憶に新しいかと思います。
そんなJS周りの日付の不便さを解決すべく、長い間実装が進められてきたTemporal APIがあります。
なかでもDateオブジェクトにはなかった、特徴的なAPIを3つ紹介します。

1. 期間の計算(Temporal.Duration)

ドキュメント
Temporal.Duration - JavaScript | MDN

サンプルコード

// 2つの異なる日時を作成
const startDateTime = Temporal.PlainDateTime.from('2025-01-01T08:30');
const endDateTime = Temporal.PlainDateTime.from('2025-01-03T12:45');

// 期間(Duration)を計算
endDateTime.since(startDateTime, { largestUnit: 'days' });

結果

P2DT4H15M
// 2日と4時間15分の差
// P:period、T:time、D:day、H:hour、M:minutes 

2. タイムゾーンに依存しない時刻(Temporal.PlainDateTime)

ドキュメント
Temporal.PlainDateTime - JavaScript | MDN

サンプルコード

const base = Temporal.PlainDateTime.from("2021-07-01");
base.year
base.month
base.day

結果

2021 // year
7    // month
1    // day

3. タイムゾーンを指定した日付・時刻の生成(Temporal.ZonedDateTime)

ドキュメント
Temporal.ZonedDateTime - JavaScript | MDN

サンプルコード

const date = Temporal.ZonedDateTime.from({
  timeZone: 'Asia/Tokyo',
  year: 2000,
  month: 12,
  day: 31
}); 

date.toString();

結果

'2000-12-31T00:00:00+09:00[Asia/Tokyo]'

他にも多々
個人的には差分やタイムゾーンには多分に苦しめられてきたので、大変嬉しい限りです。

MDNに追加された、ドキュメント一覧

↑で代表的な例をあげましたが、他にもAPIは多岐に渡っており、
今回270ページ以上にわたるTemporalの各APIドキュメントが追加されました。

  • 各クラスとメソッドの詳細な説明
  • 多数の実例
  • 便利なユースケース

などが含まれています。

MDNでは説明とコードの提供のみで、既存のAPIのようにインタラクティブなデモ機能は提供されていませんが、
Temporalを手軽に試したい場合、TC39のTemporalドキュメントページで試すことが可能です。
https://tc39.es/proposal-temporal/docs/
上記ページでブラウザの開発者ツールを開き、Temporalのコードをコピペして実行することが可能です。

Temporalのブラウザサポート状況

2025年1月現在、Temporalは実験的な機能として、Firefox: Nightlyでサポート始まっています。
他のブラウザにも組み込まれる日が待ち遠しいです。

宣伝

booost technologiesではWebエンジニアを積極採用中です。
もしご興味をお持ちいただけましたら、ぜひお気軽にお声がけください。
https://hrmos.co/pages/booosttechnologies/jobs?category=1790705628757647362

booost technologies

Discussion