# gt-react: General Translation React SDK: DateTime
URL: https://generaltranslation.com/ja/docs/react/api/components/datetime.mdx
---
title: DateTime
description: DateTime コンポーネントのAPIリファレンス
---

{/* 自動生成: 直接編集しないでください。代わりに content/docs-templates/ 内のテンプレートを編集してください。 */}


## 概要

`<DateTime>` コンポーネントは、書式設定オプションやロケールなどのカスタマイズに対応し、整形された日付または時刻の文字列をレンダリングします。
日付または時刻は、現在のロケールと指定した任意のパラメータに基づいて整形されます。

```jsx
<DateTime>{1738010355}</DateTime>
// 出力: 1/27/2025
```

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

<Callout type="warn">
  `<DateTime>` は、サーバーでレンダリングされるアプリで **React の ハイドレーションエラー** を引き起こす可能性があります。詳しくは、以下の [ハイドレーションエラーを回避する](#avoiding-hydration-errors) を参照してください。
</Callout>

## リファレンス

### プロパティ

<TypeTable
  type={{
  "children?": {
      description: 'フォーマット対象の日付内容。',
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      type: 'string | number | Date',
      optional: true,
      default: 'undefined',
  },
  "options?": {
      type: 'Intl.DateTimeFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### 説明

| Prop Name  | Description                                                                                                                                                                                                       |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | コンポーネント内にレンダリングする内容です。通常は日付または時刻の値を指定します。これが指定されている場合、`value` prop より優先されます。                                                                                                                                      |
| `value`    | 日付または時刻のデフォルト値です。文字列、数値 (タイムスタンプ) 、または Date オブジェクトを指定できます。                                                                                                                                                        |
| `options`  | 日付または時刻のオプションのフォーマット設定です。[`Intl.DateTimeFormatOptions` specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) に従います。曜日名やタイムゾーンなどのスタイルを指定するために使用します。 |
| `locales`  | フォーマットに使用するロケールを指定するための省略可能な locales です。指定しない場合は、ユーザーのロケールが使用されます。ロケールの指定方法については、[こちら](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)を参照してください。          |

### 戻り値

書式設定された日付または時刻を表す文字列を含む`JSX.Element`。

***

## 使用例

### 基本的な使い方

`<DateTime>` コンポーネントは、ローカライズされた日付や時刻の値を表示するために使用できます。

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

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


### localesを指定する

`<DateTime>` コンポーネントを使うと、日付や時刻を特定のロケールで表示できます。

```jsx title="EventDate.jsx" copy

import { DateTime } from 'gt-react';

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


### DateTime を翻訳する

翻訳される文の中に日時も表示したい場合は、
`<DateTime>` コンポーネントを `<T>` コンポーネントで囲むことができます。

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

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


### 書式のカスタマイズ

`<DateTime>` コンポーネントは、書式をカスタマイズするためのオプションに対応しています。

```jsx title="EventDate.jsx" copy
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>.
    );
}
```

***


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

`<DateTime>` は `Intl.DateTimeFormat` を使って日付をローカルで書式設定するため、**サーバーとクライアントで出力が異なる**ことがあります。React はサーバーでレンダリングされた HTML とクライアントでのレンダリング結果を比較するため、一致しない場合はハイドレーションエラーが発生します。

通常、これは次のような場合に起こります。

* **`timeZone` が明示的に設定されていない。** サーバーは UTC (または別のタイムゾーン) で動作していても、ユーザーのブラウザはローカルタイムゾーンを使います。そのため、`1738010355` のようなタイムスタンプは、タイムゾーンが異なるとサーバーでは `"1/27/2025"`、クライアントでは `"1/28/2025"` とレンダリングされる可能性があります。
* **環境ごとにデフォルトロケールが異なる。** サーバーのデフォルトロケールがクライアントと一致しない場合、書式設定された文字列が変わることがあります (例: `"27/01/2025"` と `"1/27/2025"`) 。

### 修正方法

**出力を常に一定にするには、`options` で `timeZone` を明示的に設定します。**

```jsx
<DateTime options={{ timeZone: 'America/New_York' }}>
  {event.date}
</DateTime>
```

**ロケールの不一致を避けるため、`locales` を明示的に指定します:**

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

ロケールとタイムゾーンの両方を固定すると、サーバーとクライアントは常に同じ書式設定済みの文字列を生成します。


## 注記

* `<DateTime>` コンポーネントは、日付や時刻の値をフォーマットするために使用できる変数コンポーネントです。
* このコンポーネントは、フォーマットに [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) ライブラリを使用します。

## 次のステップ

* `<DateTime>` コンポーネントや、`<Currency>`、`<Num>`、`<Var>` などのほかの変数コンポーネントの詳細と使用例については、[変数コンポーネントの使用](/docs/react/guides/variables) を参照してください。