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

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

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

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

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

import { formatDistance, format } from "date-fns"
import { ja } from "date-fns/locale"

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

const date = "01 Feb 2022 06:01:00 GMT+0900"

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

let time = formatDistance(new Date(), Date.parse(date), {
  locale: ja,
})

一度、console.logtimeを確認してみましょう。

image2

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

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

image3

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

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

image4

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

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

image5

約 1 年と表示されます。

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

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

import { formatDistance, format } from "date-fns"

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

if (time.indexOf("未満") !== -1) {
  time = "たった今"
} else if (time.indexOf("か月") !== -1 || time.indexOf("年") !== -1) {
  time = format(Date.parse(date), "yyyy年M月d日", {
    locale: ja,
  })
} else {
  time = time + "前"
}

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

return <h1>{time}</h1>

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

image6

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

image7

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

image8

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

ブログ一覧