[Moment.js] JavaScriptで日付を表示する

JavaScriptで日付表示を行うことができるライブラリを紹介します。

Moment.js
https://momentjs.com/

Moment Timezone
https://momentjs.com/timezone/

今回使用したJavaScriptライブラリのバージョンは下記の通りです。

```Markdown:JavaScriptライブラリ
Bootstrap: 3.3.7
jQuery: 3.3.1
moment: 2.24.0
moment-timezone: 0.5.25-2019a
```

# Moment.js とは

JavaScript で文字列からオブジェクトに変換したり、オブジェクトから指定したフォーマット文字列に変換したりできます。また、月末日時や加算減算が簡単に取得することができます。

# ライブラリの読み込み

`moment.min.js`を参照します。

```HTML:
<script type="text/javascript" src="../lib/moment/moment.min.js"></script>
```

[デモはこちら](https://yunbow.github.io/sample-moment-js/01/)
[ソースファイルはこちら](https://github.com/yunbow/sample-moment-js/tree/master/01/)

# 基本的な使い方
## 入力

### 現在時刻を入力する
```JavaScript:
moment(); // 2019-05-15T15:15:50.900Z
```

### JSON型文字列で入力する
```JavaScript:
moment('2018-12-25T01:30:00.123Z'); // 2018-12-25T01:30:00.123Z
```

### 指定したフォーマットで入力する
```JavaScript:
moment('2018-12-25', 'YYYY-MM-DD'); // 2018-12-24T15:00:00.000Z
```

### 入力した文字列が正しいことを判定する
```JavaScript:
moment('2018-12-25', 'YYYY-MM-DD').isValid(); // => true
moment('xxx', 'YYYY-MM-DD').isValid(); // => false
```

### 特定の値を指定して入力する
```JavaScript:
moment({year:2018,month:11,day:25,hour:1,minute:30,second:0,millsecond:123}); // 2018-12-24T16:30:00.000Z
moment('2018-12-25', 'YYYY-MM-DD').set('year', 2015); // 2015-12-24T15:00:00.000Z
moment('2018-12-25', 'YYYY-MM-DD').set('month', 0); // 2018-01-24T15:00:00.000Z (0から始まる)
moment('2018-12-25', 'YYYY-MM-DD').set('date', 1); // 2018-11-30T15:00:00.000Z
moment('2018-12-25', 'YYYY-MM-DD').set('day', 1); // 2018-12-23T15:00:00.000Z (曜日)
moment('2018-12-25', 'YYYY-MM-DD').set('hour', 1); // 2018-12-24T16:00:00.000Z
moment('2018-12-25', 'YYYY-MM-DD').set('minute', 1); // 2018-12-24T15:01:00.000Z
moment('2018-12-25', 'YYYY-MM-DD').set('second', 1); // 2018-12-24T15:00:01.000Z
moment('2018-12-25', 'YYYY-MM-DD').set('millisecond', 1); // 2018-12-24T15:00:00.001Z
```

### 月初め、月末を入力する
```JavaScript:
moment('2018-12-25', 'YYYY-MM-DD').startOf('month'); // 2018-11-30T15:00:00.000Z
moment('2018-12-25', 'YYYY-MM-DD').endOf('month'); // 2018-12-31T14:59:59.999Z
```

## 出力

### Date型オブジェクトで出力する
```JavaScript:
moment().toDate(); // => Wed May 15 2019 13:03:18 GMT+0900 (日本標準時)
```

### JSON型文字列で出力する
```JavaScript:
moment().toJSON(); // => 2019-05-15T04:03:18.900Z
```

### 指定したフォーマットで出力する
```JavaScript:
moment().format('YYYY-MM-DD'); // => 2019-05-15
moment().format(); // => 2019-05-15T13:03:18+09:00 (ISO8601)
```

### 特定の値を出力する
```JavaScript:
moment().get('year'); // => 2019
moment().get('month'); // => 4 (0から始まる)
moment().get('date'); // => 15
moment().get('day'); // => 3 (曜日)
moment().get('hour'); // => 23
moment().get('minute'); // => 48
moment().get('second'); // => 8
moment().get('millisecond'); // => 514
```


## 計算

### 加算する
```JavaScript:
moment('2018-12-25', 'YYYY-MM-DD').add(1, 'months'); // 2019-01-24T15:00:00.000Z
```

### 減算する
```JavaScript:
moment('2018-12-25', 'YYYY-MM-DD').subtract(1, 'months'); // 2018-11-24T15:00:00.000Z
```

### 2つの日付の差分を取得する
```JavaScript:
moment('2018-12-25', 'YYYY-MM-DD').diff(moment('2017-12-25', 'YYYY-MM-DD'), 'year'); // => 1
moment('2018-12-25', 'YYYY-MM-DD').diff(moment('2017-12-25', 'YYYY-MM-DD'), 'month'); // => 12
moment('2018-12-25', 'YYYY-MM-DD').diff(moment('2017-12-25', 'YYYY-MM-DD'), 'days'); // => 365
```

## 比較
### 2つの日付が等しいことを判定する
```JavaScript:
moment('2018-12-25', 'YYYY-MM-DD').isSame(moment('2018-12-25', 'YYYY-MM-DD'), 'month'); // => true
```

### より小さいことを判定する
```JavaScript:
moment('2018-12-25', 'YYYY-MM-DD').isBefore(moment('2019-01-25', 'YYYY-MM-DD'), 'month'); // => true
```

### より大きいことを判定する
```JavaScript:
moment('2018-12-25', 'YYYY-MM-DD').isAfter(moment('2018-11-25', 'YYYY-MM-DD'), 'month'); // => true
```

### 以下であることを判定する
```JavaScript:
moment('2018-12-25', 'YYYY-MM-DD').isSameOrBefore(moment('2018-12-25', 'YYYY-MM-DD'), 'month'); // => true
```

### 以上であることを判定する
```JavaScript:
moment('2018-12-25', 'YYYY-MM-DD').isSameOrAfter(moment('2018-12-25', 'YYYY-MM-DD'), 'month'); // => true
```

# 多言語化
多言語化対応している出力については、別途ライブラリファイルを読み込む必要があります。

## ライブラリの読み込み

`moment-with-locales.min.js`を参照します。

```HTML:index.html
<script type="text/javascript" src="../lib/moment/moment.min.js"></script>
<script type="text/javascript" src="../lib/moment/moment-with-locales.min.js"></script>
```

[デモはこちら](https://yunbow.github.io/sample-moment-js/02/)
[ソースファイルはこちら](https://github.com/yunbow/sample-moment-js/tree/master/02/)

### ロケールを変更する
```JavaScript:
moment.locale(lang);
```

### 曜日を出力する
```JavaScript:
moment().format('YYYY-MM-DD(dddd)'); // => 2019-05-15(Wednesday)
```

### 午前/午後を出力する
```JavaScript:
moment().format('YYYY-MM-DD a'); // => 2019-05-15 pm
```

### ～前を出力する 
```JavaScript:
moment('2018-12-25', 'YYYY-MM-DD').fromNow(); // => 5 months ago
```

### カレンダー形式で出力する
```JavaScript:
moment('2018-12-25', 'YYYY-MM-DD').calendar(); // => 12/25/2018
```

# タイムゾーン
タイムゾーンに対応する場合は、別途ライブラリファイルを読み込む必要があります。

## ライブラリの読み込み

下記のファイルを参照します。
`moment-timezone.min.js`
`moment-timezone-with-data.min.js`
`moment-timezone-with-data-2012-2022.min.js`

```HTML:index.html
<script type="text/javascript" src="../lib/moment/moment.min.js"></script>
<script type="text/javascript" src="../lib/moment/moment-with-locales.min.js"></script>
<script type="text/javascript" src="../lib/moment-timezone/moment-timezone.min.js"></script>
<script type="text/javascript" src="../lib/moment-timezone/moment-timezone-with-data.min.js"></script>
<script type="text/javascript" src="../lib/moment-timezone/moment-timezone-with-data-2012-2022.min.js"></script>
```

[デモはこちら](https://yunbow.github.io/sample-moment-js/03/)
[ソースファイルはこちら](https://github.com/yunbow/sample-moment-js/tree/master/03/)

### UTCに変換する
```JavaScript:
moment().utc(); // Wed May 15 2019 15:36:59 GMT+0000
```

### 指定したタイムゾーンに変換する
```JavaScript:
moment().tz('Asia/Tokyo'); // Thu May 16 2019 00:36:41 GMT+0900
```

以上です。