相対時間を「昨日」または「1日前」としてフォーマットするには？

はじめに

タイムスタンプは現代のウェブアプリケーション全体に表示されています。ソーシャルメディアの投稿では「昨日投稿」と表示され、分析ダッシュボードでは「1日前」と表示されます。どちらも同じ時間間隔を表していますが、表現方法によって異なる体験が生まれます。前者は会話的で自然に感じられます。後者は正確でフォーマルに感じられます。

JavaScriptでは、Intl.RelativeTimeFormat APIを通じてこの書式設定の選択を制御できます。ユーザーに「昨日」のような自然な表現を見せるか、「1日前」のような数値表現を見せるかを決定できます。この決定により、インターフェースがどれだけフォーマルまたはカジュアルに感じられるかが変わります。

numeric オプションが書式スタイルを制御する

Intl.RelativeTimeFormatのnumericオプションは出力形式を決定します。このオプションは2つの値を受け付けます。

値autoは、存在する場合に自然言語表現を生成します。値alwaysはすべての場合に数値表現を生成します。

const autoFormatter = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });
const alwaysFormatter = new Intl.RelativeTimeFormat('en-US', { numeric: 'always' });

これら2つのフォーマッターは同じ時間値に対して異なる出力を生成します。

昨日と明日を表示するには auto を使用する

自然言語表現が必要な場合はnumericをautoに設定します。フォーマッターは日の値が-1、0、1の場合に「昨日」、「今日」、「明日」を生成します。

const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });

rtf.format(-1, 'day');  // "yesterday"
rtf.format(0, 'day');   // "today"
rtf.format(1, 'day');   // "tomorrow"

自然な同等表現が存在しない場合、フォーマッターは数値表現に切り替わります。

rtf.format(-2, 'day');  // "2 days ago"
rtf.format(2, 'day');   // "in 2 days"

これにより、一般的な時間参照には自然言語を使用し、あまり一般的でない参照には数字を使用する混合スタイルが作成されます。

数値を常に表示する

一貫した数値出力が必要な場合は、numericをalwaysに設定します。このフォーマッタは-1、0、1を含むすべての値に対して数値表現を生成します。

const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'always' });

rtf.format(-1, 'day');  // "1 day ago"
rtf.format(0, 'day');   // "in 0 days"
rtf.format(1, 'day');   // "in 1 day"

numericオプションを省略した場合、alwaysがデフォルト値として機能します。

const rtf = new Intl.RelativeTimeFormat('en-US');
rtf.format(-1, 'day');  // "1 day ago"

このデフォルト設定により、自然な表現を明示的に選択しない限り、一貫した数値フォーマットが保証されます。

他の言語にも自然な時間表現が存在する

英語以外の言語にも独自の自然な時間表現があります。フランス語では「昨日」を「hier」、スペイン語では「ayer」、日本語では「昨日」と表現します。

const frenchRtf = new Intl.RelativeTimeFormat('fr', { numeric: 'auto' });
frenchRtf.format(-1, 'day');  // "hier"
frenchRtf.format(1, 'day');   // "demain"

const spanishRtf = new Intl.RelativeTimeFormat('es', { numeric: 'auto' });
spanishRtf.format(-1, 'day');  // "ayer"
spanishRtf.format(1, 'day');   // "mañana"

const japaneseRtf = new Intl.RelativeTimeFormat('ja', { numeric: 'auto' });
japaneseRtf.format(-1, 'day');  // "昨日"
japaneseRtf.format(1, 'day');   // "明日"

numericオプションはすべてのロケールで機能します。autoを選択すると、ユーザーは自分の言語で自然な表現を見ることができます。alwaysを選択すると、自分の言語で数値表現を見ることができます。

インターフェーススタイルに基づいて選択する

フォーマルなインターフェースではnumeric: 'always'が有益です。分析ダッシュボード、システムログ、技術レポートには、正確で一貫したフォーマットが必要です。数値はすべての時間範囲にわたってその精度を提供します。

カジュアルなインターフェースではnumeric: 'auto'が有益です。ソーシャルメディアフィード、メッセージングアプリ、コミュニティフォーラムは自然言語を通じてつながりを生み出します。「昨日」や「明日」などの表現はより人間らしく感じられます。

インターフェース全体での一貫性を考慮してください。同じアプリケーションの異なる部分で両方のスタイルを混在させると混乱を招きます。ユーザーはタイムスタンプが体験全体を通して同じパターンに従うことを期待します。

デフォルト値のalwaysは最も予測可能な動作を生み出します。自然言語が特定のインターフェースを向上させる場合は、意図的にautoを選択してください。