# gt-next: General Translation Next.js SDK: Currency
URL: https://generaltranslation.com/ja/docs/next/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` 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`  | フォーマットに使用するロケールを指定する任意の値です。指定しない場合は、ユーザーのデフォルトロケールが使用されます。ロケールの指定方法について詳しくは、[こちら](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-next'; // [!code highlight]

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


### 通貨を指定する

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

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

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

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice"> // [!code highlight]
      価格は <Currency> {item.price} </Currency> です。
    </T> // [!code highlight]
  );
}
```


### カスタム書式設定

ここでは、小数点以下の桁数を厳密に指定し、通貨には狭幅記号 (つまり、&quot;US$100&quot; ではなく &quot;$100&quot;) を使用した GBP 建ての価格を表示しています。
その他のオプションについて詳しくは、[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-next';

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/next/guides/variables) を参照してください。