# General Translation React SDKs (gt-react, gt-next, gt-react-native): URL: https://generaltranslation.com/ja/docs/react/reference/components/num.mdx --- title: "" description: アクティブなロケールに合わせて数値をフォーマットします。 コンポーネントの API リファレンス。 --- `` コンポーネントは、数値に対してロケールに応じた桁区切りと小数のフォーマットを適用します。[``](/docs/react/reference/components/t) 内で使用するための変数コンポーネントで、単独でも使用できます。 *`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。* ## 概要 [#overview] children に数値を渡すと、`` がアクティブなロケールに合わせてその数値をフォーマットします。 ```tsx {100} // 出力: 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` で上書きできます。 * **[``](/docs/react/reference/components/t) 内で使う場合。** [``](/docs/react/reference/components/t) 内で使用する場合は、動的な数値をすべて `` で囲んで、翻訳対象のテキストではなく変数として扱われるようにします。 ## 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 {item.quantity}; // [!code highlight] } ``` ```tsx title="CountDisplay.tsx" import { Num } from 'gt-react'; export default function CountDisplay({ item }) { return {item.count}; // [!code highlight] } ``` ```tsx title="DynamicPriceDisplay.tsx" import { T, Num } from 'gt-react'; export default function DynamicPriceDisplay({ item }) { return ( There are {item.count} units available. // [!code highlight] ); } ``` ```tsx title="CustomFormat.tsx" import { Num } from 'gt-react'; export default function CustomFormat({ number }) { return ( {number} ); } ``` ## メモ [#notes] * `` はアクティブなロケールに応じて数値を整形します。 * [``](/docs/react/reference/components/t) の中では、動的な数値はすべて `` で囲みます。