【JS】【TS】date-fns ～ 入門編 ～

JavaScript TypeScript

■ はじめに

https://dk521123.hatenablog.com/entry/2021/01/29/231952

の続き。

Date に関するライブラリの内に気になった date-fns について
実際に使ってみた。（若干のハマりポイントあり）

目次

【１】date-fns
【２】公式サイト
【３】使用上の注意
【４】環境設定
【５】サンプル
　例１：Hello world
　例２：先月の月初・月末日

【１】date-fns

* JavaScript/TypeScriptで Date を扱う際の便利ツール
 => 特徴としたら、標準の Date() を元に
　　ユーティリティ関数を用意してくれる感じ

【２】公式サイト

https://date-fns.org/

【３】使用上の注意

１）バージョン(v1.X系 と v2.X系)の違い

* はじめ、Github の例のように
「yyyy-MM-dd」って指定してたら
「yyyy-01-Sa」って表示された。
　=>大文字で「YYYY-MM-DD」で正しく動いた。

https://github.com/date-fns/date-fns

うまく動かなかった例 

const today = format(new Date(), 'yyyy-MM-dd');
console.log(today); // yyyy-01-Sa

原因 

* どうもVersion(v1.X系 と v2.X系)によって、YYYY-MM-DDの指定の仕方が違う
 => 導入する際は、v2.X系を採用した方が良さそう
 => 仮に「v1.X系」を導入した場合、
　　バージョン上げたらバグったってなりそうなので。

v1.30.1
https://date-fns.org/v1.30.1/docs/Getting-Started

dateFns.format(new Date(2014, 1, 11), 'MM/DD/YYYY') //<=★注目★
//=> '02/11/2014'

v2.16.1
https://date-fns.org/v2.16.1/docs/Getting-Started

format(new Date(2014, 1, 11), 'MM/dd/yyyy') //<=★変わっとる...★
//=> '02/11/2014'

【４】環境設定

npm install date-fns --save

 => date-fns v1.30.1 がインストールされた

Version2.XX系を入れたい場合 

# アンインストール
npm uninstall date-fns --save

# バージョンを指定してインストールする
npm install date-fns@2.16.1 --save

【５】サンプル

例１：Hello world

sample.ts (v1.30.1 の場合) 

import { format } from 'date-fns';

const today = format(new Date(), 'YYYY/MM/DD');
console.log(today); // 2021/01/30

const now = format(new Date(), 'YYYY-MM-DD HH:mm:ss');
console.log(now); // 2021-01-30 23:33:47

sample.ts (v2.16.1 の場合) 

import { format } from 'date-fns';

const today = format(new Date(), 'yyyy/MM/dd');
console.log(today); // 2021/01/30

const now = format(new Date(), 'yyyy-MM-dd HH:mm:ss');
console.log(now);

補足：実行コマンド 

# コンパイル
tsc sample.ts

# 実行
node sample.js

例２：先月の月初・月末日

https://qiita.com/watsuyo_2/items/0dec893c37129fe832d4

に記載されている。

sample.ts (v2.16.1 の場合) 

import { startOfMonth, subMonths, subDays, format } from 'date-fns';

// 今日の日付を取得
const today = new Date;
// 2021-01-31T12:47:11.911Z
console.log(today);

// 今月1日を取得
const startDay = startOfMonth(today);
// 2020-12-31T15:00:00.000Z
console.log(startDay);

// subMonthsで月に対して＋１month
const lastMonthStartDay = subMonths(startDay, +1);
// subDaysで日に対して＋１day
const lastMonthEndDay = subDays(startDay, +1);

// 先月の月初 (2020-11-30T15:00:00.000Z) <= UTC?
console.log(lastMonthStartDay);
// 2020-12-01 00:00:00 <= Formatで出せば意図したとおりに表示
console.log(format(lastMonthStartDay, 'yyyy-MM-dd HH:mm:ss'));

// 先月の月末 (2020-12-30T15:00:00.000Z) <= UTC?
console.log(lastMonthEndDay);
// 2020-12-31 00:00:00 <= Formatで出せば意図したとおりに表示
console.log(format(lastMonthEndDay, 'yyyy-MM-dd HH:mm:ss'));

参考文献

https://qiita.com/suin/items/296740d22624b530f93a
https://co.bsnws.net/article/195

関連記事

TypeScript での 日付 / 日時 の扱い
https://dk521123.hatenablog.com/entry/2021/01/29/231952
Day.js ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2021/01/31/213123
TypeScript ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/12/21/180904