# General Translation React SDKs (gt-react, gt-next): 数値と日付の書式設定
URL: https://generaltranslation.com/ja/docs/react/guides/formatting-variables.mdx
---

title: 数値と日付の書式設定
description: React、Next.js、TanStack Start、React Native で、ロケールに応じた数値、通貨、日付、変数を General Translation のコンテンツに挿入する方法。
related:
  links:
    - /docs/react/guides/handling-plurals-and-branches
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/managing-locales

---

翻訳済みコンテンツ内の動的な値には、翻訳対象として送信されないように印を付ける必要があります。また、書式設定された値は読者のロケールに合わせる必要があります。General Translation では、その両方に対応する variable components を提供しています。これらのコンポーネントは、どのフレームワークでも同じコアを共有しており、異なるのは import するパッケージだけです。

## `<Var>` を使って生の値を挿入する [#var]

ユーザー名のように、そのまま表示したい動的コンテンツには [`<Var>`](/docs/react/reference/components/var) を使用します。値を変数としてマークすることで、周囲のテキストは翻訳可能なまま保たれます。

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { T, Var } from 'gt-react';

    <T>
      <p>Signed in as <Var>{user.email}</Var></p>
    </T>;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { T, Var } from 'gt-next';

    <T>
      <p>Signed in as <Var>{user.email}</Var></p>
    </T>;
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { T, Var } from 'gt-tanstack-start';

    <T>
      <p>Signed in as <Var>{user.email}</Var></p>
    </T>;
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { T, Var } from 'gt-react-native';

    <T>
      <Text>Signed in as <Var>{user.email}</Var></Text>
    </T>;
    ```
  </Tab>
</Tabs>

## 数値と通貨を整形する [#numbers]

ロケールに応じた数値や金額の整形には、[`<Num>`](/docs/react/reference/components/num) と [`<Currency>`](/docs/react/reference/components/currency) を使用します。どちらも `Intl` オプションを受け取り、[`<T>`](/docs/react/reference/components/t) と同様に、お使いのフレームワークのパッケージからインポートします。

```tsx
<T>
  <p>You have <Num>{count}</Num> items totaling <Currency currency="USD">{total}</Currency>.</p>
</T>;
```

`<Currency>` の既定値は `USD` です。別のコードを指定するには `currency` を渡します。値はロケールに合わせて整形されますが、通貨間の換算は行いません。

## 日付と時刻のフォーマット [#dates]

絶対的な日付と時刻には [`<DateTime>`](/docs/react/reference/components/datetime)、&quot;3日前&quot; のような相対的な値には [`<RelativeTime>`](/docs/react/reference/components/relative-time) を使用します。どちらも `Intl` の書式設定オプションと、任意の `locales` による上書きをサポートしています。

```tsx
<T>
  <p>Published <DateTime>{publishedAt}</DateTime> (<RelativeTime>{publishedAt}</RelativeTime>).</p>
</T>;
```

`<RelativeTime>` では、日付の代わりに、明示的に `value` と `unit` (たとえば `value={-3}` と `unit="day"`) を指定することもできます。

これらのコンポーネントで使用できるすべての props については、[Components reference](/docs/react/reference/components/num) を参照してください。
## Next steps

- /docs/react/guides/handling-plurals-and-branches
- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/managing-locales