フロントエンド言語（HTML/CSS/JavaScript）のアウトプット練習帳です。今回は「和暦表記のカレンダー時計」を作ります。
1. 時計の動きを確認する
See the Pen
Japanese Clock by design1096 (@design1096)
on CodePen.
上記の「Result」画面に、カレンダー時計が表示されています。ポイントとなるのは、和暦（元号）の表示方法と、現在時刻（画面初期表示時）からのタイマー形式での時計表示方法です。
2. Google Fontsを使う（CSS）
まず、CSSについて。Google Fonts（Google社のWebフォントサービス）を使いました。日本語も9種類と数は少ないですが、提供されています。詳細は「Google Fonts + 日本語」のサイトをご覧ください。
今回は「Noto Sans JP」を使っています。時計では、日本語は漢字しか使っていないので違いが分かりにくいですが、無料で使用出来るので試してみました。
3. 和暦（元号）表記を指定する（JavaScript）
和暦（元号）表記には、Intl.DateTimeFormatオブジェクトを使用しました。
let date = new Intl.DateTimeFormat([‘ja-JP-u-ca-japanese’], options).format(now);
第一引数の「ja-JP-u-ca-japanese」で和暦（元号）表記を指定し、第二引数の定数optionsで書式をカスタマイズしています。optionsのカスタマイズ方法は、こちらのサイト「Intl.DateTimeFormat」に複数の実例が記載されています。
4. タイマー形式で表示する（JavaScript）
タイマー形式の表示には、setInterval()メソッドを使用しました。
let timerID = setInterval(timer, 500);
第一引数の関数（アロー関数timer）が、ミリ秒(1/1000秒)単位で指定した第二引数の時間毎に実行されることを意味します。「1000」ではなく「500」を指定することで、時間のズレを軽減しています。詳しくはこちらのサイト「WindowOrWorkerGlobalScope.setInterval()」でご確認ください。
時計は様々な表示方法が可能かつ実用性もあるので、楽しくアウトプットが出来ると思います。
【参考サイト】
・JavaScriptが令和に対応。Intl.DateTimeFormatで日付を和暦(元号)表記に変換する
・JavaScriptで時刻の二桁目をゼロ埋めする
