【JavaScript】和暦を表示する

今回は、JavaScriptで和暦を表示する方法を紹介します。

検証環境

検証に使用した環境／ライブラリを次に記載します。

動作例とソースコードは、次のサイトで確認することができます。

「Intl.DateTimeFormat」を使用して和暦を表示するためのプログラム例は、次のようになります。

new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {era: 'short'}).format(new Date())

1番目の引数は、ロケール情報として「ja-JP-u-ca-japanese」を指定します。2番目の引数は、オプション情報として「era」を指定します。eraには、次の値を指定することができます。

それぞれの出力結果は、次のようになります。

long = 令和5/5/7
short = 令和5/5/7
narrow = R5/5/7

オプション情報として「dateStyle」を指定することもできます。dateStyleには、次の値を指定することができます。

それぞれ出力結果は、次のようになります。

full = 令和5年5月7日日曜日
long = 令和5年5月7日
medium = 令和5年5月7日
short = R5/5/7

「Date.toLocaleDateString」を使用して和暦を表示するためのプログラム例は、次のようになります。

new Date().toLocaleDateString("ja-JP-u-ca-japanese", { era: "short" });

1番目の引数は、ロケール情報として「ja-JP-u-ca-japanese」を指定します。2番目の引数は、オプション情報として「era」を指定します。

オプション情報には、「Intl.DateTimeFormat」と同じものを指定することができます。

特定オプションの場合は、各ブラウザにより出力結果が違います。使用するときは注意してください。

オプション情報に「era」を指定したときは、出力結果が違います。検証環境に記載したブラウザと指定したパラメータでの動作をまとめると次のようになります。

「era = long」を指定したときの出力結果は、次のようになります。

「era = long」を指定したときの出力例

「era = short」を指定したときの出力結果は、次のようになります。

「era = short」を指定したときの出力例

「era = narrow」を指定したときの出力結果は、次のようになります。

「era = narrow」を指定したときの出力例

JavaScriptを使用して和暦を表示する方法を紹介しました。指定したオプションによりブラウザごとに動作の違いがあるため注意してください。

和暦を表示するためのメソッドなどの詳細は、次のサイトも参考にしてください。

指定可能なオプションについては、「Intl.DateTimeFormat（コンストラクタ）」に記載されているため参考にしてください。