javascriptで日付を扱う時に便利なライブラリ「date-fns」の紹介です。
javascriptで日付を扱うのは一癖あり、普段から他の言語を使っている人からすると "あれ？"っと思うことがあります。
dateに特化したライブラリと言えば " Moment.js "が有名ですが、モダンなdateライブラリが「date-fns」です。
" date-fns " は2016年の5月に初リリースされたdateライブラリで、後発ということもあり lodashの様に、使いたい機能だけをモジュール単位でインポート出来たり、関数型チックにdate処理を書くことができます。
また、用意されている関数も140個以上と豊富に用意されています。
( * 執筆時のバージョンは 1.14.1 )
っということで、基本的な使い方と、よく使いそうな機能を幾つかピックアップしてみました。
date-fnsはサイト( githubリンク )から直接ライブラリを入手する他に、npm, bower を使っても導入が可能です。
# npm
npm install date-fns --save
# bower
bower install date-fns
下記のスニペットはライブラリの読み込み方法です。Node.js、Webブラウザ、BabelのES2015形式など、一通りの環境に対応しています。
// browser
/**
* ライブラリ全体を読み込む場合
*/
<script src="/date-fns/dist/date_fns.min.js"></script>
// ES2015 *babel
import dateFns from 'date-fns';
// CommonJS * node.js
const dataFns = require('data-fns');
/**
* モジュール単位で読み込む場合
*/
// ES2015
import format from 'date-fns/format';
// CommonJS
const format = require('date-fns/format');
isToday( date )
isTodayは引数内の日付が本日と一致する時にtrueを返します。よく似た機能でisTomorrow, isYesterdayなども用意されています。
// CommonJS
const isToday = require('date-fns/is_today');
// ES2015
import isToday from 'date-fns/is_today';
// usage
isToday('2016-12-6')); // もし本日が2016年12月6日ならtrueを返す
// browser
var isToday = dateFns.isToday();
format( date, format_type )
formatはその名の通り日付のフォーマットを変更出来ます。日本では一般的に '年/月/日'の並びが一般的ですが、'月/日/年'といった日付フォーマットにも簡単に変更出来ます。
また、localeを使うことで 日付を英語や日本語、ロシア語にも変換可能です
// CommonJS
const format = require('date-fns/format');
// ES2015
import format from 'date-fns/format';
// usage 月/日/年に表示
format('2016-12-6', 'MM/DD/YYYY') // 12/06/2016
// browser
var format = dateFns.format('2016-12-6', 'MM/DD/YYYY')
/* 表示を日本語に変更 */
const format = require('date-fns/format');
// 日本語フォーマットの読み込み
const ja = require('date-fns/locale/ja');
var result = format(
'2016-12-6',
'YYYY/ MMM/ Do',
{locale: ja}
);
console.log(result); // 2016/12月/6日
isAfter( dateToCompare, date )
isAfterは比較したい日付がその日 以降か比較出来ます。また、その反対を比較するisBeforeも用意されています。
// CommonJS
const isAfter = require('date-fns/is_after');
// ES2015
import isAfter from 'date-fns/is_after';
var today = '2016-12-7';
isAfter(today, '2016-12-6'); // true
// browser
var today = new Date();
var isAfter = dateFns.isAfter(new Date(), '2016-12-6');
isValid( date )
isValidは引数内の値が正しい日付インスタンスか確認してくれます。
( * 引数内の値が文字列だとerrorを返します )
// CommonJS
const isValid = require('date-fns/is_valid');
// ES2015
import isValid from 'date-fns/is_valid';
// usage
isValid(new Date(2016,12,21)); // true
// browser
var isValid = dateFns.isValid(new Date(2016,12,21))
isWithinRange( date, startDate, endDate )
isWithinRangeは比較した日付が指定した期間内に含まれるかどうか比較してくれる関数です。
下記の例は '2016年12月3日'が '2016年12月1日〜2016年12月7日'内に含まれているか比較しています。
// CommonJS
const isWithinRange = require('date-fns/is_within_range')
// ES2015
import isWithRange from 'date-fns/is_within_range'
const result = isWithinRange(
'2016-12-3', // base date
'2016-12-1', // start date
'2016-12-7' // end date
);
// usage
console.log(result); // true
// browser
dateFns.isWithinRange(
'2016-12-3', // base date
'2016-12-1', // start date
'2016-12-7' // end date
);
eachDay( startDate, endDate )
eachDayは便利な関数で、指定した始まりから終わりの日付を配列で返してくれます。
// CommonJS
const eachDay = require('date-fns/each_day');
// ES2015
import eachDay from 'date-fns/each_day'
// usage
var result = eachDay('2016-11-2', '2016-11-6')
console.log(result);
// output
// [ 2016-11-01T15:00:00.000Z,
// 2016-11-02T15:00:00.000Z,
// 2016-11-03T15:00:00.000Z,
// 2016-11-04T15:00:00.000Z,
// 2016-11-05T15:00:00.000Z ]
// browser
var eachDay = dateFns.eachDay('2016-11-2', '2016-11-6')
isSunday( date )
isSundayはその名の通り、引数内の日付が日曜日ならtrueを返してくれます。
( 日曜日(Sunday) 〜 土曜日(Saturday)まで各種関数が用意されています )
// CommonJS
const isSunday = require('date-fns/is_sunday');
// ES2015
import isSunday from 'date-fns/is_sunday';
// usage
var result = isSunday('2016-12-4'); // true
// browser
dateFns.isSunday()
以上がdate-fnsの紹介でした。
上記では紹介しきれませんでしたが、date-fnsには上記の他にも沢山の関数が用意されています。Moment.jsとの大きな違いはモジュール単位でインポート出来るので、欲しい機能だけ使うことができることです。
Webサイト作成時やnode.js等のプロジェクトでは役立つこと間違い無しなライブハウスなので、気になった人はぜひチェックしてください！
GitHub : date-fns/date-fns
公式のドキュメントページ
