では「ユーザーのロケール（ブラウザやOSの設定言語）を自動で使って表示を切り替える方法」を見てみましょう。
ゴール
- ユーザーが日本語環境なら「◯分前」「昨日」など日本語で表示
- 英語環境なら「5 minutes ago」「yesterday」など英語で表示
- コード内で
navigator.languageを使って自動判定
実装例（ブラウザ環境）
function timeAgoOrDateAuto(date, thresholdDays = 30) {
// ブラウザやOSの言語設定を取得
const lang = navigator.language || 'en-US';
const now = new Date();
const diffMs = now - date;
const diffSec = Math.floor(diffMs / 1000);
const diffDays = Math.floor(diffSec / 86400);
const rtf = new Intl.RelativeTimeFormat(lang, { numeric: 'auto' });
// 一定期間を過ぎたら絶対日付
if (diffDays >= thresholdDays) {
const dateFormatter = new Intl.DateTimeFormat(lang, {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
return dateFormatter.format(date);
}
// 相対表現
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.startsWith('ja') ? '昨日' : 'yesterday';
} else {
return rtf.format(-diffDays, 'day');
}
}
// 実行例
console.log(timeAgoOrDateAuto(new Date(Date.now() - 5 * 60 * 1000)));
// 日本語環境なら "5分前"、英語環境なら "5 minutes ago"
console.log(timeAgoOrDateAuto(new Date(Date.now() - 40 * 24 * 60 * 60 * 1000)));
// 日本語環境なら "2025/09/16 18:56"、英語環境なら "09/16/2025, 06:56 PM"
ポイント
navigator.languageでユーザーのロケールを取得- Intl API が自動でそのロケールに合わせたフォーマットをしてくれる
- 多言語対応を「自動化」できるので、ユーザー体験が向上
💡 さらに発展させると、navigator.languages を使って「優先言語リスト」を考慮したり、サーバーサイドで Accept-Language ヘッダーを見て切り替えることもできます。
