Reactでmoment.jsを使う

moment.js

JavaScriptで日付と時間を操作して作業するのに役立つJavaScriptライブラリです。 Moment.jsはJavaScriptで日付および時間に関するライブラリの中で最も古いです。

momentはmutable

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

export default function MomentExample() {
    const momentDate = moment();
    const newMomentDate = momentDate.add(1, "weeks"); 
    const cloneNewMomentDate = newMomentDate.clone().add(1, "weeks"); 
  return (
    <div>
        <h1>Moment</h1>
        <div>Immutable Check</div>
        <div>
            {momentDate.format()}
            <br />
            {newMomentDate.format()}
            <br />
            {cloneNewMomentDate.format()}
        </div>
        <br />
 
    </div>
  )
}

momentDate.add(1, "week");はmomentから１週が経った日付を返します。
momentはmutableなので、newMomentDateを生成時点でmomentDateの値も変わってしまいます。
もし、元の値はimmutableにするなら、clone()を使い、値をコピーして使用すれば良いです。

momentは閏年対応している

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

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

日付から日付をひく時はsubtract()メソッドを使います。
2017年度は閏年の年なので、365日を引くと1月2日になることがわかります。

選択した日付の曜日出力

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

export default function MomentExample() {
    const [day, setDay] = useState("");
    const handleBirthDayChange = (event) => {
        setDay(moment(event.target.value, "YYYY-MM-DD").format("dddd"));
    }
  return (
    <div>
        <div>
            <input type="date" onChange={handleBirthDayChange} />
            <div>何曜日？</div>
            <div>{day}</div>
        </div>
  )
}

カレンダーで選んだ日付の曜日を出力するロジックになります。
moment(event.target.value, "YYYY-MM-DD")は,event.target.valueが"YYYY-MM-DD"形式という意味で、
ddddはdayを意味します。

diff

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

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

diff使い方

moment(時間).diff(moment(時間), "単位")

最後に

最初に言ったように、momentライブラリはかなり古い日付ライブラリであり、最もよく使用されている日付ライブラリでした。
しかし、今はあまり使われていません。
その理由としては momentライブラリはreactよりサイズが大きいライブラリなので、サービスのサイズがすごく大きくなります。
そしてmutableに関する問題も最近のトレンドには満たされていないため、それを修正しようとしても既存のユーザーに大きな影響を及ぼすため、追加修正はないそうです。
そのため、他のライブラリをお勧めしています。 他のライブラリでも使用する文法がmomentの文法とほぼ似ているので、今日学んだことをうまく活用すればいいと思います。

recommended date library↓