date-fnsのクイックツアー、シンプルなJavaScript日付ライブラリ

JavaScriptで日付を操作するのは簡単ではありません。 そのため、ほとんどのアプリの package.json ファイルを見ると、通常、そこにMoment.jsのようなライブラリがあります。

Moment.js は、悪評を得た最初のライブラリの1つでした。 これにより、開発者にとって日付の解析/フォーマット/計算が難しくなりませんでした。

しかし、 date-fns というライブラリについて知っていますか？

date-fns は、一般的にMoment.jsの価値のある代替手段と見なされています。 同じ機能セットを提供するだけでなく、機能的なプログラマーにもアピールします。

date-fnsをインストールします

date-fnsをnpm/Yarnでインストールできます。

# Using npm
$ npm install date-fns

# Or using yarn
$ yarn add date-fns

日付のフォーマット

日付のフォーマットは、Moment.js/date-fnsのようなライブラリの基本です。 これは、ネイティブJavaScriptにはこれを処理する簡単な方法がないためです。

date-fnsは、Moment.jsと同様の文字列パターンを使用します。

const format = require('date-fns/format');
const stPattysDay = new Date('2020/03/17');
const formattedDate1 = format(stPattysDay, 'MM/dd/yyyy');
const formattedDate2 = format(stPattysDay, 'MMMM dd, yyyy');

console.log(formattedDate1);
// => "03/17/2020"

console.log(formattedDate2);
// => "March 17, 2020"

とても簡単です！ 日付をフォーマットする方法はたくさんあるので、希望どおりに表示されます。

日付の加算/減算

日付をフォーマットできるようになったので、それらを使用して加算/減算を実行するのはどうですか？ これを行うには、いくつかの機能があります。

• addDays
• subDays
• addWeeks
• サブウィーク
• addMonths
• サブ月

以下の例では、指定された日付に1年を追加します。

const format = require('date-fns/format');
const addYears = require('date-fns/addYears');

const stPattysDay = new Date('2020/03/17');
const stPattysDayNextYear = addYears(stPattysDay, 1);
const formattedDate = format(stPattysDayNextYear, 'MMMM dd, yyyy');

console.log(formattedDate);
// => "March 17, 2021"

ロケールの使用

フォーマットは非常に簡単ですが、ロケールについてはどうでしょうか。 ユーザーが世界中からあなたのウェブサイトにアクセスすることを私たちは知っています、そして私たちは彼らが私たちの母国語を話すと仮定したくありません。

このために、特定のロケールプラグインをインポートできます。

const format =  require('date-fns/format');
const russianLocale = require('date-fns/locale/ru');

const stPattysDay = new Date('2020/03/17');
const formattedDate = format(stPattysDay, 'MMMM dd, yyyy', { locale: russianLocale });

console.log(formattedDate);
// => "марта 17, 2020"

2つの日付の違い

2つの日付の差を計算する機能は、日付操作ライブラリにとって重要です。 date-fnsは、これを計算するためのいくつかの関数を提供します。

たとえば、1月1日からクリスマスまでの日数（および「営業日」）を計算できます。

const format = require('date-fns/format');
const addYears = require('date-fns/addYears');
const differenceInDays = require('date-fns/differenceInDays');
const differenceInBusinessDays = require('date-fns/differenceInBusinessDays')

const startDate = new Date('2020/01/01');
const endDate = new Date('2020/12/24');
const daysBetween = differenceInDays(endDate, startDate);
const workdaysBetween = differenceInBusinessDays(endDate, startDate);

console.log(daysBetween);
// => 358

console.log(workdaysBetween);
// => 256

🎁ボーナス！ date-fnsには小さなフットプリントがあります🎁

Moment.js を使用することの最大の欠点の1つは、サイズが大きいことです。 APIはチェーンのみを許可するため、個々の関数をインポートする方法はありません。 これは、ライブラリ全体をインポートする必要があることを意味します。

const moment = require('moment');
const formattedDate = moment(new Date()).format('MM/DD/YYYY');

console.log(formattedDate);
// => "03/17/2020"

date-fnsを使用すると、必要な特定の関数のみを取得できます（Lodashの場合とよく似ています）。

const format = require('date-fns/format');
const formattedDate = format(new Date(), 'MM/dd/yyyy');

console.log(formattedDate);
// => "03/17/2020"

これにより、date-fnsの依存関係はMoment.jsよりもはるかに小さくなります。 Moment.jsとdate-fnsのバンドルサイズについては、以下の図を参照してください。

出典： BundlePhobia

結論

date-fnsは、現時点ではMoment.jsよりもはるかに多くの開発作業を行っているようです😉。 このため、それは本当によく維持されており、開発者はその方向性により多くのインプットを得ることができます。 その堅牢な機能セットと最新のES6感度に加えて、試してみる価値があります。 📅📌