【課題16】date-fnsに触れてみた

現在もりけん塾の課題16に取り組んでいます。
課題でニュース記事に日付判定(〇〇日以内なら)新着アイコンを追加する機能を実装する際に、
date-fnsを導入したので、その備忘録です。

date-fnsとは
date-fnsで日付を比較してみる
もりけん塾
- もりけん塾
  - もりけん塾

date-fnsとは

date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.
https://date-fns.org/

公式にあるように、Node.jsを使って日付をJavaScriptで簡単に操作できるようにする、ライブラリです。
実際に触ってみて、日付のフォーマット機能に今回かなり助けられました。

date-fnsで日付を比較してみる

date-fnsのインストールは公式通りインストールします。

今回jsonデータにあるニュース記事の日付が特定の日付以内(今回は60日)であれば新着アイコンを追加する機能を実装しました。
この機能を実装するにあたり、「differenceInDays」と「parseISO」を使いました。

differenceInDaysは2つの指定された期間の日数を取得してくれます。
今回だと今日と記事に日付になります。

構文

differenceInDays(dateLeft, dateRight)

dateLeft : 日付(後日)
deteRight : 日付(以前の日付)

dateLeftには今日の日付、dateRightには今日の日付を入力します。

const　articleDateToToday = differenceInDays(new Date(),2021-12-30);

上記のように入力して出力したところ、
エラーが出ました。

Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use parseISO to parse strings. See: https://git.io/fjule

version2.0.0-beta.1以降yyyy-mm-dd形式の日付フォーマットをサポートしていないので、
parseISOを使って文字列を解析しISO8601形式のフォーマットにしてというエラーでした。

指定された方法で一旦どのようにフォーマットされるのか調べました。

const days2 = parseISO('2021-12-30');
console.log(days);
//Fri Dec 31 2021 00:00:00 GMT+0900 (日本標準時)

今日の日付も取得してみます。

console.log(new Date());
//Tue Apr 19 2022 15:52:55 GMT+0900 (日本標準時)

記事の日付が同じフォーマットになっていることが確認できたので、
先ほどの変数に入れ直します。

const articleDateToToday = differenceInDays(new Date(),parseISO('2021-12-30'));
console.log(articleDateToToday);
//109

記事の日付は今日から109日前と取得することができました。
これを新着アイコンをつける60日を使って条件分岐を書きます。

function addNewIcon(date,item) {
	const articleDate = date.date;
	const articleDateToToday = differenceInDays(new Date(),parseISO(articleDate));
	const judgmenDays = 60;
	if(articleDateToToday <= judgmenDays){
		const newIcon = document.createElement('span');
		newIcon.textContent = 'new';
		newIcon.classList.add('icon-new');
		const newsArticleLink = item.querySelector('.news-link');
		newsArticleLink.insertAdjacentElement('afterend',newIcon);
	}
}

これで無事日付判定してアイコンをつけることができました。

他にも加算や減算のメソッドも秒、日、月、年といった関数も用意されていたので、
すごく便利なライブライリだなと思いました。

あとそもそものデータの日付が間違っている(ISO8601形式に変換できないフォーマット)だとInvalid Dateを返してくれます。
いくつかjsonデータに2022-1-10とyyyy-mm-ddの形式になっていないところがあったので、
アイコン追加関数が実行されない原因にすぐ辿り着くことができました。