# Vue: `<Num>`
URL: https://generaltranslation.com/ja/docs/vue/reference/components/num.mdx
Docs index: https://generaltranslation.com/llms.txt
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'`     |
| `currencySign`             | 負の通貨値に対する標準表記または会計表記。                                                                           | `'standard' \| 'accounting'`                                                                                         | はい | `'standard'`   |
| `unit`                     | `kilometer` など、単位スタイルで必要となる単位識別子。                                                               | `string`                                                                                                             | はい | —              |
| `unitDisplay`              | 単位ラベルの幅。                                                                                        | `'long' \| 'short' \| 'narrow'`                                                                                      | はい | `'short'`      |
| `minimumIntegerDigits`     | 整数部の最小桁数。                                                                                       | `number`                                                                                                             | はい | `1`            |
| `minimumFractionDigits`    | 小数部の最小桁数。                                                                                       | `number`                                                                                                             | はい | スタイル依存         |
| `maximumFractionDigits`    | 小数部の最大桁数。                                                                                       | `number`                                                                                                             | はい | スタイル依存         |
| `minimumSignificantDigits` | 有効桁数の最小値。                                                                                       | `number`                                                                                                             | はい | `1`            |
| `maximumSignificantDigits` | 有効桁数の最大値。                                                                                       | `number`                                                                                                             | はい | `21`           |
| `useGrouping`              | 桁区切り文字を表示するタイミング。                                                                               | `boolean \| 'auto' \| 'always' \| 'min2'`                                                                            | はい | 表記法依存          |
| `notation`                 | 数値の表記法。                                                                                         | `'standard' \| 'scientific' \| 'engineering' \| 'compact'`                                                           | はい | `'standard'`   |
| `compactDisplay`           | コンパクト表記のラベル幅。                                                                                   | `'short' \| 'long'`                                                                                                  | はい | `'short'`      |
| `signDisplay`              | 符号を表示するタイミング。                                                                                   | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'`                                                        | はい | `'auto'`       |
| `roundingMode`             | 丸めの方向。                                                                                          | `'ceil' \| 'floor' \| 'expand' \| 'trunc' \| 'halfCeil' \| 'halfFloor' \| 'halfExpand' \| 'halfTrunc' \| 'halfEven'` | はい | `'halfExpand'` |
| `roundingPriority`         | 小数部の桁数設定と有効桁数設定が競合した場合の解決方法。                                                                    | `'auto' \| 'morePrecision' \| 'lessPrecision'`                                                                       | はい | `'auto'`       |
| `roundingIncrement`        | `1`、`2`、`5`、`10`、`20`、`25`、`50`、`100`、`200`、`250`、`500`、`1000`、`2000`、`2500`、`5000` のいずれかに丸めます。 | `number`                                                                                                             | はい | `1`            |
| `trailingZeroDisplay`      | 整数値における末尾のゼロの扱いを制御します。                                                                          | `'auto' \| 'stripIfInteger'`                                                                                         | はい | `'auto'`       |

小数部の桁数のデフォルトは、選択した `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>
```

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.