日付と時刻のフォーマット

問題

10/12/2025のような生の日付を表示することは曖昧です。米国のユーザーは10月12日と解釈し、英国のユーザーは12月10日と解釈します。単一のフォーマット（例：'Oct 12, 2025'）をハードコーディングすると、異なる地域のユーザーにとって不自然または読みにくい体験になります。

解決策

react-intlのようなライブラリから専用のフォーマットコンポーネントを使用します。FormattedDateのようなコンポーネントは、プロバイダーから現在の言語を自動的に読み取ります。Dateオブジェクトをユーザーの言語ルールに従って正確で人間が読みやすい文字列にフォーマットし、順序、区切り文字、月名を処理します。

手順

1. 日付用のクライアントコンポーネントを作成する

react-intlコンポーネントはIntlProviderを必要とするため、クライアントコンポーネント内で使用する必要があります。

フォーマットされた日付を表示する新しいコンポーネントapp/components/PostDetails.tsxを作成します。

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

import { FormattedDate } from 'react-intl';

type Props = {
  publishDate: Date;
};

export default function PostDetails({ publishDate }: Props) {
  return (
    <div>
      Posted on:
      <FormattedDate
        value={publishDate}
        dateStyle="long"
        timeStyle="short"
      />
    </div>
  );
}

このコンポーネントはDateオブジェクトをプロップとして受け取ります。そしてFormattedDateを使用してレンダリングします。

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

FormattedDateコンポーネントは出力を制御するオプションを受け付けます。上記の例では：

• valueはフォーマットするDateオブジェクトです。
• dateStyle="long"は「December 10, 2025」のようなフォーマットをリクエストします。他のオプションには「full」、「medium」、「short」があります。
• timeStyle="short"は「3:00 PM」のようなフォーマットをリクエストします。

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

これで、ホームページなど任意のページで新しいコンポーネントを使用できます。

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

export default function Home() {
  // これはデータベースやAPIから取得することもできます
  const myPostDate = new Date('2025-12-10T15:00:00Z');

  return (
    <div>
      <h1>My blog post</h1>
      <PostDetails publishDate={myPostDate} />
      <p>This is the content of the post...</p>
    </div>
  );
}

/enにアクセスするユーザーは「Posted on: December 10, 2025 at 3:00 PM」と表示されます。/esにアクセスするユーザーは「Posted on: 10 de diciembre de 2025, 15:00」と表示されます。