君は新しい日付/時刻API Temporal を知っているか？

2024.06.28 Kyoto.js #22 の登壇資料です
https://kyotojs.connpass.com/event/321343/

Transcript

1. 君は新しい日付/時刻 API Temporal を知っ ているか？ 2024.06.28 Kyoto.js #22
2. id: @luccafort • マネーフォワード@Tech PR • 主にバックエンド主体、フロントエンドは ちょっと苦手 • Kyoto.rb / Kyoto.go Organizer • Go Conference 実行委員 • EUROとコパ・アメリカで生活が破綻して ます ◦ Abema TV & Amazon Prime Video 最高！ ◦ DAZN……？知らんな ◦ 時差問題がつらい • I love football! ◦ Manchester City ◦ Inter Milano • 最近プレイしている百英雄伝が楽し い
3. そもそも Temporal APIとは いったいなにものか？
4. • TC39 によって提案されているプロポーザルの1つ
 ◦ 現在のステージは3、ステージ4になれば規格として受け入れ可能な状態になる（以降の変更はできな い）
 ◦ TC39 はECMAScriptを策定している専門委員会（ Technical Commitee）のこと。
 ▪ DartはTC52になる。
 ◦ みんなが使用するためにはまだ polyfill が必要
 ▪ α版リリース: https://www.npmjs.com/package/@js-temporal/polyfill
 ▪ β版リリース: https://www.npmjs.com/package/temporal-polyfill
 • リポジトリはこちら
 ◦ https://github.com/tc39/proposal-temporal
 Temporal APIとは
5. Temporal APIとは “a global Object that acts as a top-level namespace (like Math), that brings a modern date/time API to the ECMAScript language. For a detailed look at some of the problems with Date, and the motivations for Temporal, see: Fixing JavaScript Date.” Temporal はグローバルオブジェクトであり、（Math のように）トップレベルの名前空間とし て機能します。Temporal はモダンな date/time API を ECMAScript にもたらします。Date の既存の問題点や Temporal を策定することへのモチベーションに関してはFixing JavaScript Dateを参照してください。 https://tc39.es/proposal-temporal/docs/index.html https://tc39.es/proposal-temporal/docs/ja/index.html
6. 1. ユーザーのローカルタイムとUTC以外のタイムゾーンをサポート していない
 2. パーサーの動作は信頼性に欠け、使い物にならない
 3. 日付オブジェクトは変更可能
 4. サマータイムの動作は予測不可能
 5. 計算APIが扱いにくい
 6. グレゴリオ暦以外の暦をサポートしていない
 既存のDate APIの課題（嫌なもの順）
7. • 日付と時刻を操作する簡単で使いやすい API を提供 • DST （Daylight Saving Time)を考慮した演算と、すべてのタイ ムゾーンをサポート • オブジェクトは特定の日時や時刻を明確に表現 • 厳格に定義された文字列をパース • グレゴリオ暦以外のカレンダーをサポート
 Temporal APIが解決できること
8. Q. const date = new Date(2024, 12, 29) を実行したとき出力 されるのはどれ？ A. > Sun Dec 29 2024 00:00:00 GMT+0900 (Japan Standard Time) B. > Wed Jan 29 2025 00:00:00 GMT+0900 (Japan Standard Time) C. 出力できない 突然ですがここでクイズです
9. Q. const date = new Date(2024, 12, 29) を実行したとき出力 されるのはどれ？ A. > Sun Dec 29 2024 00:00:00 GMT+0900 (Japan Standard Time) B. > Wed Jan 29 2025 00:00:00 GMT+0900 (Japan Standard Time) C. 出力できない 突然ですがここでクイズです これが正解 JSのDateオブジェクトの月のインデック スは0から始まる
10. • 日付文字列のパースが実装依存 a. new Date('03-25-2017') の結果はブラウザの実装依存 b. 検証のためにSafari の Developer Consoleで試したら動いてしまった… • 時間のみ、日付のみを扱えない a. 時間だけの比較や日付だけの比較をしたいことあるよね！ • 期間を扱えない • タイムゾーンの扱いが環境依存 • グレゴリオ暦以外の暦を扱えない a. 中国暦やユダヤ暦では閏年は13ヶ月になるがDateでは表現できない 他にもDate APIにはいろいろな課題がある
11. DEMO ここに用意したものが あってな……？
12. Temporal の構造 https://tc39.es/proposal-temporal/docs/index.html#object-relationship
13. 超雑に解説しちゃうと…… クラス名 説明 PlainXX 日時のみを持つ。UNIX時間やタイムゾーンの情報は持っていない ZonedDateTime UNIX時間とタイムゾーンを両方持ってる。Exact TimeとWall-Clock Timeの両方に属する Instant UNIX時間しか知らない。タイムゾーンを持ってないので、このクラス単体では日付や時間は得られな い。 Duration 時刻の加算・減算をするときなどに使う補助的なクラス。 TimeZone タイムゾーンを指定するときに使える。例えばIsntantからZonedDateTimeの変換をするときなど。 Calendar カレンダーシステムは、「特定の時刻」と「年、月、日といった人間が読みやすい数値」に対応する補助的 なクラス
15. Deno 1.40 Released, Features Upcoming JavaScript’s Temporal API and Decorators
 Deno 1.40ではすでにTemporalが実装されている
16. まとめ
17. • Temporal APIはDate APIのイケてなかったところをうまく解決している
 • クラスの構造や思想などソフトウェアアーキテクチャの勉強にもなった
 • カレンダーサポートやDurationのバランスングなど読んでいて面白い！
 ◦ Temporal におけるカレンダーシステムのサポート （個人的にイチオシ） ◦ Duration のバランシング • 日付/時間 関係でイラッとすることが減りそうで早くECMAScriptに実装されてほし い！
 ◦ Date→Temporal や Temporal→Date の変換もできる、便利〜〜〜！ 
 ◦ 今回話さなかったけど期間（ Duration）やカレンダーは実務でも絶対使う（はず） 
 ◦ いますぐ触りたい方は polyfill を使って触ってみるか Deno 1.40+ で遊んでみよう！
 まとめ
18. Road to SRE NEXT@京都 https://sre-lounge.connpass.co m/event/318844/
19. https://hrmos.co/pages/moneyforward/jobs/0004191
20. Ref(順不同): • tc39/proposal-temporal • MDN Web Docs / Date • Duration のバランシング • Temporal におけるカレンダーシステムのサポート • Deno 1.40: Temporal API • "Deno 1.40"がリリース、JavaScriptのTemporal APIとデコレーターの新機能を搭載 • Fixing JavaScript Date • ECMAScriptとは何か？ ◦ TC39 ◦ TC39 Process: Stage • JavaScriptの新しい標準日付ライブラリ Temporalまとめ • Temporal: JavaScript で"時間"を扱う際の使用方法（と個室ブース予約サイトでの活用例） • date() function returning Invalid Date in Safari and Firefox • JS の Date で任意のタイムゾーンを表現するのは難しい • JavaScriptの組み込みAPIのIntlが凄いので紹介してみた。 • Temporal入門 ◦ その1 ～ Temporalクラスの使い分けと相互変換について ◦ その2 ～ 実際に日付と時刻を操作してみる ◦ その3 ～ Temporalオブジェクトと文字列の変換（フォーマット等） • Temporal で JavaScript の次世代の日時処理に触れてみる