# Vue: `<Currency>`
URL: https://generaltranslation.com/ja/docs/vue/reference/components/currency.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: アクティブなロケールに合わせて通貨金額をフォーマットします。`<Currency>` コンポーネントの API リファレンス。

`<Currency>` コンポーネントは、必須の数値 `value` を `Intl.NumberFormat` の通貨スタイルでフォーマットします。表示形式は変更しますが、通貨間で金額を換算することはありません。

## Overview [#overview]

金額は `value` で指定し、必要に応じて ISO 4217 の通貨コードを選択します。

```vue
<Currency :value="100" currency="EUR" />
<!-- en-US: €100.00 -->
```

単独で使用することも、[`<T>`](/docs/vue/reference/components/t) 内でランタイム変数として使用することもできます。

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

* 数値はローカルで通貨スタイルに書式設定されます。金額が翻訳されたり、通貨換算のために送信されたりすることはありません。
* 文字列は数値全体を表している必要があります。空白文字のみの文字列と `null` は空としてレンダリングされ、無効な数値文字列はそのままレンダリングされます。
* `currency` のデフォルトは `USD` です。このコンポーネントでは、`options` のマージ後に常にトップレベルの `currency` prop と通貨スタイルが適用されるため、`options.currency` と `options.style` でこれらをオーバーライドすることはできません。
* Formatter スロットの children は無視されます。必ず `value` を指定し、自己終了タグを使用してください。
* このコンポーネントは HTML ラッパーを追加しません。

### ロケール解決

アクティブなロケールが設定されたデフォルトロケールと同じ場合、フォーマットではそのデフォルトロケールのみが使用され、`locales` は無視されます。それ以外の場合、スタンドアロンのフォーマッタは明示的に指定された `locales` を優先し、次にアクティブなロケール、最後にデフォルトロケールを使用します。

[`<T>`](/docs/vue/reference/components/t) 内では、source のフォールバックコンテンツにデフォルトロケールが使用されます。翻訳済みコンテンツでは、アクティブなロケール、次にデフォルトロケールが使用され、明示的に指定された `locales` prop は無視されます。

## Props [#props]

| Prop                    | 説明                           | 型                       | 任意  | デフォルト  |
| ----------------------- | ---------------------------- | -------------------------- | --- | -------- |
| [`value`](#value)       | フォーマットする通貨金額。                | `number \| string \| null` | いいえ | —        |
| [`currency`](#currency) | ISO 4217の通貨コード。              | `string`                   | はい  | `USD`    |
| [`options`](#options)   | 追加の`Intl.NumberFormat`オプション。 | `Intl.NumberFormatOptions` | はい  | `{}`     |
| [`locales`](#locales)   | 優先するフォーマット用ロケール。             | `string[]`                 | はい  | ロケール解決順序 |

### `value`

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

フォーマット対象となる数値の全額です。数値文字列はフォーマット前に `Number()` で変換されます。値は選択した通貨のままで、為替レートは適用されません。

### `currency`

**型** `string` · **任意** · **デフォルト** `USD`

`USD`、`EUR`、`JPY` などの ISO 4217 コードです。`options` に別の `currency` フィールドが含まれている場合でも、この prop で通貨を指定します。

### `options`

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

`Intl.NumberFormat` に渡す追加オプションです。一般的な通貨フォーマットのオプションは次のとおりです。

| オプション                      | 説明                                                                                              | 型                                                                                                                    | 任意 | デフォルト          |
| -------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -- | -------------- |
| `localeMatcher`            | ロケール照合アルゴリズム。                                                                                   | `'lookup' \| 'best fit'`                                                                                             | はい | `'best fit'`   |
| `numberingSystem`          | `latn` や `arab` などの数字体系。                                                                        | `string`                                                                                                             | はい | ロケール依存         |
| `currencyDisplay`          | 通貨の表示方法。                                                                                        | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'`                                                                     | はい | `'symbol'`     |
| `currencySign`             | 負の値に対する標準表記または会計表記。                                                                             | `'standard' \| 'accounting'`                                                                                         | はい | `'standard'`   |
| `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: 'currency'` とトップレベルの `currency` 値を強制的に設定します。通貨の小数桁数のデフォルト値は、その通貨の標準的な補助単位に従います。実行時環境で定義される完全なオプションセットについては、[`Intl.NumberFormat` のオプション](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options)を参照してください。

### `locales`

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

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

## 例 [#examples]

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

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

<template>
  <T>
    Your total is
    <Currency
      :value="total"
      currency="EUR"
      :options="{ currencyDisplay: 'code' }"
    />.
  </T>
</template>
```

## Sitemap

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