# vue: <Num>
URL: https://generaltranslation.com/ja/docs/vue/reference/components/num.mdx
---

title: "<Num>"
description: アクティブなロケールに合わせて数値をフォーマットします。<Num> コンポーネントの API リファレンス。

---

`<Num>` コンポーネントは、必須の数値 `value` を `Intl.NumberFormat` でフォーマットします。単独で使用することも、[`<T>`](/docs/vue/reference/components/t) 内のランタイム変数として使用することもできます。

## 概要 [#overview]

`value` で数値をバインドし、コンポーネントは自己終了のままにします。

```vue
<Num :value="1234.5" />
<!-- en-US: 1,234.5 -->
```

フォーマットはローカルで行われます。数値は翻訳されず、リッチ翻訳のソースにも含まれません。

## 仕組み [#how-it-works]

* 数値は直接 `Intl.NumberFormat` に渡されます。
* 文字列は数値全体を表している必要があります。空白文字だけの文字列と `null` は空として表示され、無効な数値文字列はそのまま表示されます。
* Formatter スロットの children は無視されます。必ず `value` を指定し、自己終了タグを使用してください。
* このコンポーネントは HTML ラッパーを追加しません。

### ロケールの解決

アクティブなロケールが設定されたデフォルトロケールの場合、フォーマットにはそのデフォルトロケールのみが使用され、`locales` は無視されます。アクティブなロケールがそれ以外の場合、スタンドアロンのフォーマッターは明示的に指定された `locales`、アクティブなロケール、デフォルトロケールの順に使用を試みます。重複したロケールは順序を維持したまま削除されます。

[`<T>`](/docs/vue/reference/components/t) 内では、リッチ翻訳によってフォーマットが制御されます。ソースのフォールバックコンテンツにはデフォルトロケールが使用され、翻訳済みコンテンツではアクティブなロケール、次にデフォルトロケールの順に使用が試みられます。この場合、明示的に指定した `locales` prop は無視されます。

## Props [#props]

| Prop                  | 説明                            | 型                       | 任意  | デフォルト   |
| --------------------- | ----------------------------- | -------------------------- | --- | --------- |
| [`value`](#value)     | フォーマットする数値。                   | `number \| string \| null` | いいえ | —         |
| [`options`](#options) | `Intl.NumberFormat` に渡すオプション。 | `Intl.NumberFormatOptions` | はい  | `{}`      |
| [`locales`](#locales) | 優先するフォーマット用ロケール。              | `string[]`                 | はい  | ロケール解決順序 |

### `value`

**型** `number | string | null` · **必須**

フォーマット対象の数値全体。数値文字列はフォーマット前に `Number()` で変換されます。`"12 items"` や `"1,234.5"` のような値は部分的に解析されず、そのままレンダリングされます。

```vue
<Num :value="item.quantity" />
```

### `options`

**型** `Intl.NumberFormatOptions` · **任意** · **デフォルト** `{}`

JavaScript ランタイムの `Intl.NumberFormat` 実装に渡されるオプションです。主なオプションは次のとおりです。

| オプション                      | 説明                                | 型                                                             | 任意 | デフォルト        |
| -------------------------- | --------------------------------- | ------------------------------------------------------------- | -- | ------------ |
| `localeMatcher`            | ロケール照合アルゴリズム。                     | `'lookup' \| 'best fit'`                                      | はい | `'best fit'` |
| `numberingSystem`          | `latn` や `arab` などの数字体系。          | `string`                                                      | はい | ロケール依存       |
| `style`                    | 小数、パーセント、通貨、または単位のフォーマット。         | `'decimal' \| 'percent' \| 'currency' \| 'unit'`              | はい | `'decimal'`  |
| `currency`                 | 通貨スタイルで必要となる ISO 4217 コード。        | `string`                                                      | はい | —            |
| `currencyDisplay`          | 通貨の表示方法。                          | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'`              | はい | `'symbol'`   |
| `unit`                     | `kilometer` など、単位スタイルで必要となる単位識別子。 | `string`                                                      | はい | —            |
| `unitDisplay`              | 単位ラベルの幅。                          | `'long' \| 'short' \| 'narrow'`                               | はい | `'short'`    |
| `minimumIntegerDigits`     | 整数部の最小桁数。                         | `number`                                                      | はい | `1`          |
| `minimumFractionDigits`    | 小数部の最小桁数。                         | `number`                                                      | はい | スタイル依存       |
| `maximumFractionDigits`    | 小数部の最大桁数。                         | `number`                                                      | はい | スタイル依存       |
| `minimumSignificantDigits` | 有効桁数の最小値。                         | `number`                                                      | はい | `1`          |
| `maximumSignificantDigits` | 有効桁数の最大値。                         | `number`                                                      | はい | `21`         |
| `useGrouping`              | 桁区切り文字を表示するタイミング。                 | `boolean \| string`                                           | はい | 表記法依存        |
| `notation`                 | 数値の表記法。                           | `'standard' \| 'scientific' \| 'engineering' \| 'compact'`    | はい | `'standard'` |
| `compactDisplay`           | コンパクト表記のラベル幅。                     | `'short' \| 'long'`                                           | はい | `'short'`    |
| `signDisplay`              | 符号を表示するタイミング。                     | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'` | はい | `'auto'`     |
| `roundingMode`             | 丸めの方向。                            | `string`                                                      | はい | ランタイム依存      |

小数部の桁数のデフォルトは、選択した `style` によって異なります。対応フィールドと値は、JavaScript ランタイムによっても異なる場合があります。ランタイムで定義されるすべてのオプションについては、[`Intl.NumberFormat` のオプション](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options)を参照してください。

### `locales`

**型** `string[]` · **任意** · **デフォルト** ロケール解決順序

スタンドアロンのフォーマットで優先的に使用する BCP 47 ロケールコードです。アクティブなロケールが設定されたデフォルトロケールではない場合にのみ、アクティブなロケールおよびデフォルトロケールより先に試されます。

```vue
<Num :value="1234.5" :locales="['de-DE']" />
```

## 例 [#examples]

```vue title="InventorySummary.vue"
<script setup lang="ts">
import { Num, T } from 'gt-vue';

defineProps<{ count: number; completionRate: number }>();
</script>

<template>
  <T>There are <Num :value="count" /> units available.</T>
  <p><Num :value="completionRate" :options="{ style: 'percent' }" /> complete</p>
</template>
```