Firebase

【Firebase】画面に表示されている日付を、 SNSのように〇〇時間前にする

作成日：2022年03月10日

更新日：2022年03月11日

前回は、Firestore Database に保存しているデータを基に、React でチャット画面を作成しました。

【Firebase】Firestore Databaseに保存しているデータを基に、Reactでチャット画面を作成する

今回は、画面に表示されている日付を、 SNS のように〇〇時間前にします。

現在は、投稿した日付が表示されています。

こちらを、1 分未満なら『たった今』、1 ヶ月未満なら『〇〇前』、1 ヶ月以上なら日付を表示させます。

基本は、以前紹介した『Date-Fns を使って、◯ 分前や ◯ 時間前を表示する方法』になぞって実装します。

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

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

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

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

条件分けするために、time関数を作成します。

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

tsx
const time = (date: Timestamp) => {
  let timestamp = formatDistance(new Date(), date.toDate(), {
    locale: ja,
  });
  return timestamp;
};

JSX で日付を表示していたところに、time関数を使用します。

tsx
<Box>
  <Typography sx={{ p: 1, background: "#dddddd", borderRadius: 1 }}>
    {message.text}
  </Typography>
  <Typography sx={{ fontSize: 12 }}>{time(message.createdAt)}</Typography>
</Box>

ブラウザで確認してみましょう。

日付が、経過した時間へ変更されました。

試しにメッセージを送信すると、

『1 分未満』と表示されました。

1 分未満なら『たった今』、1 ヶ月未満なら『〇〇前』、1 ヶ月以上なら日付を表示させるように条件分けします。

つまり、『未満』が含まれていたら『たった今』、『か月』や『年』が表示されていたら日付、それ以外は、〇〇前と表示するようにします。

tsx
const time = (date: Timestamp) => {
  let timestamp = formatDistance(new Date(), date.toDate(), {
    locale: ja,
  });
  if (timestamp.indexOf("未満") !== -1) {
    return (timestamp = "たった今");
  } else if (
    timestamp.indexOf("か月") !== -1 ||
    timestamp.indexOf("年") !== -1
  ) {
    return (timestamp = format(date.toDate(), "yyyy年M月d日", {
      locale: ja,
    }));
  } else {
    return (timestamp = timestamp + "前");
  }
};