# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Num>`
URL: https://generaltranslation.com/ja/docs/react/reference/components/num.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: アクティブなロケールに合わせて数値をフォーマットします。`<Num>` コンポーネントの API リファレンス。

`<Num>` コンポーネントは、数値に対してロケールに応じた桁区切りと小数のフォーマットを適用します。[`<T>`](/docs/react/reference/components/t) 内で使用するための変数コンポーネントで、単独でも使用できます。

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。*

## 概要 [#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>`](/docs/react/reference/components/t) 内で使う場合。** [`<T>`](/docs/react/reference/components/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` · **任意** · **デフォルト** `{}`

この prop には [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) を指定できます。主なオプションは次のとおりです。

| オプション                      | 説明                                                             | 型                                                                                                                    | 任意 | デフォルト                        |
| -------------------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -- | ---------------------------- |
| `localeMatcher`            | ロケール照合アルゴリズム。                                                  | `'lookup' \| 'best fit'`                                                                                             | はい | `'best fit'`                 |
| `numberingSystem`          | `latn` や `arab` などの数字体系。                                       | `string`                                                                                                             | はい | `'latn'`                     |
| `style`                    | 通常の数値、通貨、パーセント、または単位のフォーマット。                                   | `'decimal' \| 'currency' \| 'percent' \| 'unit'`                                                                     | はい | `'decimal'`                  |
| `currency`                 | ISO 4217 通貨コード。`style` が `'currency'` の場合は必須です。                | `string`                                                                                                             | はい | —                            |
| `currencyDisplay`          | 通貨の表示方法。                                                       | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'`                                                                     | はい | `'symbol'`                   |
| `currencySign`             | 負の通貨値に使用する標準表記または会計表記。                                         | `'standard' \| 'accounting'`                                                                                         | はい | `'standard'`                 |
| `unit`                     | `kilometer` や `megabyte` などの単位識別子。`style` が `'unit'` の場合は必須です。 | `string`                                                                                                             | はい | —                            |
| `unitDisplay`              | 単位ラベルの表示幅。                                                     | `'long' \| 'short' \| 'narrow'`                                                                                      | はい | `'short'`                    |
| `minimumIntegerDigits`     | 整数部の最小桁数。より短い値はゼロ埋めされます。                                       | `number` (`1`–`21`)                                                                                                  | はい | `1`                          |
| `minimumFractionDigits`    | 小数点以下の最小桁数。                                                    | `number` (`0`–`100`)                                                                                                 | はい | スタイル依存                       |
| `maximumFractionDigits`    | 小数点以下の最大桁数。                                                    | `number` (`0`–`100`)                                                                                                 | はい | スタイル依存                       |
| `minimumSignificantDigits` | 有効桁数の最小値。                                                      | `number` (`1`–`21`)                                                                                                  | はい | `1`                          |
| `maximumSignificantDigits` | 有効桁数の最大値。                                                      | `number` (`1`–`21`)                                                                                                  | はい | `21`                         |
| `roundingPriority`         | 小数桁数と有効桁数のどちらを優先するか。                                           | `'auto' \| 'morePrecision' \| 'lessPrecision'`                                                                       | はい | `'auto'`                     |
| `roundingIncrement`        | 選択した丸めの桁に使用する増分。                                               | `1 \| 2 \| 5 \| 10 \| 20 \| 25 \| 50 \| 100 \| 200 \| 250 \| 500 \| 1000 \| 2000 \| 2500 \| 5000`                    | はい | `1`                          |
| `roundingMode`             | 丸める方向。                                                         | `'ceil' \| 'floor' \| 'expand' \| 'trunc' \| 'halfCeil' \| 'halfFloor' \| 'halfExpand' \| 'halfTrunc' \| 'halfEven'` | はい | `'halfExpand'`               |
| `trailingZeroDisplay`      | 整数値の末尾のゼロを保持するかどうか。                                            | `'auto' \| 'stripIfInteger'`                                                                                         | はい | `'auto'`                     |
| `notation`                 | 標準表記、科学表記、エンジニアリング表記、またはコンパクト表記。                               | `'standard' \| 'scientific' \| 'engineering' \| 'compact'`                                                           | はい | `'standard'`                 |
| `compactDisplay`           | コンパクト表記の長いラベルまたは短いラベル。                                         | `'short' \| 'long'`                                                                                                  | はい | `'short'`                    |
| `useGrouping`              | 桁区切り文字を表示するタイミング。                                              | `boolean \| 'always' \| 'auto' \| 'min2'`                                                                            | はい | `'auto'`; コンパクト表記では `'min2'` |
| `signDisplay`              | 正または負の符号を表示するタイミング。                                            | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'`                                                        | はい | `'auto'`                     |

* 小数部の桁数のデフォルト値は、`style` と、通貨の場合はその通貨の標準的な補助単位によって決まります。
* `compactDisplay` は、`notation` が `'compact'` の場合にのみ適用されます。
* `roundingIncrement` は、有効桁数による丸めや、`'auto'` 以外の `roundingPriority` と組み合わせることはできません。
* サポートされる単位、数字体系、丸めに関するフィールド、オプション値は、JavaScript のランタイムによって異なります。

利用可能な最新のオプションとランタイムの動作については、[`Intl.NumberFormat` options documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) を参照してください。

### `locales` [#locales]

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

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

### `name` [#name]

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

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

## 例 [#examples]

*例では `gt-react` からインポートしています。ご使用のフレームワークのパッケージからインポートしてください。*

```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>`](/docs/react/reference/components/t) の中では、動的な数値はすべて `<Num>` で囲みます。

## Sitemap

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