moment.jsで「〜時間前」を表示させる

#はじめに
moment.jsを使用して、指定時刻から計算して「〜日前」「〜時間前」を表示させる。

#moment().fromNow()
###import

import Moment from 'moment';

指定した時刻から現在の時刻までの差を計算する。

Moment('2020-01-01T10:10:30.900Z').fromNow();

#言語を設定する
このままでは「〜hour ago」など英語で表示されるので、言語を設定する。

Moment.locale( 'ja' );

#時差をなくす
このままでは、UTC(世界標準時間)が適応され、日本からは＋9時間の時刻が表示される。
moment-timezoneを使用する。

###install

npm install moment-timezone

###import

import MomentTimezone from 'moment-timezone';

###UTCの時刻を取得

let dateTimeUtc = MomentTimezone.tz('2020-01-01T10:10:30.900Z', 'UTC');

###デバイス（ブラウザ）で設定されているタイムゾーンを取得
海外でも使用する可能性があればデバイス（ブラウザ）で設定されているタイムゾーンを取得する。
日本のみで使用の場合は不要。

let deviceTz = Intl.DateTimeFormat().resolvedOptions().timeZone;

###指定したタイムゾーンに変換
デバイス（ブラウザ）と同じタイムゾーンに変換。

let upDate = MomentTimezone(dateTimeUtc).tz(deviceTz).format('YYYY-MM-DDTHH:mm:ss.sssZ');

日本のみで使用の場合は'Asia/Tokyo'を直接入力。

let upDate = MomentTimezone(dateTimeUtc).tz('Asia/Tokyo').format('YYYY-MM-DDTHH:mm:ss.sssZ');

###moment().fromNow()に入れる

let lastUpDate = Moment(upDate).fromNow();

#まとめ

import Moment from 'moment';
import MomentTimezone from 'moment-timezone';

// 言語を日本語に設定
Moment.locale( 'ja' );
// デバイスのタイムゾーンを取得
let deviceTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
// UTCの時刻を取得
let dateTimeUtc = MomentTimezone.tz('2020-01-01T10:10:30.900Z', 'UTC');
// 指定したタイムゾーンに変換
let upDate = MomentTimezone(dateTimeUtc).tz(deviceTz).format('YYYY-MM-DDTHH:mm:ss.sssZ');
// 「〜日前」「〜時間前」を表示
let lastUpDate = Moment(upDate).fromNow();

#参考サイト
https://stackoverflow.com/questions/53017772/moment-js-parse-date-time-ago