# General Translation React SDKs (gt-react, gt-next, gt-react-native): `` URL: https://generaltranslation.com/ja/docs/react/reference/components/currency.mdx Docs index: https://generaltranslation.com/llms.txt Description: アクティブなロケールに応じて金額を通貨形式でフォーマットします。`` コンポーネントの API リファレンス。 `` コンポーネントは、数値をアクティブなロケールに合わせた通貨形式でレンダリングします。フォーマットのみを行い、為替レートの換算は行いません。 *`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。* ## 概要 [#overview] 金額を子要素として渡し、`currency`コードを設定します。 ```tsx {100} // 出力: $100.00 ``` すべてのフォーマットは、[`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) を使用してローカルで行われます。 ## 動作の仕組み [#how-it-works] * **ローカルでのフォーマット。** 金額はブラウザ内で `Intl.NumberFormat` を使ってフォーマットされます。その値が General Translation API に送信されることはありません。 * **変換は行いません。** `` は選択した通貨とロケールに合わせて記号、桁区切り、小数点以下の桁数を整えますが、通貨間の換算は行いません。 * **ロケールの決定。** `locales` で上書きしない限り、フォーマットはアクティブなロケールによって決まります。 ## Props [#props] | Prop | 説明 | Type | 任意 | デフォルト | | ----------------------- | --------------------------- | -------------------------- | --- | ---------- | | [`children`](#children) | フォーマットする値。 | `number \| string` | いいえ | — | | [`currency`](#currency) | ISO 4217 の通貨コード。 | `string` | はい | `USD` | | [`options`](#options) | `Intl.NumberFormat` のオプション。 | `Intl.NumberFormatOptions` | はい | `{}` | | [`locales`](#locales) | フォーマット時のロケールの上書き。 | `string[]` | はい | アクティブなロケール | | [`name`](#name) | エントリの変数名。 | `string` | はい | — | ### `children` [#children] **Type** `number | string` · **必須** 通貨形式でフォーマットする金額です。文字列は、フォーマット前に数値として解析されます。 ### `currency` [#currency] **Type** `string` · **任意** · **デフォルト** `USD` `USD` や `EUR` などの ISO 4217 通貨コードを指定します。通貨記号とフォーマットがこれによって決まります。 ### `options` [#options] **Type** `Intl.NumberFormatOptions` · **任意** · **Default** `{}` この prop には [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) を指定できます。主な options は次のとおりです。 | Option | 説明 | Type | 任意 | Default | | -------------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -- | ---------------------------- | | `localeMatcher` | ロケール照合アルゴリズム。 | `'lookup' \| 'best fit'` | はい | `'best fit'` | | `numberingSystem` | `latn` や `arab` などの数字体系。 | `string` | はい | `'latn'` | | `style` | 数値のフォーマットスタイル。 | `'decimal' \| 'currency' \| 'percent' \| 'unit'` | はい | `'currency'` | | `currency` | ISO 4217 の通貨コード。ここで指定した場合、最上位の `currency` prop を上書きします。 | `string` | はい | `currency` prop | | `currencyDisplay` | 通貨の表示方法。 | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'` | はい | `'symbol'` | | `currencySign` | 負の値に対する標準表記または会計表記。 | `'standard' \| 'accounting'` | はい | `'standard'` | | `unit` | `style` を `'unit'` に変更した場合に使用する単位識別子。 | `string` | はい | — | | `unitDisplay` | 単位ラベルの幅。 | `'long' \| 'short' \| 'narrow'` | はい | `'short'` | | `minimumIntegerDigits` | 整数部の最小桁数。不足する桁はゼロで埋められます。 | `number` (`1`–`21`) | はい | `1` | | `minimumFractionDigits` | 小数点以下の最小桁数。 | `number` (`0`–`100`) | はい | 通貨に依存 | | `maximumFractionDigits` | 小数点以下の最大桁数。 | `number` (`0`–`100`) | はい | 通貨に依存 | | `minimumSignificantDigits` | 有効桁数の最小値。 | `number` (`1`–`21`) | はい | `1` | | `maximumSignificantDigits` | 有効桁数の最大値。 | `number` (`1`–`21`) | はい | `21` | | `roundingPriority` | 小数桁と有効桁のどちらを優先するか。 | `'auto' \| 'morePrecision' \| 'lessPrecision'` | はい | `'auto'` | | `roundingIncrement` | 選択した丸めの桁位置で使用する増分。 | `1 \| 2 \| 5 \| 10 \| 20 \| 25 \| 50 \| 100 \| 200 \| 250 \| 500 \| 1000 \| 2000 \| 2500 \| 5000` | はい | `1` | | `roundingMode` | 丸め時に使用する方向。 | `'ceil' \| 'floor' \| 'expand' \| 'trunc' \| 'halfCeil' \| 'halfFloor' \| 'halfExpand' \| 'halfTrunc' \| 'halfEven'` | はい | `'halfExpand'` | | `trailingZeroDisplay` | 整数値の末尾のゼロを保持するかどうか。 | `'auto' \| 'stripIfInteger'` | はい | `'auto'` | | `notation` | 標準表記、科学表記、エンジニアリング表記、またはコンパクト表記。 | `'standard' \| 'scientific' \| 'engineering' \| 'compact'` | はい | `'standard'` | | `compactDisplay` | コンパクト表記で使用する長いラベルまたは短いラベル。 | `'short' \| 'long'` | はい | `'short'` | | `useGrouping` | 桁区切り文字を表示するタイミング。 | `boolean \| 'always' \| 'auto' \| 'min2'` | はい | `'auto'`; コンパクト表記では `'min2'` | | `signDisplay` | 正または負の符号を表示するタイミング。 | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'` | はい | `'auto'` | この コンポーネント は、`options` を適用する前に `style: 'currency'`、最上位の `currency` prop、`numberingSystem: 'latn'` を適用します。したがって、`options` で指定した値はこれらのデフォルトを上書きします。 * Currency の小数桁数のデフォルトは、通貨の標準的な補助単位に基づきます。 * `compactDisplay` は、`notation` が `'compact'` の場合にのみ適用されます。 * `roundingIncrement` は、有効桁数による丸めや、`'auto'` 以外の `roundingPriority` と併用できません。 * サポートされる単位、数字体系、丸めに関するフィールド、オプション値は、JavaScript ランタイムによって異なります。 利用可能な最新のオプションとランタイムの動作については、[`Intl.NumberFormat` のオプションに関するドキュメント](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options)を参照してください。 ### `locales` [#locales] **型** `string[]` · **任意** · **デフォルト** アクティブなロケール フォーマットの対象となるロケールです。省略した場合は、アクティブなロケールが使用されます。[locales 引数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)を参照してください。 ### `name` [#name] **Type** `string` · **任意** メタデータ用に使用する、通貨フィールドの名前です。 ## 例 [#examples] *例では `gt-react` からインポートしています。ご使用のフレームワークのパッケージからインポートしてください。* ```tsx title="PriceDisplay.tsx" import { Currency } from 'gt-react'; export default function PriceDisplay({ item }) { return {item.price}; // [!code highlight] } ``` ```tsx title="PriceDisplay.tsx" import { Currency } from 'gt-react'; export default function PriceDisplay({ item }) { return {item.price}; // [!code highlight] } ``` ```tsx title="PriceDisplay.tsx" import { T, Currency } from 'gt-react'; export default function PriceDisplay({ item }) { return ( The price is {item.price}. // [!code highlight] ); } ``` ```tsx title="PriceDisplay.tsx" import { Currency } from 'gt-react'; export default function PriceDisplay({ item }) { return ( {item.price} ); } ``` ## メモ [#notes] * `` は、アクティブなロケールに合わせて通貨の値を整形しますが、通貨間の換算は行いません。 * その内容はローカルで整形され、API に送信されることはありません。 ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.