【React】date-fnsを使って、◯分前や◯時間前を表示する方法

SNS の時刻表示でよくある、React で ◯ 分前や ◯ 時間前を画面に表示したい時、どうすればいいでしょうか。

Node.js のライブラリである、date-fns を使って簡単に表示することができます。

まずは、ターミナルでプロジェクトのディレクトリに移動し、npm install --save date-fnsを実行します。

インストール完了後、現在時刻からどのくらい経っているかを表示するために、date-fnsからformatDistanceをインポートします。

また、日本語にするために、date-fns/localeからjaをインポートします。

通常 API から timestamp などを取得するのですが、今回はテストとして基準となる日付を設定します。

formatDistanceの第一引数に現在時刻、第二引数に基準の日付、第三引数にlocateでjaを指定します。

一度、console.logでtimeを確認してみましょう。

今日の日付が 2022 年 2 月 23 日で、基準の日付が 2022 年 2 月 1 日を設定しているので、22 日経過しているということが表示されました。

date を 1 分未満に設定すると、

1 分未満と表示されます。

また、date の Feb を Jan に変更すると、

約 2 か月と表示されます。

date の 2022 を 2021 に変更すると、

約 1 年と表示されます。

この表示を基に if を使って、1 分未満の場合『たった今』、1 ヶ月を超えた場合、日付を表示するようにします。

日付を表示するために、date-fnsからformatをインポートします。

format の第一引数に基準の日付、第二引数に yyyy 年 M 月 d 日、第三引数にlocateでjaを指定します。

ブラウザに表示するようにしましょう。

date が現在時刻から 1 分未満の場合は、

date が現在時刻から 1 ヶ月未満の場合は、

date が現在時刻から 1 ヶ月を超える場合は、

取得する時間によって、表示を変えることができました。