# gt-react: General Translation React SDK: Num
URL: https://generaltranslation.com/ja/docs/react/api/components/num.mdx
---
title: Num
description: Num コンポーネントのAPIリファレンス
---

{/* 自動生成: 直接編集せず、代わりに content/docs-templates/ 内の template を編集してください。 */}


## 概要

`<Num>` コンポーネントは、ユーザーのロケールに合わせて書式設定された数値文字列をレンダリングし、書式設定オプションでカスタマイズできます。

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

すべての再フォーマットは、ローカルで [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) ライブラリを使って処理されます。


## リファレンス

### 属性

<TypeTable
  type={{
  "children?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      type: 'string | number',
      optional: true,
      default: 'undefined',
  },
  "options?": {
      type: 'Intl.NumberFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### 説明

| Prop       | 説明                                                                                                                                                                                                        |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | コンポーネント内にレンダリングする内容です。通常は数値で、現在のロケールとオプションに応じてフォーマットされます。指定した場合は、`value` prop より優先されます。                                                                                                                   |
| `name`     | メタデータ用途で使用する、数値フィールドの任意の名前です。                                                                                                                                                                             |
| `value`    | 数値のデフォルト値です。文字列または数値を指定できます。文字列はフォーマット前に数値としてパースされます。                                                                                                                                                     |
| `options`  | 数値の任意のフォーマットオプションです。[`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) の仕様に従います。通貨や小数点以下の精度などのスタイルを定義するために使用します。            |
| `locales`  | フォーマットに使用するロケールを指定する任意の locales です。指定しない場合は、ユーザーのデフォルトのロケールが使用されます。ロケールの指定方法については、[こちら](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)を参照してください。 |

### 戻り値

書式設定済みの数値を文字列として含む `JSX.Element`。

***

## 例

### 基本的な例

この例では、`item.quantity` はユーザーのロケールに合わせた形式に再フォーマットされます。

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

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


### localesを指定する

デフォルトでは、localesはユーザーのブラウザ設定に基づいて決まりますが、
`<Num>` コンポーネントではlocalesを明示的に指定することもできます。

```jsx title="PriceDisplay.jsx" copy
import { Num } from 'gt-react';

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

### Num コンポーネントを翻訳する

数値を翻訳対象のより大きな文の一部として含めたい場合は、
その内容を `<T>` コンポーネントで囲むだけです。

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

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


### カスタムフォーマット

`<Num>` のフォーマットには、[`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) ライブラリが使用されます。

```jsx
import { Num } from 'gt-react';

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

***


## 注意事項

* `<Num>` コンポーネントは、ユーザーのロケールに合わせて数値をフォーマットするために使用します。
* `<T>` コンポーネント内では、動的な数値をすべて `<Num>` コンポーネントで囲んでください。

## 次のステップ

* `<Num>` コンポーネントや、`<Currency>`、`<DateTime>`、`<Var>` などの変数コンポーネントの詳細と使用例については、[変数コンポーネントの使用](/docs/react/guides/variables) を参照してください。