では「相対時間と日付（例: ‘3日前 10/23 14:30’）を組み合わせる方法」を作ってみましょう。
ゴール
- SNS風の「◯日前」などの相対表現
- さらに「日付＋時刻」を併記
- 例:
3日前 10/23 14:30/yesterday Oct 23, 14:30
実装例
function timeAgoWithDate(date, lang = 'ja') {
const now = new Date();
const diffMs = now - date;
const diffSec = Math.floor(diffMs / 1000);
const rtf = new Intl.RelativeTimeFormat(lang, { numeric: 'auto' });
// 相対時間
let relative;
if (diffSec < 60) {
relative = rtf.format(-diffSec, 'second');
} else if (diffSec < 3600) {
relative = rtf.format(-Math.floor(diffSec / 60), 'minute');
} else if (diffSec < 86400) {
relative = rtf.format(-Math.floor(diffSec / 3600), 'hour');
} else if (diffSec < 172800) {
relative = lang === 'ja' ? '昨日' : 'yesterday';
} else if (diffSec < 2592000) {
relative = rtf.format(-Math.floor(diffSec / 86400), 'day');
} else if (diffSec < 31536000) {
relative = rtf.format(-Math.floor(diffSec / 2592000), 'month');
} else {
relative = rtf.format(-Math.floor(diffSec / 31536000), 'year');
}
// 日付＋時刻のフォーマット
const dateFormatter = new Intl.DateTimeFormat(lang === 'ja' ? 'ja-JP' : 'en-US', {
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
const exactDate = dateFormatter.format(date);
return `${relative} ${exactDate}`;
}
// 実行例
console.log(timeAgoWithDate(new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), 'ja'));
// "3日前 10/23 18:54" など
console.log(timeAgoWithDate(new Date(Date.now() - 26 * 60 * 60 * 1000), 'en'));
// "yesterday 10/25, 18:54"
ポイント
- 相対時間は
Intl.RelativeTimeFormat - 日付＋時刻は
Intl.DateTimeFormat - 両方を組み合わせることで「いつ頃か」と「正確な日付・時刻」を同時に伝えられる
💡 これで「SNS風の相対時間 + 日付＋時刻」表示が完成しました。
実務ではニュース記事やSNS投稿のタイムスタンプにとても便利です。
