Relative time — 「3 時間前」「2 週間後」表現を ja/en 両対応で生成

相対時間文字列に含まれる日時情報

「3 日前」「2 週間後」「昨日」——相対時間の文字列を生成するために入力する対象日時と基準日時のペアは、ユーザーが何かのイベントを基準点として持っていることを示します。SNS のタイムスタンプ生成・通知システムの文言・ログの表示などに使う場合、その入力値が業務データの一部であることがあります。

特に「〇〇日前」という文言を生成するためのツールに日時を入力するとき、その日時がイベントの発生時刻（インシデント発生日・契約締結日・顧客からの問い合わせ日）を示す場合、外部サービスへの送信は業務上の情報漏洩になりえます。

オンライン Intl 検証ツールに日時を送ることの問題

Intl.RelativeTimeFormat のフォーマット結果を確認するために外部サービスを使う場合、入力する日時がサーバーのリクエストログに残ります。開発者が使う検証ツールであっても、テストデータとして実際の業務上の日時を入力してしまうことはよくあります。「本番のインシデントが何時間前に起きたか」を確認するために入力した日時が、外部ログに残ることは避けるべきです。

また、Intl.RelativeTimeFormat はブラウザ組み込みの API であり、外部サービスに頼る必要が本質的にありません。この API の動作検証・スタイル確認・numeric オプションの比較は、ブラウザ内だけで完結できます。

Intl.RelativeTimeFormat をブラウザ内で直接呼び出す仕組み

このツールは入力された 2 つの日時の差分を秒単位で計算し、new Intl.RelativeTimeFormat(locale, \{ style, numeric }).format(value, unit) を ja と en の両ロケールで呼び出します。7 スケール（年・月・週・日・時・分・秒）での出力テーブルも同じ API を繰り返し呼ぶだけです。外部ライブラリも外部 API も一切使いません。

DevTools の Network タブを開いたまま日時を変更しても、追加リクエストは発生しません。ブラウザの Intl 実装がそのまま結果を返すため、「自分が使うブラウザでの実際の出力」を確認できます——ブラウザエンジンによって出力が微妙に異なる場合があるため、この点は実用上も重要です。

実装に使う前に確認しておくべきこと

Intl.RelativeTimeFormat の numeric: auto オプションは yesterday / tomorrow などの自然言語表現を優先しますが、どの値でその表現に切り替わるかはロケールとブラウザ実装によって異なります。本ツールの「スケール別表示候補」テーブルでブラウザ間の差異を事前に確認しておくと、UI 実装のテスト漏れを防げます。

週（week）スケールは多くのブラウザで auto モードでも last week を返さず、day スケールに留まる実装が多いです。本ツールはあえて 7 スケールすべてを並べて表示するので、自分の環境での動作を確認できます。コピーした結果を直接コードのドキュメントやテスト仕様に貼り付ける用途にも使えます。

Intl.RelativeTimeFormat の内部実装と CLDR データソース

Intl.RelativeTimeFormat は ECMAScript Internationalization API (ECMA-402) で標準化された比較的新しい API で、各ブラウザの V8 / JavaScriptCore / SpiderMonkey はそれぞれ Unicode CLDR (Common Locale Data Repository) を参照して文言テーブルを保持します。new Intl.RelativeTimeFormat('ja').format(-3, 'day') が 3 日前 を返す挙動は、CLDR の <unitPattern count="other">{0} 日前</unitPattern> に対応します。count 属性は CLDR の plural rules に基づき、zero / one / two / few / many / other の 6 種類のうち、ロケールごとに実際に使われるカテゴリが異なります（日本語は other のみ、英語は one と other、ロシア語は one / few / many / other）。

numeric: 'auto' オプションは「自然言語表現を優先」ですが、どこで切り替わるかはロケールと CLDR データに依存します。英語の format(-1, 'day') は auto モードで yesterday を返す一方、format(-2, 'day') は 2 days ago です。日本語の format(-1, 'day') は 昨日 を返しますが、week スケールは多くの実装で last week 相当の自然語が存在しないため、numeric: 'auto' でも 1 週間前 のように数値表現に留まります。これらの境界条件は本ツールの並列表示で確認可能です。style: 'narrow' は 3d ago、'short' は 3 days ago、'long' は 3 days ago（多くの言語で long と short は同じ）です。

実装での使い分けパターンと既知のブラウザ間差異

agoString(date) ヘルパーを実装するとき、しきい値の設計が重要です。GitHub の表示は < 1 min → just now、< 60 min → N minutes ago、< 24 h → N hours ago、< 30 day → N days ago、> 30 day → 絶対日付（May 18, 2026）に切り替える方式です。Slack の 3h は style: 'narrow' + 単位を細かく切り替える設計。Twitter（X）の 5m は style: 'narrow' で minute 単位を 60 分まで、h 単位を 24 時間まで、それ以上は絶対日付に切り替えるパターンです。本ツールの 7 スケール並列表示で、どのしきい値設計が自分の UI に合うか試算できます。

ブラウザ間差異の代表例として、week 単位の auto モード処理が挙げられます。Chrome（V8）は多くのロケールで last week 相当の自然語を返しませんが、Firefox（SpiderMonkey）は一部ロケールで返す実装があります。quarter 単位は CLDR には定義されていますが Intl API としてはサポートされていません（format(-1, 'quarter') はエラーまたは数値フォールバック）。fortnight（2 週間）や decade（10 年）も同様に Intl 標準外です。これらが必要な場合は Intl.NumberFormat で数値だけフォーマットして手書きで 週 / 年 の単位を付ける運用になります。Temporal API（Stage 3）にも Temporal.RelativeTimeFormat 相当の機能はなく、当面 Intl.RelativeTimeFormat が標準のままです。基準日からの「絶対的な日数差」を別途見たい場合は date-diff を、得られた相対時間を PT3H のような ISO 8601 期間として書き直したい場合は duration-format を、基準日を未来側に N 単位分動かしたい場合は time-arithmetic を併用すると、いずれも入力日時を外部に出さずに扱えます。