# gt-next: General Translation Next.js SDK: DateTime
URL: https://generaltranslation.com/ja/docs/next/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-next';

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


### ロケールを指定する

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

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

import { DateTime } from 'gt-next';

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-next';

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-next';

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/next/guides/variables) ドキュメントを参照してください。