JavaScriptが令和に対応。Intl.DateTimeFormatで日付を和暦(元号)表記に変換する

JavaScriptで日付を和暦(元号)表記に変換する方法を紹介する記事です。

この記事を書いている時刻は2019-04-30 03:00頃です。
令和まで24時間を切りました。

ということで、平成最後の日にJavaScriptで西暦を令和(元号)の表記にする方法を紹介したいと思います。ネタっぽいですが、普通のJavaScriptのTipsです。

以下はChromeのdevToolsのコンソールで実行したスクリーンショットになります。
`Date`オブジェクトを和暦表記に変換しています。
なんと、2019-05-01を指定するとちゃんと令和に変換されています。

[![Image from Gyazo](https://i.gyazo.com/a0e56a0268aea280f7b4ef139798d661.png)](https://gyazo.com/a0e56a0268aea280f7b4ef139798d661)


コードは以下です。

```javascript
const date = new Date(2019, 4, 1, 0, 0, 00);
const options = {era: 'long'};
console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese', options).format(date));
// 令和1年5月1日
```

これは`Intl.DateTimeFormat`というAPIを使うことで簡単に実現できます。簡単に紹介したいと思います。

## Intl
JavaScriptにはIntlという国際標準化APIが用意されています。
[Intl - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl)
このIntlには国ごとの表記に変換するAPIがいくつか用意されています。  
以前、数値のフォーマットに関する記事を書いたので、興味があれば読んでみてください。
[JavaScriptで数値フォーマットする標準API「Intl.NumberFormat」 (カンマ区切り、円・ドル表記、漢数字など) - Qiita](https://qiita.com/shisama/items/661c33fef5cbe3bb8335)

## Intl.DateTimeFormat
名前通り日付をフォーマットするAPIです。
[Intl.DateTimeFormat - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)  

詳しくはMDNのページを読んでいただきたいのですが、最初に紹介したコードを例に簡単に紹介したいと思います。

```javascript
const date = new Date(2019, 4, 1, 0, 0, 00);
const options = {era: 'long'};
console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese', options).format(date));
// 令和1年5月1日
```

`Intl.DateTimeFormat`は以下の引数を取ります。

##### locales
第一引数。必須ではありません。[BCP47](https://tools.ietf.org/html/bcp47)言語タグの文字列、または、そのような文字列の配列。
配列も取るので以下のように書くこともできます。

```javascript
new Intl.DateTimeFormat(['ja-JP-u-ca-japanese'], options).format(date)
```

また、指定しなかった場合は以下のように変換されます。

```javascript
new Intl.DateTimeFormat().format(date)
// 2019/5/1
```

##### options
第二引数。必須ではありません。この引数にはObjectです。年、月、日の表記形式やタイムゾーンの表記形式などを設定することができます。
eraを指定することで結果に元号を付与することができます。eraを指定しなければ、結果は`31/5/1`となります。
このeraですが、`narrow`、`short`、`long`の3つから選択できます。

```javascript
console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {era: 'narrow'}).format(date));
// R1年5月1日

console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {era: 'short'}).format(date));
// 令和1年5月1日

console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {era: 'long'}).format(date));
// 令和1年5月1日
```

# Date.prototype.toLocaleString()と比べて

Dateには`toLocaleString`という関数があり、これまで紹介した`Intl.DateTimeFormat`と同じように和暦に変換することができます。
しかし少しばかり動作が違います。

```javascript
const date = new Date(2019, 4, 1, 1, 20, 30);
const options = {era: 'long'};
const locale = 'ja-JP-u-ca-japanese';
console.log(date.toLocaleString(locale, options));
// 令和1年5月1日 1:20:30
```

上記のように時間まで表記してくれます。こちらの方が便利な場合もあります。
しかし、日付だけでいい場合は`Intl.DateTimeFormat`の方がパフォーマンスは良いみたいです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString#Performance

## 最後に

**実は今現在のChromeの安定版にはまだ令和は来ていません！！**
[![Screenshot from Gyazo](https://gyazo.com/3d16db8ef52b2f2be30628eda49a8a39/raw)](https://gyazo.com/3d16db8ef52b2f2be30628eda49a8a39)

Chromeのバージョンは以下の通りです。平成最後の日の最新のビルド(74.0.3729.108)です。
[![Image from Gyazo](https://i.gyazo.com/beb7c48f0fc91117da1ce629abe066c9.png)](https://gyazo.com/beb7c48f0fc91117da1ce629abe066c9)

しかし！**Chrome Canary(76.0.3780.0)では令和に変換されます！**
Chrome 76で使えるはずなのでしばらく待ちましょう。betaやdevで試せていないのでもしかするともう少し早くに対応されるかもしれません。
もしbetaやdevで試した方がおられましたら教えていただけると助かります。。

(2019-05-04 追記)
Chrome 75の対応状況についてTwitterで教えていただきました！
[@jin7_kuramoto](https://twitter.com/jin7_kuramoto)さんありがとうございます！
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ChromiumベースになるEdge．Dev Channelのだと令和表示されました．75.0.139.4でした．75できそうてすかね．</p>&mdash; Keisuke Kuramoto (@jin7_kuramoto) <a href="https://twitter.com/jin7_kuramoto/status/1124530690211454976?ref_src=twsrc%5Etfw">2019年5月4日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


以上になります。
最後までお読みいただきありがとうございました。質問や不備がございましたらコメント欄や[Twitter](https://twitter.com/shisama_)にメンションを飛ばして教えていただけると助かります。
皆様にとって令和が良き時代になりますように。