では「Intl.RelativeTimeFormat を使って ‘◯日前’ や ‘in ◯ days’ を表示する方法」を見てみましょう。
Intl.RelativeTimeFormat とは
- JavaScript の組み込み国際化 API
- 「3日前」「in 2 days」「5時間前」など、相対的な時間表現を言語ごとに自動で整形してくれる
基本の使い方
// 日本語
const rtfJa = new Intl.RelativeTimeFormat('ja-JP', { numeric: 'auto' });
console.log(rtfJa.format(-3, 'day')); // "3日前"
console.log(rtfJa.format(2, 'day')); // "2日後"
// 英語
const rtfEn = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });
console.log(rtfEn.format(-3, 'day')); // "3 days ago"
console.log(rtfEn.format(2, 'day')); // "in 2 days"
👉 numeric: 'auto' を指定すると「1日前」ではなく「昨日」「明日」といった自然な表現も出してくれます。
実用例：日付の差を計算して相対表現に
function relativeDate(targetDate, lang = 'ja') {
const now = new Date();
const diffMs = targetDate - now;
const diffDays = Math.round(diffMs / (1000 * 60 * 60 * 24));
const rtf = new Intl.RelativeTimeFormat(lang, { numeric: 'auto' });
return rtf.format(diffDays, 'day');
}
// 実行例
console.log(relativeDate(new Date('2025-10-29'), 'ja')); // "3日後"
console.log(relativeDate(new Date('2025-10-23'), 'ja')); // "3日前"
console.log(relativeDate(new Date('2025-10-29'), 'en')); // "in 3 days"
console.log(relativeDate(new Date('2025-10-23'), 'en')); // "3 days ago"
まとめ
- Intl.RelativeTimeFormat で「◯日前」「in ◯ days」を多言語対応で簡単に実現できる
numeric: 'auto'を使うと「昨日」「明日」など自然な表現に- 実務では「記事の投稿日」「注文の配送予定日」「イベントまでの日数」などに便利
💡 さらに発展させると、unit を 'hour' や 'minute' に変えて「◯時間前」「in 5 minutes」なども表現できます。
