はじめに
javascriptで日付処理を扱うことは大変なのでライブラリを使用することが多々あります。
特に有名なjavascriptの日付ライブラリ「Day.js」の使い方をお伝えします。
Day.jsはブラウザとNode.jsの両方で動くように考えられています。
そもそもなぜライブラリを使用するのか
javascriptで日付関連の処理を行うのは少々骨が折れるからです。
特にイライラするポイントは月が0から始まるところです。
次の例のようになります。
// 今の月を取得
let now = new Date();
let month = now.getMonth();
console.log(month); // ←本来の月の-1月（10月なら9月など）になる！
// 正しい月の取得
let month2 = now.getMonth() + 1;
console.log(month2); // ←本来の月の数字になる！これは直観的ではなく気持ち悪いです。
また「〇〇〇〇年〇〇月〇〇日」などの形式を指定して吐き出すフォーマット処理は自前で関数を作成するなどして置く必要もあります。
しかし、ライブラリを使用すればこの煩わしさから解放されるわけです。
代表的なライブラリmoment.js
javascriptの日付ライブラリといえば以前は「moment.js」というライブラリが人気でした。しかしmoment.jsの公式ページで「新しいプロジェクトでの使用は非推奨」というメッセージがでています。
設計時の2011年と今ではjavascriptエコシステムがだいぶ違い新しいエコシステム用に作り替えるリスクはおかさないとのことです。
今回紹介する「Day.js」はその代替ライブラリとして紹介されているものの1つです。
Day.jsの導入方法の選択
Day.jsを利用する方法は大きく2種類あります。
- npmでインストールしてimportする
- CDNを読み込んで利用する
今回は簡易的に試せる2の方法でDay.jsを利用します。
CDNでの呼び出し方法と国際化（日本に合わせる）
CDNサービス「cdnjs」のURLをscriptタグで呼び込みます
dayjs（cdnjs）のURL
https://cdnjs.com/libraries/dayjs
scriptタグで実際の呼び出し方法
まずheadタグの中に以下のように入力します。
<head>
～～～略～～～
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.10/dayjs.min.js"></script>
// 国際化するなら下記ファイルも同時に読み込み
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.10/locale/ja.min.js"></script>
</head>htmlにインラインでもよいし外部jsファイルにしてもよいので処理を入力します。
▼インラインに記入する場合
<script>
// ここに日付に関連する処理を記入していきます。
</script>Day.jsで現在の日時を表示する
CDNでのDay.jsの書き方のサンプルです
~~~略~~~
<div id="now">このテキストを現在の日付に変えます</div>
<script>
dayjs.locale("ja");
let now_str = dayjs.format("YYYY年MM月DD日（ddd）");
// let now_str = dayjs.format("YYYY年MMMDD日（ddd）"); ※MMMだと月も合わせて表示されるが統一感を考えるとMM月が妥当。
let now = document.getElementById('now');
now.innerHTML = now_str; // 〇〇〇〇年〇〇月〇〇日（〇）に変換される
</script>非常に簡単に現在日時を表示することができます。
※注意
javascriptをブラウザで動かして現在日時を表示している場合は端末（マシン）の時間を表示します。
インターネットに接続している場合は自動で日時が修正されるはずですがネット未接続などの場合でマシンの時間がずれている場合はプログラム上の時間もずれることになります。