Reactで、日時を「3分前」のように表示する方法

-3 minute "3 分前"
-10 second "10 秒前"
0 second "今"
-1 day "昨日"
-2 day "一昨日"
1 day "明日"
-1 week "先週"
-1 year "昨年"

"1 日前" "2 日前"

空白の文字コード: 33 20 5206 524d

"180 秒前"

const rtf = new Intl.RelativeTimeFormat('ja', { numeric: 'auto' });
const dateFormat = new Intl.DateTimeFormat('ja', { year: 'numeric', month: 'long', day: 'numeric' });

const MINUTE = 60 * 1000;
const HOUR = 60 * MINUTE;
const DAY = 24 * HOUR;

// Intl は「3 分前」のように数字のあとに空白を入れるので、取り除く
function format(value: number, unit: Intl.RelativeTimeFormatUnit): string {
  return rtf.format(value, unit).replace(/\s/g, '');
}

// その日の0時（端末のタイムゾーン）
function startOfDay(time: number): number {
  const d = new Date(time);
  return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
}

export function formatRelative(date: Date, now: number): string {
  const diff = date.getTime() - now; // 過去ならマイナス
  const abs = Math.abs(diff);

  if (abs < MINUTE) return format(0, 'second'); // 「今」
  if (abs < HOUR) return format(Math.trunc(diff / MINUTE), 'minute');
  if (abs < DAY) return format(Math.trunc(diff / HOUR), 'hour');

  // 日の単位は、カレンダーの上で何日違うかで数える
  const days = Math.round((startOfDay(date.getTime()) - startOfDay(now)) / DAY);
  if (Math.abs(days) < 7) return format(days, 'day');

  // 1週間より前は、日付で出す
  return dateFormat.format(date);
}

30秒前 → 今
3分前 → 3分前
59分30秒前 → 59分前
3時間前 → 3時間前
23時間前 → 23時間前
25時間前 → 昨日
34時間前 → 一昨日
4日と21時間前 → 5日前
10日前 → 2026年10月20日
30秒後 → 今
90秒後 → 1分後
27時間後 → 明日

24時間で割る   : -1 昨日

import { useEffect, useState } from 'react';
import { formatRelative } from './formatRelative';

const absolute = new Intl.DateTimeFormat('ja', { dateStyle: 'long', timeStyle: 'short' });

// 新しいものほど、こまめに表示を更新する
function updateInterval(age: number): number {
  if (age < 60 * 60 * 1000) return 15 * 1000; // 1時間以内：15秒ごと
  if (age < 24 * 60 * 60 * 1000) return 60 * 1000; // 1日以内：1分ごと
  return 60 * 60 * 1000; // それより前：1時間ごと
}

export function RelativeTime({ date }: { date: Date }) {
  const [now, setNow] = useState(() => Date.now());
  const interval = updateInterval(Math.abs(now - date.getTime()));

  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), interval);
    return () => clearInterval(id);
  }, [interval]);

  return (
    <time dateTime={date.toISOString()} title={absolute.format(date)}>
      {formatRelative(date, now)}
    </time>
  );
}

<time datetime="2026-10-29T23:55:00.167Z" title="2026年10月30日 8:55">5分前</time>

投稿直後    : 新しいコメント 今
投稿から60秒: 新しいコメント 1分前
投稿から120秒: 新しいコメント 2分前
投稿から180秒: 新しいコメント 3分前

23:59:30    : 新しいコメント 14時間前 / 5分前のコメント 15時間前 / 3時間前のコメント 17時間前 / 30時間前のコメント 昨日 / 10日前のコメント 2026年10月20日
翌日 0:59:30: 新しいコメント 15時間前 / 5分前のコメント 16時間前 / 3時間前のコメント 18時間前 / 30時間前のコメント 一昨日 / 10日前のコメント 2026年10月20日