ロゴテキスト ロゴ

    Moment.jsからDay.jsに切り替える

    Moment.jsからDay.jsに切り替える

    Moment.jsという日付を扱うのに特化したjsのライブラリがメンテナンスモードになったため、 代替えとして上げられる Day.js に以降する事にしました。

    検証した環境

    1 yarn 1.22.4
    2 Moment.js 2.28.0 削除前
    3 Day.js 1.9.3 導入後

    経緯

    2020年の9月にMoment.jsがメンテナンスモードに入る事が発表されました。 Moment.jsがメンテナンスモードへーー新機能開発は行わず | OSDN Magazine



    Moment.jsは日付を扱うjsのパッケージの中でデファクトスタンダードになっていたイメージで、 実際乗り換え先と言われる、Day.js や Luxon.js よりメンテナンスモードに入る事が発表され1ヶ月経った今でもはるかにダウンロードされています。

    https://www.npmtrends.com/luxon-vs-dayjs-vs-moment

    Moment.jsはDL数がすごい!


    ただ、いろんな理由があってメンテナンスモードに入る、 という事で今後の事を考えると別のパッケージを使った方がいいな、と。



    私が今回必要とした機能としては、

    • 文字列(ex: 2020-10-13 09:53:43)から簡単にフォーマット変換が出来ること
    • ソートがしやすいこと

    という要件でした。

    軽量で以前の職場の同僚の方からおすすめされていた事もありDay.jsを使ってみる事にしました。

    Day.jsに切り替える

    Day.jsを導入する

    先にday.jsをインストールします。TypeScriptだとしても以下の1行でOKです!

    $ yarn add dayjs

    Moment.jsから切り替える

    文字列(ex: 2020-10-13 09:53:43)から指定したフォーマットの日付の文字列を取得するのは以下のようになります。


    Moment.jsの場合

    import moment from 'moment'
     
    export const formatDate = (str: string) => {
      return moment(str).format('YYYY.MM.DD')
    }

    Day.jsの場合

    import dayjs from 'dayjs'
     
    export const formatDate = (str: string) => {
      return dayjs(str).format('YYYY.MM.DD')
    }

    ほぼ構文一緒でいけますね!




    注意点としては公式を見るとTypeScript版は以下のように import を行う、と書いていますが、

    Typescript · Day.js

    import * as dayjs from 'dayjs'
    dayjs().format()

    私の環境だと ↑ の書き方をすると dayjs in not a function と怒られてしまいました。


    ドキュメントを見るタイミングが良くなかったかな?

    Moment.jsを削除する

    まだMoment.jsが残っている状態なので削除します


    削除前の確認

    $ npm ls --depth=0 | grep moment
    15:├── moment@2.28.0

    削除を実行

    $ yarn remove moment

    削除後の確認

    $ npm ls --depth=0 | grep moment
    # => 何も表示されなくなる
    プロフィールの背景画像 プロフィール画像
    Yuki Takara
    都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。