# gt-next: General Translation Next.js SDK: Num
URL: https://generaltranslation.com/ja/docs/next/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)ライブラリを使用してローカルで行われます。


## リファレンス

### プロパティ

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

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


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

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

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

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

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

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

***


## 注意

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

## 次のステップ

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