では「Intl.RelativeTimeFormat を使って分・時間・月など、さまざまな単位で相対時間を表示する方法」を見てみましょう。
Intl.RelativeTimeFormat の基本
format(value, unit)で相対時間を表現valueが 負の数 → 過去（◯日前、◯時間前）valueが 正の数 → 未来（◯日後、in ◯ hours）unitは'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year'など
例：日本語と英語での比較
// 日本語
const rtfJa = new Intl.RelativeTimeFormat('ja-JP', { numeric: 'auto' });
console.log(rtfJa.format(-5, 'minute')); // "5分前"
console.log(rtfJa.format(2, 'hour')); // "2時間後"
console.log(rtfJa.format(-1, 'month')); // "先月"
console.log(rtfJa.format(3, 'month')); // "3か月後"
// 英語
const rtfEn = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });
console.log(rtfEn.format(-5, 'minute')); // "5 minutes ago"
console.log(rtfEn.format(2, 'hour')); // "in 2 hours"
console.log(rtfEn.format(-1, 'month')); // "last month"
console.log(rtfEn.format(3, 'month')); // "in 3 months"
実用関数：任意の差分を相対表現に
function relativeTimeDiff(fromDate, toDate = new Date(), lang = 'ja') {
const diffMs = fromDate - toDate;
const diffSec = Math.round(diffMs / 1000);
const rtf = new Intl.RelativeTimeFormat(lang, { numeric: 'auto' });
if (Math.abs(diffSec) < 60) {
return rtf.format(diffSec, 'second');
} else if (Math.abs(diffSec) < 3600) {
return rtf.format(Math.round(diffSec / 60), 'minute');
} else if (Math.abs(diffSec) < 86400) {
return rtf.format(Math.round(diffSec / 3600), 'hour');
} else if (Math.abs(diffSec) < 2592000) {
return rtf.format(Math.round(diffSec / 86400), 'day');
} else if (Math.abs(diffSec) < 31536000) {
return rtf.format(Math.round(diffSec / 2592000), 'month');
} else {
return rtf.format(Math.round(diffSec / 31536000), 'year');
}
}
// 実行例
console.log(relativeTimeDiff(new Date(Date.now() - 5 * 60 * 1000), new Date(), 'ja'));
// "5分前"
console.log(relativeTimeDiff(new Date(Date.now() + 2 * 60 * 60 * 1000), new Date(), 'en'));
// "in 2 hours"
console.log(relativeTimeDiff(new Date('2025-07-01'), new Date('2025-10-26'), 'ja'));
// "3か月前"
まとめ
- Intl.RelativeTimeFormat は秒〜年まで幅広い単位に対応
numeric: 'auto'を使うと「昨日」「先月」「来年」など自然な表現に- 実務では「記事の投稿日」「イベントまでの残り時間」「配送予定」などに大活躍
💡 さらに発展させると、SNS風に「◯分前」「◯時間前」「昨日」などを自動で切り替えるタイムライン表示も作れます。
