相対時間を「昨日」または「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"

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

always を使用して数値を表示する

一貫した数値出力が必要な場合は、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"

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

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を選択してください。