Help us understand the problem. What is going on with this article?

什和元幎🎉 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/

girlie_mac
前の䌚瀟で䜿っおいた方のアカりントず分けたした。🐱  サンフランシスコ・シリコンバレヌで゜フトりェアの仕事をかれこれ幎しおいたす。珟圚 Microsoft で働いおいたす。これからもい぀たでも新しいこずを吞収し぀぀ずっずコヌドをかいおいきたいものです。
https://girliemac.com
microsoft
マむクロ゜フトのメンバヌが最新の技術情報をお届けしたす。Twitterアカりント@msdevjpやYouTubeチャンネル「クラりドデベロッパヌちゃんねる」も運甚䞭です。
https://azure.microsoft.com/ja-jp/developer/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away