相対時間フォーマット（ago、in、just now）

相対時間フォーマット

「5分前」「2時間後」「昨日」のような相対時間表示は、最近のイベントに対して絶対的なタイムスタンプよりも直感的です。すべてのソーシャルメディアプラットフォーム、チャットアプリ、通知システムがこのパターンを使用しています。

Intl.RelativeTimeFormat（ネイティブJavaScript）

const rtf = new Intl.RelativeTimeFormat("ja", { numeric: "auto" });

rtf.format(-1, "day");     // "昨日"
rtf.format(-5, "minute");  // "5分前"
rtf.format(3, "hour");     // "3時間後"
rtf.format(0, "day");      // "今日"

ライブラリソリューション

ライブラリ	関数	例
date-fns	formatDistanceToNow()	"5 minutes ago"
Day.js	dayjs().fromNow()	"5 minutes ago"
moment.js	moment().fromNow()	"5 minutes ago"

ベストプラクティス

1. ホバー/長押しで絶対時間を表示 — ユーザーが正確なタイムスタンプを確認できるようにする
2. 閾値後に更新を停止 — 7日または30日後に絶対日付に切り替え
3. 1分未満には「たった今」を使用 — 「0秒前」を避ける
4. リアルタイム更新を検討 — ライブフィードにはsetIntervalを使用
5. ロケールを尊重 — 適切な複数形ルールにIntl APIまたはライブラリi18nを使用