# react-native: RelativeTime
URL: https://generaltranslation.com/ja/docs/react-native/api/components/relativetime.mdx
---
title: RelativeTime
description: RelativeTime コンポーネントの API リファレンス
---

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


## 概要

`<RelativeTime>` コンポーネントは、「2時間前」や「3日後」のようなローカライズされた相対時間の文字列をレンダリングします。
このコンポーネントは 2 つの使用モードをサポートしています。`Date` から最適な単位を自動的に選択する方法と、値と単位を明示的に指定する方法です。

```jsx
<RelativeTime>{someDate}</RelativeTime>
// 出力: "2 hours ago"
```

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

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


## リファレンス

### プロパティ

<TypeTable
  type={{
  "children?": {
      description: '相対時間の計算元となる Date オブジェクト。',
      type: 'Date',
      optional: true,
      default: 'undefined',
  },
  "date?": {
      description: '相対時間の計算元となる Date オブジェクト。children より優先されます。',
      type: 'Date',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      description: '相対時間の値を明示的に数値で指定します。unit が必要です。',
      type: 'number',
      optional: true,
      default: 'undefined',
  },
  "unit?": {
      description: '時間の単位。value を使用する場合は必須です。',
      type: 'Intl.RelativeTimeFormatUnit',
      optional: true,
      default: 'undefined',
  },
  "baseDate?": {
      description: '相対時間の計算に使用する基準日。既定ではレンダリング時の new Date() です。',
      type: 'Date',
      optional: true,
      default: 'new Date()',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "options?": {
      type: 'Intl.RelativeTimeFormatOptions',
      optional: true,
      default: "{ numeric: 'auto', style: 'long' }",
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### 説明

| Prop Name  | 説明                                                                                                                                                                                                                |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | `Date` オブジェクトです。コンポーネントは最適な単位 (秒、分、時間、日、週、月、または年) を自動的に選択し、`baseDate` を基準とした相対時間として書式設定します。                                                                                                                       |
| `date`     | 相対時間の計算元となる `Date` オブジェクトです。`date` と `children` の両方が指定されている場合は、`date` が優先されます。                                                                                                                                    |
| `value`    | 相対時間の明示的な数値です (例: 「昨日」を表す `-1`) 。`unit` と一緒に使用する必要があります。                                                                                                                                                          |
| `unit`     | 時間の単位です (例: `'second'`、`'minute'`、`'hour'`、`'day'`、`'week'`、`'month'`、`'year'`) 。`value` を使用する場合は必須です。                                                                                                            |
| `baseDate` | 相対時間を計算する基準日です。デフォルトはレンダリング時の `new Date()` です。**ハイドレーションエラーを避けるには、これを明示的に設定してください** — 詳しくは[以下](#avoiding-hydration-errors)を参照してください。                                                                              |
| `options`  | [`Intl.RelativeTimeFormatOptions` 仕様](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat)に従う省略可能な書式設定オプションです。デフォルトは `numeric: 'auto'` と `style: 'long'` です。 |
| `locales`  | 書式設定に使用するロケールを指定するための省略可能なプロパティです。指定しない場合は、ユーザーのロケールが使用されます。ロケールの指定方法の詳細は[こちら](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)を参照してください。                  |

### 戻り値

書式設定された相対時間の文字列を含む `JSX.Element`、または日付や値が指定されていない場合は `null`。

***

## 例

### `Date` から単位を自動選択

`Date` を子要素として渡すと、コンポーネントが最適な単位を自動で選択します。

```jsx title="PostTimestamp.jsx" copy
import { RelativeTime } from 'gt-react-native';

export default function PostTimestamp({ post }) {
    return (
        <RelativeTime>{post.createdAt}</RelativeTime> // [!code highlight]
    );
    // 出力: "2 hours ago"、"3 days ago"、"in 5 minutes" など
}
```


### date プロパティを使用する

`children` の代わりに、`date` プロパティで日付を渡すこともできます。

```jsx title="PostTimestamp.jsx" copy
import { RelativeTime } from 'gt-react-native';

export default function PostTimestamp({ post }) {
    return (
        <RelativeTime date={post.createdAt} /> // [!code highlight]
    );
}
```


### 明示的な値と単位

`Intl.RelativeTimeFormat` API に合わせて、正確な値と単位を指定します。

```jsx title="Reminder.jsx" copy
import { RelativeTime } from 'gt-react-native';

export default function Reminder() {
    return (
        <p>
            Your trial ends <RelativeTime value={3} unit="day" />. // [!code highlight]
        </p>
    );
    // 出力: "Your trial ends in 3 days."
}
```


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

特定のロケールで相対時間を表示します。

```jsx title="FrenchTimestamp.jsx" copy
import { RelativeTime } from 'gt-react-native';

export default function FrenchTimestamp({ date }) {
    return (
        <RelativeTime locales={['fr-FR']}>{date}</RelativeTime> // [!code highlight]
    );
    // 出力: "il y a 2 heures"
}
```


### RelativeTime の翻訳

`<RelativeTime>` を翻訳文に含めるには、`<T>` コンポーネントで囲みます。

```jsx title="Comment.jsx" copy
import { T, RelativeTime } from 'gt-react-native';

export default function Comment({ comment }) {
    return (
        <T id="commentPosted">
            Posted <RelativeTime>{comment.createdAt}</RelativeTime> // [!code highlight]
        </T>
    );
}
```


### カスタム書式設定オプション

`Intl.RelativeTimeFormat` のオプションを使って、出力スタイルを制御できます。

```jsx title="NumericTimestamp.jsx" copy
import { RelativeTime } from 'gt-react-native';

export default function NumericTimestamp({ date }) {
    return (
        <RelativeTime
            options={{
                numeric: 'always', // [!code highlight]
                style: 'narrow', // [!code highlight]
            }}
        >
            {date}
        </RelativeTime>
    );
    // numeric: 'always' を指定すると、"yesterday" の代わりに "1 day ago" と出力される
}
```

***


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

`<RelativeTime>` は相対時間をローカルで計算するため、**サーバーとクライアントで異なる出力**になることがあります。React がサーバーでレンダリングされた HTML とクライアント側のレンダリング結果を比較したときに一致しないと、ハイドレーションエラーが発生します。

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

* **`baseDate` がレンダリング時にデフォルトで `new Date()` になる場合。** サーバーはある時点でレンダリングし、その数秒後 (またはそれ以上後) にクライアントでハイドレーションが行われます。その 2 つの時点の間に相対時間が単位の境界をまたぐと (例: &quot;59 seconds ago&quot; → &quot;1 minute ago&quot;) 、出力は一致しません。
* **環境ごとにデフォルトロケールが異なる場合。** サーバーのデフォルトロケールがクライアントと一致しないと、書式設定された文字列が異なることがあります (例: &quot;hace 2 horas&quot; vs &quot;2 hours ago&quot;) 。

### 修正方法

サーバーとクライアントで同じ相対時刻が計算されるよう、**明示的に `baseDate` を設定します**:

```jsx
const now = new Date(); // 一度だけ計算し、サーバーとクライアントの両方に渡す

<RelativeTime baseDate={now}>{post.createdAt}</RelativeTime>
```

**ロケールの不一致を避けるには、`locales` を明示的に指定してください。**

```jsx
<RelativeTime locales={['en-US']} baseDate={now}>
  {post.createdAt}
</RelativeTime>
```

ロケールと基準日の両方を固定すると、サーバーとクライアントで常に同じ書式設定済みの文字列が生成されます。


## 注記

* `<RelativeTime>` コンポーネントは、相対時間の値を書式設定する変数コンポーネントです。
* auto モード (`Date` を使用する場合) では、最も適切な単位が自動的に選択されます。
* このコンポーネントは内部で [`Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat) を使用します。
* デフォルトの書式設定オプションは `numeric: 'auto'` と `style: 'long'` です。

## 次のステップ

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