# gt-react: General Translation React SDK: Currency
URL: https://generaltranslation.com/ja/docs/react/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) ライブラリを使用してローカルで行われます。


## リファレンス

### Props

<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` プロパティより優先されます。                                                                                                                                  |
| `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'; // [!code highlight]

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


### 通貨を指定する

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

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

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';

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';

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>` コンポーネントはフォーマットのみを行い、為替レートの計算は行いません。
* `<Currency>` コンポーネントの内容は、翻訳のために API に送信されません。
  書式の調整はすべて [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) ライブラリを使用してローカルで行われます。

## 次のステップ

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