【JS】【TS】TypeScript での 日付 / 日時 の扱い

JavaScript TypeScript

■ はじめに

TypeScript で 日付・日時について扱う機会があった。
ライブラリもあるみたいなので、調査。

なお、TypeScriptって書いてあるけど、JavaScript でも同じ。

後日談 

過去に JavaScript の記事があった。。。

https://dk521123.hatenablog.com/entry/2018/08/02/213438

目次

【０】標準 Date()
【１】Moment <= プロジェクト終了
【２】Luxon
【３】Day.js
【４】date-fns
【５】js-Joda

【０】標準 Date()

* そんなに難しい処理をする予定がなければ、
　なんだかんだで、標準の Date() で実装するのはありかなっと。

サンプル 

export default class DateTimeUtil {
  /**
   * YYYY/MM/DDへ変換
   * @param targetDate 対象日付
   * @param dateDelimiter 日付の区切り文字
   */
  static toDateFormat(
    targetDate: Date = new Date(),
    dateDelimiter: string = '/'): string {
    const year = targetDate.getFullYear();
    const month = DateTime.toZeroPadding(targetDate.getMonth()+1);
    const day = DateTime.toZeroPadding(targetDate.getDate());
    return `${year}${dateDelimiter}${month}${dateDelimiter}${day}`;
  }

  /**
   * ゼロ埋め
   * @param targetNumber 対象値
   * @param targetDigit 対象桁数
   * @see https://rfs.jp/sb/javascript/js-lab/zeropadding.html
   */
  static toZeroPadding(
    targetNumber: number,
    targetDigit: number = 2){
    return (Array(targetDigit).join('0') + targetNumber).slice(-targetDigit);
  }  
}

【１】Moment

標準の Date 以外で調べてみると Moment についてヒットする。
ただ、このライブラリの公式サイトを見ると、プロジェクトが終わりらしい。

公式サイト

https://momentjs.com/docs/

より抜粋
~~~~~~~~~~~~~~~~~~
We now generally consider Moment to be a legacy project in maintenance mode.
It is not dead, but it is indeed done.
~~~~~~~~~~~~~~~~~~

代替
https://momentjs.com/docs/#/-project-status/recommendations/

には、以下のライブラリを推奨している。

・Luxon
・Day.js
・date-fns
・js-Joda
・No Library ... 「【０】標準 Date()」

ライブラリ比較

https://www.npmtrends.com/dayjs-vs-date-fns-vs-luxon-vs-moment-vs-day
比較サイト
https://github.com/you-dont-need/You-Dont-Need-Momentjs
https://qiita.com/yagi_suke/items/2848c8981ea6d9f26587
https://zenn.dev/imaginelab/articles/68de83f4948fe2 https://ichi.pro/saiko-no-moment-js-no-daitai-103330074436075

【２】Luxon (ラクソン)

* 作者が Moment の 貢献者の方。

https://blog.ojisan.io/luxon-tukattemita

より、抜粋
~~~~~~~~~~~~~
 + デフォルトインポートした関数を使えない
 + 比較関数がない
~~~~~~~~~~~~~

公式サイト
https://moment.github.io/luxon/
参考文献
https://qiita.com/bobu_web/items/2cecc3fdb7d2b0942ef1

【３】Day.js

https://qiita.com/yagi_suke/items/2848c8981ea6d9f26587

の方が最終的に採用されたライブラリ

* 最軽量
* 詳細は、以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2021/01/31/213123

公式サイト
https://day.js.org/

【４】date-fns

https://zenn.dev/imaginelab/articles/68de83f4948fe2

の方が最終的に採用されたライブラリ

* 人気は、Momentの次。
* 公式サイト曰く「Date版 Lodash」
 => Lodash については、以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2021/01/23/000000

* 特徴としたら、標準の Date() を元に
 ユーティリティ関数を用意してくれる感じ
* Version(v1.X系 と v2.X系)によって、挙動が変わるので
　導入する際は注意が必要。
=> 詳細は、以下の関連記事を参照のこと。

date-fns ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2021/01/30/232708

公式サイト
https://date-fns.org/
参考文献
https://qiita.com/suin/items/296740d22624b530f93a
https://co.bsnws.net/article/195

【５】js-Joda

* 「If you are familiar with java.time, Joda-Time, or Noda Time, you will find js-Joda comparable.」
 ⇒ 意訳：java.time, Joda-Time, Noda Time を慣れてたら、使いやすいだろう
* 日本語で参考になるサイトはほぼ皆無

公式サイト
https://js-joda.github.io/js-joda/

関連記事

JavaScript での 日付 / 日時 の扱い
https://dk521123.hatenablog.com/entry/2018/08/02/213438
date-fns ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2021/01/30/232708
Day.js ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2021/01/31/213123
Lodash ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2021/01/23/000000