こんにちは、booost technologiesバックエンドエンジニアのma_meです。 
直近の業務でフロントエンドのタイムゾーンで苦しめられていた中、JSの日付処理を劇的に改善するTemporalの明るい進捗ニュースが飛び込んできて、大変喜んでいます。 
今回はそんなTemporalの明るいニュースをお伝えしたいと思います。
<h1 id="%E8%A8%98%E4%BA%8B%E3%81%AE%E6%A6%82%E8%A6%81%E3%81%BE%E3%81%A8%E3%82%81" data-line="4" class="code-line">
<a class="header-anchor-link" href="#%E8%A8%98%E4%BA%8B%E3%81%AE%E6%A6%82%E8%A6%81%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> 記事の概要まとめ</h1>
<ul data-line="6" class="code-line">
<li data-line="6" class="code-line">Temporalの包括的なドキュメントがMDNに追加された</li>
<li data-line="7" class="code-line">Firefox Nightlyにも実装されはじめた</li>
</ul>
嬉しいニュース 
<a href="https://developer.mozilla.org/en-US/blog/javascript-temporal-is-coming/" target="_blank" rel="nofollow noopener noreferrer">JavaScript Temporal is coming | MDN Blog</a>
<h1 id="temporal-%E3%81%A3%E3%81%A6%E4%BD%95%EF%BC%9F" data-line="12" class="code-line">
<a class="header-anchor-link" href="#temporal-%E3%81%A3%E3%81%A6%E4%BD%95%EF%BC%9F" aria-hidden="true"></a> Temporal って何？
</h1>
そもそもTemporalについての説明です。 
JSの日付APIは選択肢が殆ど無いうえ、あまり機能が充実しておらず、フロントエンドで日付を扱う際にはライブラリが必須な状況でした。 
ライブラリも一筋縄ではなかなかいかず、Moment.jsのメンテナンスが止まり、移行先を探したのも記憶に新しいかと思います。 
そんなJS周りの日付の不便さを解決すべく、長い間実装が進められてきたTemporal APIがあります。 
なかでもDateオブジェクトにはなかった、特徴的なAPIを３つ紹介します。
<h2 id="1.-%E6%9C%9F%E9%96%93%E3%81%AE%E8%A8%88%E7%AE%97%EF%BC%88temporal.duration%EF%BC%89" data-line="20" class="code-line">
<a class="header-anchor-link" href="#1.-%E6%9C%9F%E9%96%93%E3%81%AE%E8%A8%88%E7%AE%97%EF%BC%88temporal.duration%EF%BC%89" aria-hidden="true"></a> 1. 期間の計算（Temporal.Duration）</h2>
ドキュメント 
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/Duration" target="_blank" rel="nofollow noopener noreferrer">Temporal.Duration - JavaScript | MDN</a>
サンプルコード
<div class="code-block-container"><pre class="language-jsx"><code class="language-jsx code-line" data-line="27">// 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' });
</code></pre></div>結果
<div class="code-block-container"><pre class="language-jsx"><code class="language-jsx code-line" data-line="38">P2DT4H15M
// 2日と4時間15分の差
// P：period、T：time、D：day、H：hour、M：minutes　
</code></pre></div><h2 id="2.-%E3%82%BF%E3%82%A4%E3%83%A0%E3%82%BE%E3%83%BC%E3%83%B3%E3%81%AB%E4%BE%9D%E5%AD%98%E3%81%97%E3%81%AA%E3%81%84%E6%99%82%E5%88%BB%EF%BC%88temporal.plaindatetime%EF%BC%89" data-line="44" class="code-line">
<a class="header-anchor-link" href="#2.-%E3%82%BF%E3%82%A4%E3%83%A0%E3%82%BE%E3%83%BC%E3%83%B3%E3%81%AB%E4%BE%9D%E5%AD%98%E3%81%97%E3%81%AA%E3%81%84%E6%99%82%E5%88%BB%EF%BC%88temporal.plaindatetime%EF%BC%89" aria-hidden="true"></a> 2. タイムゾーンに依存しない時刻（Temporal.PlainDateTime）</h2>
ドキュメント 
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/PlainDateTime" target="_blank" rel="nofollow noopener noreferrer">Temporal.PlainDateTime - JavaScript | MDN</a>
サンプルコード
<div class="code-block-container"><pre class="language-jsx"><code class="language-jsx code-line" data-line="51">const base = Temporal.PlainDateTime.from("2021-07-01");
base.year
base.month
base.day
</code></pre></div>結果
<div class="code-block-container"><pre class="language-jsx"><code class="language-jsx code-line" data-line="60">2021 // year
7 // month
1 // day
</code></pre></div><h2 id="3.-%E3%82%BF%E3%82%A4%E3%83%A0%E3%82%BE%E3%83%BC%E3%83%B3%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E6%97%A5%E4%BB%98%E3%83%BB%E6%99%82%E5%88%BB%E3%81%AE%E7%94%9F%E6%88%90%EF%BC%88temporal.zoneddatetime%EF%BC%89" data-line="66" class="code-line">
<a class="header-anchor-link" href="#3.-%E3%82%BF%E3%82%A4%E3%83%A0%E3%82%BE%E3%83%BC%E3%83%B3%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E6%97%A5%E4%BB%98%E3%83%BB%E6%99%82%E5%88%BB%E3%81%AE%E7%94%9F%E6%88%90%EF%BC%88temporal.zoneddatetime%EF%BC%89" aria-hidden="true"></a> 3. タイムゾーンを指定した日付・時刻の生成（Temporal.ZonedDateTime）</h2>
ドキュメント 
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/ZonedDateTime" target="_blank" rel="nofollow noopener noreferrer">Temporal.ZonedDateTime - JavaScript | MDN</a>
サンプルコード
<div class="code-block-container"><pre class="language-jsx"><code class="language-jsx code-line" data-line="73">const date = Temporal.ZonedDateTime.from({
 timeZone: 'Asia/Tokyo',
 year: 2000,
 month: 12,
 day: 31
}); 

