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

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


## 概要

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

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

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


## リファレンス

### Props

<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-native';

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


### ロケールを指定する

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

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

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-native';

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-native';

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

***


## 注意

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

## 次のステップ

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