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

問題

生の日付（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"は、「2025年12月10日」のようなフォーマットを要求します。その他のオプションには、「full」、「medium」、「short」があります。
• timeStyle="short"は、「午後3:00」のようなフォーマットを要求します。

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

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

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

export default function Home() {
  // This could come from a database or 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」と表示されます。