【JavaScript】「moment-timezone」を使って○日前の表示を実装する

タイトル通り、JavaScript で日付データを「○日前」や「○時間前」などの表記で表示する方法についてです。
調べたところ、「moment-timezone」というライブラリを使えば簡単に実装できるとのことだったので、その手順をまとめます。

参考にさせていただいた記事はこちらから。

JSでの何分前、何日前の表示は moment.js におまかせ [BitScheduler開発日誌] – Qiita
https://qiita.com/isatan@github/items/27df4df54d31f76c2683

 

まずライブラリを下記のコマンドでインストールします。

npm install moment moment-timezone --save

なお、既に moment.js をインストールしている場合は、moment-timezone のみのインストールでOKです。

上記が終わったら、実装したいファイルにまず下記の 2行をインポートします。

import moment from 'moment-timezone';
import 'moment/locale/ja';

あとは下記のように記述すればOKです!

const date = moment.tz([変換したい日付データ], 'Asia/Tokyo');
date.fromNow();

そうすれば、現在のデータと比較して、自動的に「○時間前」や「○日前」などが表示されます!
これ非常に便利です…!
プロジェクトに Twitter や Instagram など SNS のタイムラインのような機能があるので実装したかったのですが、本当にお手軽でした!

なお、import 'moment/locale/ja'; を追加しないと英語表記になったので、ご注意ください。

 

以上、JavaScript で「moment-timezone」を使って○日前の表示を実装する方法でした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG