宮水の日記

宮水の日記

主に書評や資格取得について記事を書いています。

date-fns【JSライブラリ1日1個】

JSライブラリを1日1つ紹介する

1日1つJSのライブラリを調べます。

① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する


本日は、date-fnsのドキュメントを読んで実際に業務で使っているところを調べました。

 

ドキュメント

今回読んだドキュメントはこちらです。
github.com
 

実際に使ってみる

今回もCDNを使いました

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
  </head>
  <body>
    <div>hogehoge</div>
  </body>
  <script>
    var format = dateFns.format('2019-12-18', 'MM/DD/YYYY')
    console.log(format);
  </script>
</html>

こんな感じで帰ってきました。
f:id:kattyan53:20191218134541p:plain
 

わからなかったところ

調べているうちに、こっちのMoment.jsの方が人気ということを聞きました☺️
trends.google.co.jp

(↑似たようなライブラリを調べるときに、このサイトは役にたちますね!)

これは他の人のブログで知ったのですが、date-fnsはmomentjsよりもモダンで軽量というメリットがあるようですね! 

このように似たような機能のライブラリの選定は、どのように行うのでしょうか?
gemだと、よくcommitされているとかスター数が多いとかで判断してしまいますが、
どっちが軽量だとかはちょっとまだ判断できそうにないです(TT)


3行以内でまとめる

date-fnsは、

  • 日付に関する関数がたくさん揃っているライブラリ
  • 人気のMoment.jsよりもモダンで軽量

フィードバック

 - 日付のライブラリは間違えやすい。例えば、以下の二つの関数。differenceInDaysの方が厳密に24時間で離れているか比較していて、differenceInCalendarDaysは日付けが違ったら違うことになっている。使い方を間違うと1日ずれてしまうので注意が必要。

date-fns/index.js at a74013746eeabd2cec05500c4f016f3683d091ba · date-fns/date-fns · GitHub

date-fns/index.js at a74013746eeabd2cec05500c4f016f3683d091ba · date-fns/date-fns · GitHub


 

以上です!

参考サイト:JSの日時ライブラリdate-fnsを使ってみる - やってみる