# General Translation React SDKs (gt-react, gt-next): DateTime
URL: https://generaltranslation.com/ja/docs/react/reference/components/datetime.mdx
---

title: DateTime
description: General Translation の gt-react を使用して、アクティブなロケール向けに日付と時刻をフォーマットします。DateTime の API リファレンス。

---

`<DateTime>` コンポーネントは、アクティブなロケールに合わせてフォーマットされた日付または時刻を表示します。カスタムのフォーマットオプションとロケールの上書きに対応しています。

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。例では `gt-react` からインポートしていますが、代わりにお使いのフレームワークのパッケージからインポートしてください。*

## 概要 [#overview]

`Date` を子要素として渡すと、`<DateTime>` がアクティブなロケールに合わせて整形します。

```tsx
<DateTime>{new Date(1738010355000)}</DateTime>
// 出力: 1/27/2025
```

すべての書式設定は、[`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) を使用してローカルで処理されます。

*注: `<DateTime>` は、サーバーレンダリングされたアプリで React のハイドレーションエラーを引き起こす可能性があります。詳しくは [ハイドレーションエラーを避ける](#hydration) を参照してください。*

## 仕組み [#how-it-works]

* **ローカルでの書式設定。** 日付は `Intl.DateTimeFormat` を使ってブラウザ内で書式設定されます。この値が General Translation API に送信されることはありません。
* **ロケールの決定。** `locales` で上書きしない限り、アクティブなロケールに基づいて書式が決まります。
* **タイムゾーンに注意。** `timeZone` を明示的に指定しない場合、出力はランタイムのタイムゾーンに依存するため、サーバーとクライアントで異なることがあります。

## Props [#props]

| Prop                    | 説明                            | 型                            | 任意  | デフォルト      |
| ----------------------- | ----------------------------- | ---------------------------- | --- | ---------- |
| [`children`](#children) | 書式設定する日付。                     | `Date`                       | いいえ | —          |
| [`options`](#options)   | `Intl.DateTimeFormat` のオプション。 | `Intl.DateTimeFormatOptions` | はい  | `{}`       |
| [`locales`](#locales)   | 書式設定に使用するロケールの上書き。            | `string[]`                   | はい  | アクティブなロケール |
| [`name`](#name)         | エントリの変数名。                     | `string`                     | はい  | —          |

### `children` [#children]

**型** `Date` · **必須**

書式設定の対象となる日付または時刻を表す `Date` オブジェクトです。

### `options` [#options]

**型** `Intl.DateTimeFormatOptions` · **任意** · **デフォルト** `{}`

`dateStyle`、`timeStyle`、`timeZone` など、[`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) に準拠した書式設定オプションです。

### `locales` [#locales]

**Type** `string[]` · **Optional** · **Default** アクティブなロケール

書式設定の対象となるロケールです。省略した場合は、アクティブなロケールが使用されます。詳しくは [locales 引数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument) を参照してください。

### `name` [#name]

**Type** `string` · **任意**

メタデータに使用する日付フィールドの名前です (省略可能) 。

## 例 [#examples]

```tsx title="EventDate.tsx"
import { DateTime } from 'gt-react';

export default function EventDate({ event }) {
  return <DateTime>{event.date}</DateTime>; // [!code highlight]
}
```

```tsx title="EventDate.tsx"
import { DateTime } from 'gt-react';

export default function EventDate({ event }) {
  return <DateTime locales={['fr-FR']}>{event.date}</DateTime>; // [!code highlight]
}
```

```tsx title="EventDate.tsx"
import { T, DateTime } from 'gt-react';

export default function EventDate({ event }) {
  return (
    <T>
      The time of the event is <DateTime>{event.date}</DateTime>. // [!code highlight]
    </T>
  );
}
```

```tsx title="EventDate.tsx"
import { DateTime } from 'gt-react';

export default function EventDate({ event }) {
  return (
    <DateTime
      options={{
        dateStyle: 'full', // [!code highlight]
        timeStyle: 'long', // [!code highlight]
        timeZone: 'Australia/Sydney', // [!code highlight]
      }}
    >
      {event.date}
    </DateTime>
  );
}
```

## ハイドレーションエラーを避ける [#hydration]

`<DateTime>` はローカル環境に応じて日付をフォーマットするため、サーバーとクライアントで異なる出力になることがあります。React がサーバーでレンダリングされた HTML とクライアント側のレンダリング結果を比較したときに一致しないと、ハイドレーションエラーが発生します。これは通常、次のような場合に起こります。

* **明示的に `timeZone` が設定されていない。** サーバーは UTC で動作し、ブラウザーはローカル時刻を使うことがあるため、タイムスタンプがサーバーでは `"1/27/2025"`、クライアントでは `"1/28/2025"` としてレンダリングされることがあります。
* **環境ごとにデフォルトロケールが異なる。** デフォルトロケールが一致していないと、異なる文字列が生成されます (たとえば `"27/01/2025"` と `"1/27/2025"`) 。

サーバーとクライアントで常に同じ文字列が生成されるよう、ロケールとタイムゾーンの両方を固定してください。

```tsx
<DateTime locales={['en-US']} options={{ timeZone: 'UTC' }}>
  {event.date}
</DateTime>
```