momentをdayjsに変えてみた

momentjsは日付ライブラリの中で一番古いライブラリで、最も使用される日付ライブラリです。
しかし大きさの問題や最新のトレンドを満たせない等の理由でアップデートが停止になりました。
その代わりに、日付ライブラリとして使用されるライブラリが「dayjs」「date-fns」「luxon」があります。
これらはmomentの使い方と似っているので、使い方を学習するのに時間をかけなくて良いです。

dayjsはimmutable

import React from 'react'
import moment from 'moment-timezone'
import "moment/locale/ja";
import { useState, useRef } from 'react'
import dayjs from "dayjs"
import "dayjs/locale/ja"

export default function MomentExample() {

    const momentDate = moment();
    const dayjsDate = dayjs();

    const newMomentDate = momentDate.add(11, "weeks");
    const newDayjsDate = dayjsDate.add(11, "weeks");

    const cloneNewMomentDate = newMomentDate.clone().add(1, "weeks");
    const cloneNewDayjsDate = newDayjsDate.clone().add(1, "weeks"); 
  return (
    <div>
        <h1>Day.js</h1>
        <div>
            Immutable Check
        </div>
        <div>
            {momentDate.format()}
            {dayjsDate.format()}
            <br />
            {newMomentDate.format()}
            {newDayjsDate.format()}
            <br />
            {cloneNewMomentDate.format()}
            {cloneNewDayjsDate.format()}
        </div>
    </div>
  )
}

momentjsはmutableのため、
const newMomentDate = momentDate.add(11, "weeks");　が実行されたらmomentDate値もnewMomentDateに変わっているしまいます。
しかし、dayjsはimmutableのため、
const newDayjsDate = dayjsDate.add(11, "weeks");　が実行されても、dayjsDateは変わりません。

dayjsも閏年対応している

import React from 'react'
import moment from 'moment-timezone'
import "moment/locale/ja";
import { useState, useRef } from 'react'
import dayjs from "dayjs"
import "dayjs/locale/ja"

export default function MomentExample() {
  return (
    <div>
        <div>Leap Year</div>
        <div>2017年 1月 1日 から1年 ひく :
            {moment("2017-01-01")
                .subtract(1, "year")
                .format()} 
            {dayjs("2017-01-01")
                .subtract(1, "year")
                .format()} 
        </div>
        <div>2017年 1月 1日 から365日 ひく :
            {moment("2017-01-01")
                .subtract(365, "day")
                .format()}
            {dayjs("2017-01-01")
                .subtract(365, "day")
                .format()} 
        </div>
    </div>
  )
}

dayjs.format()

import React from 'react'
import moment from 'moment-timezone'
import "moment/locale/ja";
import { useState, useRef } from 'react'
import dayjs from "dayjs"
import "dayjs/locale/ja"

export default function MomentExample() {
    const [day, setDay] = useState("");
    const birthDayRef = useRef(null);
    const handleBirthDayChange = (event) => {
        // setDay(moment(event.target.value, "YYYY-MM-DD").format("dddd")); 
        setDay(dayjs(event.target.value, "YYYY-MM-DD").format("dddd")); 
    }
  return (
    <div>
        <div>日本語表記</div>
        <div>{dayjs("10-17-2023").format("YYYY年 M月 D日")}</div>
        {/* <div>{dayjs("10-17-2023").format("YYYY年 M月 D日")}</div> */}
        <br />
        <div>
            <input type="date" ref={birthDayRef} onChange={handleBirthDayChange} />
            <div>何曜日？</div>
            <div>{day}</div>
        </div>
    </div>
  )
}

dayjs.format()使い方はmoment.format()と相違ありません。

dayjs.format()

import React from 'react'
import moment from 'moment-timezone'
import "moment/locale/ja";
import { useState, useRef } from 'react'
import dayjs from "dayjs"
import "dayjs/locale/ja"

export default function MomentExample() {
        <div>時間diff</div>
        <div>{`${dayjs("2023-02-23 03:00").diff(dayjs("2023-02-20 03:00"), "hours")}時間`}</div>
        {/* <div>{`${moment("2023-02-23 03:00").diff(moment("2023-02-20 03:00"), "hours")}時間`}</div> */}
  )
}

dayjs.diff()使い方はmoment.diff()と相違ありません。

dayjs.timezone()

import React from 'react'
import moment from 'moment-timezone'
import { useState, useRef } from 'react'
import "moment/locale/ja";
import dayjs from "dayjs"
import "dayjs/locale/ja"

// dayjs timezone定義
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
dayjs.locale("ja");
dayjs.extend(utc);
dayjs.extend(timezone);

export default function MomentExample() {
    <div>
        <div>Time Zone</div>
        <div>{moment.tz("2023-02-27 13:00:00", "American/New_York").add(1, "day").format()}</div>
        <div>{moment.tz("2023-02-27 13:00:00", "American/New_York").add(1, "day").format()}</div>
    </div>
  )
}

dayjsでtimezoneを使うには様々なmoduleをimportしておく必要があります。

// dayjs timezone定義
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
dayjs.locale("ja");
dayjs.extend(utc);
dayjs.extend(timezone);

補足

以下は日付ライブラリトレンド