# General Translation React SDKs (gt-react, gt-next, gt-react-native): 数値と日付のフォーマット
URL: https://generaltranslation.com/ja/docs/react/guides/formatting-variables.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: React で各ロケールに応じて数値、通貨、日付、相対時間、動的な値をフォーマットする方法。

ロケールごとに、数値、日付、時刻、通貨などの変数のフォーマット方法に異なる慣例があります。

アクティブなロケールに合わせる必要がある値には対応するコンポーネントを使用し、変更せずにレンダリングする必要がある動的な値には [`<Var>`](/docs/react/reference/components/var) を使用します。

## 適切なコンポーネントを選択する [#choose]

* [`<Var>`](/docs/react/reference/components/var) は、動的な値を翻訳やフォーマットせずに表示します。
* [`<Num>`](/docs/react/reference/components/num) は、アクティブなロケールに合わせて数値、パーセンテージ、単位をフォーマットします。
* [`<Currency>`](/docs/react/reference/components/currency) は、値を変換せずに金額と通貨コードをフォーマットします。
* [`<DateTime>`](/docs/react/reference/components/datetime) は、アクティブなロケールに合わせて絶対的な日付、時刻、またはその両方をフォーマットします。
* [`<RelativeTime>`](/docs/react/reference/components/relative-time) は、「昨日」や「3日後」などの相対的な表現をフォーマットします。

これらのコンポーネントは、React、Next.js、TanStack Start、React Native で共通の動作をします。使用しているフレームワークのパッケージからインポートしてください。

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

ユーザー名、メールアドレス、識別子のように、指定どおりにそのまま表示する必要がある動的コンテンツには [`<Var>`](/docs/react/reference/components/var) を使用します。[`<T>`](/docs/react/reference/components/t) 内では、値を翻訳対象から除外しつつ、周囲の文は翻訳可能なままにします。

<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) を使用します。どちらも [`<T>`](/docs/react/reference/components/t) と同様に、お使いのフレームワークのパッケージからインポートします。

### 数値をフォーマットする

桁区切り、小数、パーセンテージ、単位の表示には [`<Num>`](/docs/react/reference/components/num) を使用します。出力をカスタマイズするには、[`options`](/docs/react/reference/components/num#options) を渡します。

```tsx
<T>
  <p>
    <Num>{count}</Num> 件のダウンロードが完了しました。
  </p>
</T>;
```

```tsx
<Num options={{ style: 'percent', maximumFractionDigits: 0 }}>
  {completionRate}
</Num>
```

### 通貨をフォーマットする

[`<Currency>`](/docs/react/reference/components/currency) では、`USD` や `EUR` などの ISO 4217 [`currency`](/docs/react/reference/components/currency#currency) コードを使用します。

```tsx
<T>
  <p>
    Your total is <Currency currency="EUR">{total}</Currency>.
  </p>
</T>;
```

[`<Currency>`](/docs/react/reference/components/currency) のデフォルトは `USD` ですが、[`currency`](/docs/react/reference/components/currency#currency) を指定すると、対象の通貨単位を明示できます。通貨記号、桁区切り、小数点以下の表示はローカライズされますが、為替レートの換算は行われません。

[`options`](/docs/react/reference/components/currency#options) を渡すと、通貨表示、丸め、表記法などの詳細を制御できます。

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

絶対的な日付と時刻には [`<DateTime>`](/docs/react/reference/components/datetime)、&quot;3日前。&quot; のような相対的な値には [`<RelativeTime>`](/docs/react/reference/components/relative-time) を使用します。

### 絶対的な日付または時刻をフォーマットする

暦上の日付や時刻には、[`<DateTime>`](/docs/react/reference/components/datetime) を使用します。日付スタイル、時刻スタイル、タイムゾーンを指定するには、[`options`](/docs/react/reference/components/datetime#options) を渡します。

```tsx
<T>
  <p>
    Published{' '}
    <DateTime
      options={{
        dateStyle: 'medium',
        timeStyle: 'short',
        timeZone: 'UTC',
      }}
    >
      {publishedAt}
    </DateTime>
    .
  </p>
</T>;
```

### 相対時間のフォーマット

`Date` とともに [`<RelativeTime>`](/docs/react/reference/components/relative-time) を使用すると、適切な単位が自動的に選択されます。

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

既知のオフセットを指定するには、代わりに [`value`](/docs/react/reference/components/relative-time#value) と [`unit`](/docs/react/reference/components/relative-time#unit) を渡します。

```tsx
<RelativeTime value={-3} unit="day" />
```

数値表現または自然な表現、さらに長い・短い・狭いスタイルを選択するには、[`options`](/docs/react/reference/components/relative-time#options) を渡します。

アクティブなロケールをオーバーライドするには、フォーマットするコンポーネントで指定します。

* [`<Num>` `locales`](/docs/react/reference/components/num#locales)
* [`<Currency>` `locales`](/docs/react/reference/components/currency#locales)
* [`<DateTime>` `locales`](/docs/react/reference/components/datetime#locales)
* [`<RelativeTime>` `locales`](/docs/react/reference/components/relative-time#locales)

## Next steps

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

## Sitemap

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