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

title: "<Currency>"
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 \| string`                                           | はい | 表記法依存        |
| `notation`                 | 数値表記。                    | `'standard' \| 'scientific' \| 'engineering' \| 'compact'`    | はい | `'standard'` |
| `compactDisplay`           | コンパクト表記ラベルの長さ。           | `'short' \| 'long'`                                           | はい | `'short'`    |
| `signDisplay`              | 符号を表示するタイミング。            | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'` | はい | `'auto'`     |
| `roundingMode`             | 丸めの方向。                   | `string`                                                      | はい | 実行時環境依存      |

このコンポーネントは、`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>
```