# General Translation Changelog: gt-react 10.16.0: ローカライズされた相対時間文字列
URL: https://generaltranslation.com/ja/blog/gt-react_v10_16_0.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 
Authors: Ernest McCarter
Published: 2026-04-01

## 概要

&quot;2時間前&quot; や &quot;3日後&quot; のようなローカライズされた相対時間文字列を renderizar するための新しい [`<RelativeTime>`](/docs/react/reference/components/relative-time) 変数コンポーネントです。内部では [`Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat) を使用します。

| Package              | Version |
| -------------------- | ------- |
| `gt-react`           | 10.16.0 |
| `gt-next`            | 6.15.0  |
| `generaltranslation` | 8.2.0   |

## 使い方

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

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

```jsx
import { RelativeTime } from "gt-react";

<RelativeTime>{post.createdAt}</RelativeTime>
// "2時間前"、"3日後" など
```


### 明示的な値と単位

`Intl.RelativeTimeFormat` API に合わせて、値と単位を明示的に指定します。

```jsx
import { RelativeTime } from "gt-react";

<RelativeTime value={3} unit="day" />
// "3日後"
```


### 翻訳文内で

[`<RelativeTime>`](/docs/react/reference/components/relative-time) を翻訳文に含めるには、[`<T>`](/docs/react/reference/components/t) で囲みます:

```jsx
import { T, RelativeTime } from "gt-react";

<T id="commentPosted">
  Posted <RelativeTime>{comment.createdAt}</RelativeTime>
</T>
```

## ハイドレーションの安全性

[`<RelativeTime>`](/docs/react/reference/components/relative-time) は相対時間をローカルで計算するため、server-rendered アプリではハイドレーションの不整合が発生することがあります。これを避けるには、`baseDate` を固定してください。

```jsx
const now = new Date();

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

## コアユーティリティ

`generaltranslation` では、2 つの新しい書式設定関数も利用できます。

* `formatRelativeTimeFromDate(date, options)` — スタンドアロン関数
* `GT.formatRelativeTimeFromDate(date, options)` — クラスメソッド

## リンク

* [`<RelativeTime>` API リファレンス](/docs/react/reference/components/relative-time)
* [変数コンポーネントを使う](/docs/react/guides/formatting-variables)
* [PR #1153](https://github.com/generaltranslation/gt/pull/1153)

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.