date.toString();
</code></pre></div>結果
<div class="code-block-container"><pre class="language-jsx"><code class="language-jsx code-line" data-line="86">'2000-12-31T00:00:00+09:00[Asia/Tokyo]'
</code></pre></div>他にも多々 
個人的には差分やタイムゾーンには多分に苦しめられてきたので、大変嬉しい限りです。
<h3 id="mdn%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%95%E3%82%8C%E3%81%9F%E3%80%81%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E4%B8%80%E8%A6%A7" data-line="93" class="code-line">
<a class="header-anchor-link" href="#mdn%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%95%E3%82%8C%E3%81%9F%E3%80%81%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E4%B8%80%E8%A6%A7" aria-hidden="true"></a> MDNに追加された、ドキュメント一覧
</h3>
↑で代表的な例をあげましたが、他にもAPIは多岐に渡っており、 
今回<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal" target="_blank" rel="nofollow noopener noreferrer">270ページ以上にわたるTemporalの各APIドキュメントが追加</a>されました。
<ul data-line="98" class="code-line">
<li data-line="98" class="code-line">各クラスとメソッドの詳細な説明</li>
<li data-line="99" class="code-line">多数の実例</li>
<li data-line="100" class="code-line">便利なユースケース</li>
</ul>
などが含まれています。
MDNでは説明とコードの提供のみで、既存のAPIのようにインタラクティブなデモ機能は提供されていませんが、 
Temporalを手軽に試したい場合、TC39のTemporalドキュメントページで試すことが可能です。 
<iframe id="zenn-embedded__79b95179a348d" src="https://embed.zenn.studio/card#zenn-embedded__79b95179a348d" data-content="https%3A%2F%2Ftc39.es%2Fproposal-temporal%2Fdocs%2F" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://tc39.es/proposal-temporal/docs/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://tc39.es/proposal-temporal/docs/</a> 
上記ページでブラウザの開発者ツールを開き、Temporalのコードをコピペして実行することが可能です。
<img src="https://storage.googleapis.com/zenn-user-upload/548e5823149d-20250130.jpg" loading="lazy" class="md-img">
<h3 id="temporal%E3%81%AE%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E7%8A%B6%E6%B3%81" data-line="111" class="code-line">
<a class="header-anchor-link" href="#temporal%E3%81%AE%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E7%8A%B6%E6%B3%81" aria-hidden="true"></a> Temporalのブラウザサポート状況
</h3>
2025年1月現在、Temporalは実験的な機能として、Firefox: Nightlyでサポート始まっています。 
他のブラウザにも組み込まれる日が待ち遠しいです。
<h1 id="%E5%AE%A3%E4%BC%9D" data-line="116" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%A3%E4%BC%9D" aria-hidden="true"></a> 宣伝</h1>
booost technologiesではWebエンジニアを積極採用中です。 
もしご興味をお持ちいただけましたら、ぜひお気軽にお声がけください。 
<iframe id="zenn-embedded__6d6e39f84b82a" src="https://embed.zenn.studio/card#zenn-embedded__6d6e39f84b82a" data-content="https%3A%2F%2Fhrmos.co%2Fpages%2Fbooosttechnologies%2Fjobs%3Fcategory%3D1790705628757647362" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://hrmos.co/pages/booosttechnologies/jobs?category=1790705628757647362" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://hrmos.co/pages/booosttechnologies/jobs?category=1790705628757647362</a>

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

1. 期間の計算（Temporal.Duration）

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

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

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

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

Discussion