相対時間のフォーマット

問題

アプリケーションでは「Posted 2 days ago（2日前に投稿）」のようなタイムスタンプが表示されます。これは英語では明確ですが、「2日前」と「2日後」（過去と未来）の論理と文法は言語によって大きく異なります。単純な文字列の連結（例：「2」+「 」+「days ago」）では、文法的に正しい出力を生成できません。

解決策

react-intlのFormattedRelativeTimeのような専用コンポーネントを使用します。このコンポーネントは数値（例：-2）と単位（例：「day」）を受け取り、自動的にロケールに対応した文法的に正しい文字列（「2 days ago」、「hace 2 días」、または「gestern」（昨日））に変換します。

手順

1. 相対時間のためのクライアントコンポーネントを作成する

FormattedRelativeTimeコンポーネントはクライアントコンポーネント内で使用する必要があります。

新しいファイルapp/components/RelativeTime.tsxを作成します。

// app/components/RelativeTime.tsx
'use client';

import { FormattedRelativeTime } from 'react-intl';

type Props = {
  value: number;
  unit: Intl.RelativeTimeFormatUnit;
};

export default function RelativeTime({ value, unit }: Props) {
  return (
    <FormattedRelativeTime
      value={value}
      unit={unit}
      numeric="auto" // "auto" allows "yesterday" or "tomorrow"
      style="long"
    />
  );
}

2. フォーマットオプションを渡す

FormattedRelativeTimeコンポーネントはいくつかの重要なプロパティを受け付けます：

• value：単位の数。負の値（例：-2）は過去（「2日前」）を示し、正の値（2）は未来（「2日後」）を示します。
• unit：時間の単位。「day」、「hour」、「minute」、「second」など。
• numeric="auto"：これにより、ライブラリは「1日前」や「1日後」の代わりに「昨日」や「明日」のような単語を使用できます。

3. ページでコンポーネントを使用する

このコンポーネントを任意のページで使用できるようになりました。propsを渡す前に時間差を計算する責任はあなたにあります。

// app/[lang]/page.tsx
import RelativeTime from '@/app/components/RelativeTime';

export default function Home() {
  // これらの値は動的に計算します
  const daysSinceUpdate = -2;
  const hoursUntilEvent = 3;

  return (
    <div>
      <h1>Updates</h1>
      <p>
        File updated: <RelativeTime value={daysSinceUpdate} unit="day" />
      </p>
      <p>
        Event starts: <RelativeTime value={hoursUntilEvent} unit="hour" />
      </p>
    </div>
  );
}

/enにアクセスするユーザーには「File updated: 2 days ago」と「Event starts: in 3 hours」と表示されます。/esにアクセスするユーザーには「File updated: hace 2 días」と「Event starts: dentro de 3 horas」と表示されます。