令和元年🎉 JavaScript International Date フォーマットで和暦を表示させるには （再）

この記事は 平成最後の日、2019年4月31日に別のアカウントからポストしたものをこちらに移行した記事です。今更感があるかもしれないですが ECMA 402 について知るのは悪くないと思います〜。

令和元年おめでとうございます 🎉

さて、今回は新年号にふさわしく International Date format で和暦を表示する方法について書いていきたいと思います。

JavaScript Intl.DateTimeFormat オブジェクトを使えば、言語とローケルに特化した日付と時刻のフォーマットが可能になります。

The ECMAScript Internationalization API（国際標準化 API） は、日付と時刻そして貨幣の表示のローカライズを JavaScript で可能にするために作られたもので、2010 年に初版が発行されて現在は第６版が最新です。この API は最新のブラウザではすでにサポート済です。(参照 Can I use)

Intl オブジェクトのプロパティの一つ、DateTimeFormat が言語に応じた日付と時刻のフォーマットを可能にします。

ということは日本のローカルタイムを令和で表現できるということなのです。ただし、ブラウザがアップデートされていればの話ですが。

結論を言っておきますと、現時点で最新の Chrome ではまだ令和が和暦に追加されていませんので、この先のコードを正式にアウトプットするには、Chrome Canary 版が必要です。（この記事を急いで書いたので、しかも私のローケルでは時差でまだ平成ということもあり他のブラウザを試していませんが🙇‍♀️　Firefox では今のところまだのようです。Mozilla の Emma さん情報ありがとうございました。）
（現在はサポート済）

🗓 Using DateTimeFormat

ローケルと言語が設定されていない場合は DateTimeFormat はデフォルトの設定で表示されます。

ですので、米国サンフランシスコにいる私が自分のマシン上のブラウザでこのコードを動かすとこのように今日の日付を en-US で表示します。

new Intl.DateTimeFormat().format(Date.now())

（本当は私のタイムゾーンではまだ4月31日なのですが、日付が変わった程で😉）

"5/1/2019"

🇯🇵 Specifying Locales

ここでlocales 引数を使い、ローケル識別子（言語コードと、国、地域コード）を設定することによって日付と時刻をローカライズしてみましょう。

例えば、ロシアの場合。

new Intl.DateTimeFormat('ru-RU').format(Date.now())
// "02.04.2019" と表示される

そして日本の場合。

new Intl.DateTimeFormat('ja-JP').format(Date.now())
// "2019/5/1"

しかし、これではグレゴリオ暦のままです。完全に和暦で表示するにはどうしたらいいでしょうか。

ローケル識別子 ja-JP だけでは足りませんので -u-ca-japanese という拡張キーを追加し、 ja-JP-u-ca-japanese としましょう。

なんだか長いのですが、
-u 拡張キーの識別は
-ca カレンダー・タイプの
-japanese 日本のカレンダーを表示

という意味になります。詳しくは Unicode Technical Standard #35 で。

（エラリー　ジャンクリストフ さん、拡張キーについて詳しい情報のあるリンクを教えてくださって、ありがとうございました！）

new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(Date.now())
// 昨日までは、"31/4/30"
// 今日は "1/5/1"  

さて和暦っぽい年号ではありますが、元号が表示されていません。どうしたら良いでしょうか。

元号を表示するには options 引数の、この場合 era を long に設定しましょう。

new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {era:'long'}).format(Date.now())
// "令和1/5/1"

さてこれで、"令和1/5/1" と表示されたら、お使いのブラウザが無事に令和をサポートしています🐥

"平成31年5月1日" と表示された方はブラウザをアップデートをする（もしくは出るまで待つ）。待てども待てども表示されないブラウザはバグを提出しましょう。

(注、令和にはいってから Chrome 上でのこの和暦の表記が「令和n年n月n日」から「令和n/n/nn」のように変更になったようです。いつ変更になったのかは私はわかりませんがたぶん元年の途中からだと思います。)

せっかくですのでタイのローケルでも試してみましょう。

new Intl.DateTimeFormat('th-TH-u-nu-thai', {era:'long'}).format(Date.now())
// "๑ ๕ พุทธศักราช ๒๕๖๒"

なんか読めないけどイイ！🤩
タイはお釈迦様が入滅した翌年を仏滅紀元元年としており今年は 2562 年のようです。

というわけで、もっと詳しく知りたい方は MDN Web Docs をどうぞ。

ちなみに、Is it Reiwa (令和) yet? というしょぼいテストサイトも作ってみました。
https://reiwa-yet.glitch.me/.

それでは、今元号ともよろしくおねがいします。

元記事は、4月1日に元号が発表された直後に英語で書いたものです。今回、令和元年のはじまりを記念して日本語でも書きました。
https://girliemac.com/blog/2019/04/02/javascript-i18n-reiwa-era/