# General Translation React SDKs (gt-react, gt-next): Num
URL: https://generaltranslation.com/ja/docs/react/reference/components/num.mdx
---

title: Num
description: General Translation gt-react で、アクティブなロケールに合わせて数値をフォーマットします。Num の API リファレンス。

---

`<Num>` コンポーネントは、アクティブなロケールに合わせてフォーマットされた数値を表示します。[`<T>`](/docs/react/reference/components/t) 内で使用するための変数コンポーネントで、単独でも使用できます。

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。例では `gt-react` から import していますが、代わりにお使いのフレームワークのパッケージから import してください。*

## 概要 [#overview]

children に数値を渡すと、`<Num>` がアクティブなロケールに合わせてその数値をフォーマットします。

```tsx
<Num>{100}</Num>
// 出力: 100
```

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

## 仕組み [#how-it-works]

* **ローカルでのフォーマット。** 数値はブラウザー内で `Intl.NumberFormat` を使って再フォーマットされます。その値が General Translation API に送信されることはありません。
* **ロケールの解決。** デフォルトでは、桁区切りと小数点の区切り文字はアクティブなロケールによって決まります。インスタンスごとに `locales` で上書きできます。
* **`<T>` 内で使う場合。** `<T>` 内で使用する場合は、動的な数値をすべて `<Num>` で囲んで、翻訳対象のテキストではなく変数として扱われるようにします。

## Props [#props]

| Prop                    | 説明                          | Type                       | 任意  | デフォルト      |
| ----------------------- | --------------------------- | -------------------------- | --- | ---------- |
| [`children`](#children) | フォーマットする値。                  | `number \| string`         | いいえ | —          |
| [`options`](#options)   | `Intl.NumberFormat` のオプション。 | `Intl.NumberFormatOptions` | はい  | `{}`       |
| [`locales`](#locales)   | フォーマット時に使用するロケールの上書き。       | `string[]`                 | はい  | アクティブなロケール |
| [`name`](#name)         | エントリの変数名。                   | `string`                   | はい  | —          |

### `children` [#children]

**Type** `number | string` · **必須**

フォーマットする数値です。文字列は、フォーマット前に数値に変換されます。

### `options` [#options]

**型** `Intl.NumberFormatOptions` · **任意** · **デフォルト** `{}`

`style`、`maximumFractionDigits`、グループ化など、[`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 仕様に準拠した書式設定オプションです。

### `locales` [#locales]

**型** `string[]` · **省略可能** · **デフォルト** アクティブなロケール

フォーマット対象のロケールです。省略した場合は、アクティブなロケールが使用されます。[locales 引数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)を参照してください。

### `name` [#name]

**型** `string` · **省略可能**

メタデータ用の、数値フィールドの任意の名前です。

## 例 [#examples]

```tsx title="QuantityDisplay.tsx"
import { Num } from 'gt-react';

export default function Inventory({ item }) {
  return <Num>{item.quantity}</Num>; // [!code highlight]
}
```

```tsx title="CountDisplay.tsx"
import { Num } from 'gt-react';

export default function CountDisplay({ item }) {
  return <Num locales={['fr-FR']}>{item.count}</Num>; // [!code highlight]
}
```

```tsx title="DynamicPriceDisplay.tsx"
import { T, Num } from 'gt-react';

export default function DynamicPriceDisplay({ item }) {
  return (
    <T>
      There are <Num>{item.count}</Num> units available. // [!code highlight]
    </T>
  );
}
```

```tsx title="CustomFormat.tsx"
import { Num } from 'gt-react';

export default function CustomFormat({ number }) {
  return (
    <Num options={{ style: 'decimal', maximumFractionDigits: 2 }}>
      {number}
    </Num>
  );
}
```

## メモ [#notes]

* `<Num>` はアクティブなロケールに応じて数値を整形します。
* `<T>` の中では、動的な数値はすべて `<Num>` で囲みます。