Reactでmoment.jsを使う

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

<h2>momentはmutable</h2>

```react
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>
  )
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/a7a3ed0e-7704-75db-3d5a-f3f4409c391e.png)
momentDate.add(1, "week");はmomentから１週が経った日付を返します。
momentはmutableなので、newMomentDateを生成時点でmomentDateの値も変わってしまいます。
もし、元の値はimmutableにするなら、clone()を使い、値をコピーして使用すれば良いです。

<h2>momentは閏年対応している</h2>

```react
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日になることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/e7614b85-8a3c-5570-73a2-feaecca595a4.png)

<h2>選択した日付の曜日出力</h2>

```react
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を意味します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/ef7b22bc-febd-5bad-1e01-a0155191aab0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/28fb6d18-f1f5-a093-c9bc-0afe76a8263d.png)
<h2>diff</h2>

```react
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>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/41c39046-bc5d-9a7a-4f72-4c396de8a032.png)
```react:diff使い方
moment(時間).diff(moment(時間), "単位")
```


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/4aab5358-0854-9192-c65b-43d031a4a767.png)


recommended date library↓

https://momentjs.com/docs/