# react-native: Currency
URL: https://generaltranslation.com/ja/docs/react-native/api/components/currency.mdx
---
title: Currency
description: Currency コンポーネントのAPIリファレンス
---

{/* 自動生成: 直接編集しないでください。代わりに、content/docs-templates/ 内のテンプレートを編集してください。 */}


## 概要

`<Currency>` コンポーネントは、数値を通貨として表示します。
数値は、現在のロケールと指定された任意のパラメータに基づいて書式設定されます。
このコンポーネントは書式設定のみを行い、為替レートの計算は行いません。

```jsx
<Currency>{100}</Currency>
// 出力: $100.00
```

すべての再フォーマット処理は、[`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?": {
      description: '省略可能な値です。指定しない場合は、children が value として使用されます。',
      type: 'string | number',
      optional: true,
      default: 'undefined',
  },
  "currency?": {
      type: 'string',
      optional: true,
      default: '"USD"',
  },
  "options?": {
      type: 'Intl.NumberFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### 説明

| Prop       | Description                                                                                                                                                                                                      |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | コンポーネント内にレンダリングされる内容です。通常は、通貨として書式設定する値を表す数値を指定します。指定した場合、`value` prop より優先されます。                                                                                                                               |
| `name`     | 省略可能な通貨フィールド名です。メタデータ用途で使用されます。                                                                                                                                                                                  |
| `value`    | 通貨のデフォルト値です。指定されていない場合は `children` が使用されます。文字列または数値を指定できます。文字列は書式設定前に数値として解析されます。                                                                                                                              |
| `currency` | `"USD"` や `"EUR"` などの通貨の種類です。これにより、その通貨に使用される記号や書式が決まります。                                                                                                                                                        |
| `options`  | 省略可能な通貨書式設定オプションです。[`Intl.NumberFormatOptions` specification](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`。

***

## 使用例

### 基本例

`<Currency>` コンポーネントは、ローカライズされた通貨の値を表示するために使用できます。

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-react-native'; // [!code highlight]

export default function PriceDisplay(item) {
    return (
        <Currency> {item.price} </Currency> // [!code highlight]
    );
}
```


### 通貨を指定する

ここでは価格をユーロで表示します。

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-react-native';

export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> // [!code highlight]
  );
}
```


### Currency コンポーネントの翻訳

翻訳対象の文の中に通貨を表示したい場合は、
`<Currency>` コンポーネントを `<T>` コンポーネントで囲むことができます。

```jsx title="PriceDisplay.jsx" copy
import { T, Currency } from 'gt-react-native';

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice"> // [!code highlight]
      The price is <Currency> {item.price} </Currency>.
    </T> // [!code highlight]
  );
}
```


### カスタム書式設定

ここでは、価格をGBPで表示し、小数点以下の桁数を正確に指定したうえで、通貨には狭い記号 (つまり、&quot;US$100&quot; ではなく &quot;$100&quot;) を使用しています。
その他のオプションについては、[Intl.NumberFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) を参照してください。

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-react-native';

export default function PriceDisplay(item) {
  return (
    <Currency
      currency="GBP"
      options={{ // [!code highlight]
        currencyDisplay: 'narrowSymbol', // [!code highlight]
        minimumFractionDigits: 2, // [!code highlight]
        maximumFractionDigits: 2, // [!code highlight]
      }} // [!code highlight]
    >
      {item.price}
    </Currency>
  );
}
```

***


## 注記

* `<Currency>` コンポーネントは、現在のロケールと指定された任意のパラメータに基づいて通貨の値を書式設定するために使用されます。
* このコンポーネントは書式設定のみを行い、為替レートの計算は行いません。
* `<Currency>` コンポーネントの内容が翻訳のために API に送信されることはありません。
  再書式設定はすべて、[`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) ライブラリを使用してローカルで行われます。

## 次のステップ

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