JavaScriptの日時・時刻用ライブラリ「Day.js」の利用方法について

JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使いにくく感じる。具体的にはフォーマット周りが使いづらい。良さそうなライブラリを調べたところDay.jsが軽量で、ちょっと触った感じでも分かりやすかったので導入から使用方法のソースコードをメモ。

Day.js

公式サイト

https://day.js.org/

ドキュメント

https://day.js.org/docs/en/installation/installation

導入方法(CDN)

公式案内通り以下でCDN呼び出しできる。

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

異なるバージョンが良い場合は以下から探す。

https://cdnjs.com/libraries/dayjs

ソースコード

現在日時の表示

//バニラJS
const toLocaleString_options = {
    year: 'numeric', 
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: 'numeric',
    second: 'numeric',
    timeZone: 'Asia/Tokyo'
};
var date = new Date();
console.log(date.toLocaleString('ja-jp', toLocaleString_options));

//dayjs
var date = dayjs().format('YYYY/MM/DD HH:mm:ss');
console.log(date);

バニラJSで月日時あたりをゼロパディングするためにはオプションで指定する必要あり。dayjsはPHPと似たような感じで指定できる。

尚、以後「const toLocaleString_options」の定義部分は記述しないが、書かれているものとして読み替えること。

指定日時の表示

//バニラJS
var date = new Date('2024-02-29 12:34:56');
console.log(date.toLocaleString('ja-jp', toLocaleString_options));

//dayjs
var date = dayjs('2024-02-29 12:34:56').format('YYYY/MM/DD HH:mm:ss');
console.log(date);

〇日後の表示

//バニラJS
var date = new Date();
date.setDate(date.getDate() + 1);
console.log(date.toLocaleString('ja-jp', toLocaleString_options));

//dayjs
var date = dayjs().add(1, 'day').format('YYYY/MM/DD HH:mm:ss');
console.log(date);

〇日前の表示

//バニラJS
var date = new Date();
date.setDate(date.getDate() - 1);
console.log(date.toLocaleString('ja-jp', toLocaleString_options));

//dayjs
var date = dayjs().subtract(1, 'day').format('YYYY/MM/DD HH:mm:ss');
console.log(date);

年月日と曜日をそれぞれ取得

const weekday_list = ['日','月','火','水','木','金','土'];

//バニラJS
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var weekday = date.getDay();
console.log(year, month, day, weekday_list[weekday]);

//dayjs
var year = dayjs().year();
var month = dayjs().month() + 1;
var day = dayjs().date();
var weekday = dayjs().day();
console.log(year, month, day, weekday_list[weekday]);

所感

メリット

個人的には以下がメリットに感じた。

• メソッドチェーンが使えるので短く書ける
• フォーマットが指定しやすい
• 2KBの軽量ライブラリ

フロント側で日時データを処理する際等には使っていきたい。

その他

day.jsよりも速くて軽いcdateライブラリという記事を見かけた。こちらも機会があれば試してみたいところ。