では「1年以内なら月日だけ、1年以上前なら年月日を表示する方法」を作ってみましょう。
ゴール
- 投稿やイベントが 1年以内 → 「◯日前 10/23 14:30」 のように 月日＋時刻
- 1年以上前 → 「2024/10/23 14:30」 のように 年月日＋時刻
実装例
function timeAgoOrFullDate(date, lang = 'ja') {
const now = new Date();
const diffMs = now - date;
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
const diffYears = diffDays / 365;
const rtf = new Intl.RelativeTimeFormat(lang, { numeric: 'auto' });
// 相対表現（1年以内）
if (diffYears < 1) {
let relative;
if (diffDays === 0) {
const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
if (diffHours === 0) {
const diffMinutes = Math.floor(diffMs / (1000 * 60));
relative = rtf.format(-diffMinutes, 'minute');
} else {
relative = rtf.format(-diffHours, 'hour');
}
} else if (diffDays === 1) {
relative = lang === 'ja' ? '昨日' : 'yesterday';
} else {
relative = rtf.format(-diffDays, 'day');
}
// 月日＋時刻
const dateFormatter = new Intl.DateTimeFormat(lang === 'ja' ? 'ja-JP' : 'en-US', {
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
return `${relative} ${dateFormatter.format(date)}`;
}
// 1年以上前 → 年月日＋時刻
const fullFormatter = new Intl.DateTimeFormat(lang === 'ja' ? 'ja-JP' : 'en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
return fullFormatter.format(date);
}
// 実行例
console.log(timeAgoOrFullDate(new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), 'ja'));
// "3日前 10/23 18:55" など
console.log(timeAgoOrFullDate(new Date('2023-10-20T14:30:00'), 'ja'));
// "2023/10/20 14:30"
console.log(timeAgoOrFullDate(new Date('2023-10-20T14:30:00'), 'en'));
// "10/20/2023, 02:30 PM"
ポイント
- 1年以内 → 相対表現 + 月日（ユーザーに「最近感」を伝える）
- 1年以上前 → 年月日（古い投稿は正確な日付の方が分かりやすい）
Intl.DateTimeFormatを使うので、言語ごとに自動でフォーマットが切り替わる
💡 これで「SNS風の相対時間表示」に 実用的なルール（1年以上前は絶対日付表示） を加えられました。
実務ではニュース記事やブログのタイムスタンプにとても便利です。
