1. 導入：なぜこの技術が重要なのか
Webサイトやアプリで「投稿から5分前」「残り3日」といった相対的な時間を表示したい場面は非常に多いですよね。これまでは、わざわざ複雑な計算をしたり、外部ライブラリ（Moment.jsやdate-fnsなど）を導入したりすることが一般的でした。しかし、モダンブラウザには標準で Intl.RelativeTimeFormat という強力なAPIが備わっています。これを使えば、余計なライブラリなしで、多言語対応も完璧な「相対時間」を簡単に表示でき、アプリの軽量化にもつながります。
2. 基礎知識：Intl.RelativeTimeFormatとは？
Intl.RelativeTimeFormat は、JavaScriptの組み込みオブジェクトで、時間の経過（過去や未来）を人間が読みやすい形式に変換するためのツールです。
例えば、「-1」という数値と「day」という単位を渡すと、日本語環境では「1日前」、英語環境では「1 day ago」のように、言語設定に合わせて自動的に変換してくれます。自分で文字列を組み立てる必要がないため、バグが起きにくく、国際化（i18n）にも強いのが特徴です。
3. 実装/解決策：基本的な使い方
実装は非常にシンプルです。
1. コンストラクタで言語設定（ロケール）を指定してインスタンスを作成します。
2. formatメソッドに「数値」と「単位」を渡すだけです。
4. サンプルプログラム
以下のコードをコピーして、ブラウザのコンソールや、Node.js環境で実行してみてください。
// 1. インスタンスを作成（日本語環境を指定）
const rtf = new Intl.RelativeTimeFormat('ja', { numeric: 'auto' });
// 2. 過去の時間を表示：-1日を指定
console.log(rtf.format(-1, 'day')); // 出力: 1日前
// 3. 未来の時間を表示：3時間を指定
console.log(rtf.format(3, 'hour')); // 出力: 3時間後
// 4. 数値を明示的に表示する場合（numeric: 'always' の挙動）
const rtfAlways = new Intl.RelativeTimeFormat('ja', { numeric: 'always' });
console.log(rtfAlways.format(-1, 'day')); // 出力: -1日前
// 応用：単位のリスト
// 'year', 'quarter', 'month', 'week', 'day', 'hour', 'minute', 'second' が使用可能です
5. 応用・注意点：現場で役立つアドバイス
現場で活用する際に、いくつか気をつけておきたいポイントがあります。
・「numeric: ‘auto’」の便利さ
オプションの { numeric: ‘auto’ } を指定すると、「1日前」を「昨日」、「-1年」を「昨年」のように、より自然な日本語に自動変換してくれます。ユーザー体験を向上させるために、基本的にはこの設定をおすすめします。
・単位の計算は自分で行う
このAPIは「文字列への変換」を行う機能であり、「現在時刻と投稿時刻の差分」を計算する機能ではありません。そのため、実際に使う際は、事前に現在時刻との差分（ミリ秒）を計算し、それを「分」や「時間」に変換するロジックを別途用意する必要があります。
・ブラウザの対応状況
現在の主要なブラウザではほぼすべて対応していますが、非常に古いブラウザ（Internet Explorerなど）では動作しません。もしIE対応が必須の環境であれば、Polyfill（補完ライブラリ）の導入を検討してください。
使いこなせば、日付表示の実装が驚くほどスッキリしますよ！ぜひ今日から活用してみてください。