では「SNS風の ‘◯分前 / ◯時間前 / 昨日’ 表示」を作ってみましょう。
ゴール
- 投稿やイベントの時刻を「◯分前」「◯時間前」「昨日」「3日前」などに変換
- TwitterやInstagramのようなタイムライン表示を実現
実装例
function timeAgo(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' });
if (diffSec < 60) {
return rtf.format(-diffSec, 'second'); // 数秒前
} else if (diffSec < 3600) {
return rtf.format(-Math.floor(diffSec / 60), 'minute'); // ◯分前
} else if (diffSec < 86400) {
return rtf.format(-Math.floor(diffSec / 3600), 'hour'); // ◯時間前
} else if (diffSec < 172800) {
return lang === 'ja' ? '昨日' : 'yesterday'; // 特別扱い
} else if (diffSec < 2592000) {
return rtf.format(-Math.floor(diffSec / 86400), 'day'); // ◯日前
} else if (diffSec < 31536000) {
return rtf.format(-Math.floor(diffSec / 2592000), 'month'); // ◯か月前
} else {
return rtf.format(-Math.floor(diffSec / 31536000), 'year'); // ◯年前
}
}
// 実行例
console.log(timeAgo(new Date(Date.now() - 45 * 1000), 'ja')); // "45秒前"
console.log(timeAgo(new Date(Date.now() - 5 * 60 * 1000), 'ja')); // "5分前"
console.log(timeAgo(new Date(Date.now() - 2 * 60 * 60 * 1000), 'ja')); // "2時間前"
console.log(timeAgo(new Date(Date.now() - 26 * 60 * 60 * 1000), 'ja')); // "昨日"
console.log(timeAgo(new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), 'en')); // "3 days ago"
ポイント
- Intl.RelativeTimeFormat をベースにしつつ、「昨日」だけ特別扱い
- SNS風の「相対的な時間表現」を自然に実現
- 言語切り替えも簡単にできる
💡 さらに発展させると、「◯日前」ではなく「◯日前の◯時◯分」まで表示する」など、詳細表示と組み合わせることも可能です。
