通貨をシンボル、コード、または名前として表示する方法

はじめに

価格や金額を表示する際、通貨の表現方法を決める必要があります。商品価格は$25、USD 25、または25 USドルなど、様々な形式で表示できます。各形式には異なる目的があり、異なるコンテキストでより適切に機能します。

シンボル形式は、ユーザーがどの通貨を期待するかを知っている日常的なショッピングインターフェースに適しています。コード形式は複数の通貨が登場する国際的なビジネス文書において曖昧さを排除します。名前形式はアクセシビリティツールや教育コンテンツにおいて最大限の明確さを提供します。

JavaScriptでは、Intl.NumberFormatのcurrencyDisplayオプションを使用して通貨の表示方法を制御できます。このレッスンでは、利用可能な4つの形式、ロケールによる違い、そして特定のユースケースに適した形式の選び方について説明します。

currencyDisplayオプションの理解

currencyDisplayオプションは、金額をフォーマットする際に通貨単位がどのように表示されるかを制御します。数値自体は変更せず、通貨の表現方法のみを変更します。

利用可能な4つの値があります：

symbolは$や€などのローカライズされた通貨記号を表示します
narrowSymbolはUS$の代わりに$のようなコンパクトな記号を表示します
codeはUSDやEURなどのISO通貨コードを表示します
nameは「USドル」や「ユーロ」などの完全な通貨名を表示します

各形式は同じ金額の異なる視覚的表現を作成します。選択はユーザーインターフェースの要件、利用可能なスペース、およびユーザーの期待に依存します。

日常的な表示にシンボル形式を使用する

symbol形式はcurrencyDisplayのデフォルト値です。特定のロケールのユーザーが見ることを期待するローカライズされた通貨記号を表示します。

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
});

console.log(formatter.format(25));
// 出力: "$25.00"

この形式はユーザーにとって最も馴染みのある表現を生成します。アメリカ人はドル記号を、ヨーロッパ人はユーロ記号を、イギリス人はポンド記号を見ることを期待しています。

シンボルはロケールと通貨の両方に基づいて適応します。米ドルをドイツのロケールでフォーマットすると、フォーマッターは国の指定を含むローカライズされたシンボルを使用します。

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
});

console.log(usFormatter.format(25));
// 出力: "$25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
});

console.log(deFormatter.format(25));
// 出力: "25,00 $"

ドイツのフォーマッターは金額の後にドル記号を配置し、小数点区切りにカンマを使用していることに注目してください。これらのロケール固有の規則は自動的に適用されます。

異なるロケールでユーロをフォーマットすると、ユーロ記号は表示されますが、フォーマット規則は変わります。

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'symbol'
});

console.log(usFormatter.format(25));
// 出力: "€25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'symbol'
});

console.log(deFormatter.format(25));
// 出力: "25,00 €"

シンボル形式は、ユーザーが単一の通貨コンテキスト内で操作する場合に適しています。USDで価格を表示する米国のeコマースサイトは安全にドル記号を使用できます。EURで価格を表示するヨーロッパのサイトはユーロ記号を使用できます。

ただし、複数の通貨が類似したシンボルを共有する場合、シンボル形式は曖昧さを生じさせる可能性があります。カナダドル、オーストラリアドル、米ドルはすべてドル記号を使用します。このような場合、一部のロケールでは区別するために国のプレフィックスを追加します。

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'symbol'
});

console.log(usFormatter.format(25));
// 出力: "CA$25.00"

米国ロケールでフォーマットする場合、フォーマッターはカナダドルと米ドルを区別するためにCA$を追加します。

コンパクトな表示のためのnarrowSymbol形式の使用

「narrowSymbol」形式は、国のプレフィックスなしで通貨記号を表示します。これにより、スペースが限られたインターフェースに適した、よりコンパクトな表現が可能になります。

const symbolFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
});

console.log(symbolFormatter.format(25));
// 出力: "$25.00"

const narrowFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'narrowSymbol'
});

console.log(narrowFormatter.format(25));
// 出力: "$25.00"

米国ロケールでの米ドルの場合、国のプレフィックスが不要なため、両方の形式は同じ出力を生成します。違いは、国の表示を含む可能性のある通貨をフォーマットする際に明らかになります。

const symbolFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'symbol'
});

console.log(symbolFormatter.format(25));
// 出力: "CA$25.00"

const narrowFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'narrowSymbol'
});

console.log(narrowFormatter.format(25));
// 出力: "$25.00"

narrow symbol形式はCAプレフィックスを削除し、ドル記号のみを表示します。これによりスペースが節約されますが、カナダドルと米ドルの区別がなくなります。

narrowSymbolは、スペースが限られていて、通貨のコンテキストがインターフェースの他の部分から明確な場合に使用します。モバイルアプリ、コンパクトなダッシュボード、データテーブルは、この短い形式の恩恵を受けます。ただし、通貨セレクターやヘッダーラベルなど、他の手段を通じてユーザーがどの通貨を閲覧しているかを判断できるようにしてください。

narrow形式は、異なるロケールにおける他の通貨にも影響します。

const narrowFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'narrowSymbol'
});

console.log(narrowFormatter.format(25));
// 出力: "25,00 €"

各ロケールは、現地の慣習に基づいて独自のnarrow symbol形式を定義しています。

明確な表示のためのコード形式の使用

code形式は、記号の代わりにISO 4217通貨コードを表示します。この3文字のコードは、各通貨を曖昧さなく一意に識別します。

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code'
});

console.log(formatter.format(25));
// 出力: "USD 25.00"

コードは記号の代わりに表示され、金額がどの通貨を表しているかを即座に明確にします。この形式はすべてのロケールで一貫した略語で機能します。

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'code'
});

console.log(usFormatter.format(25));
// 出力: "EUR 25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'code'
});

console.log(deFormatter.format(25));
// 出力: "25,00 EUR"

EURコードは両方の形式に表示されますが、位置と数値の書式はロケールの規則に従います。普遍的な通貨コードとロケール固有の数値書式のこの組み合わせにより、コード形式は国際的なコンテキストで価値があります。

コード形式は、記号を共有する通貨間の混乱を排除します。

const usdFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code'
});

console.log(usdFormatter.format(25));
// 出力: "USD 25.00"

const cadFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'code'
});

console.log(cadFormatter.format(25));
// 出力: "CAD 25.00"

const audFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'AUD',
  currencyDisplay: 'code'
});

console.log(audFormatter.format(25));
// 出力: "AUD 25.00"

各ドルのバリエーションには異なるコードが割り当てられます。ユーザーは米ドル、カナダドル、オーストラリアドルを即座に区別できます。

財務報告書、国際的な請求書、会計システム、および通貨の明確さが重要なあらゆるコンテキストでコード形式を使用してください。この形式は、記号がエンコーディングの問題を引き起こす可能性があるAPIやデータエクスポートでもうまく機能します。

トレードオフは親しみやすさの低下です。ほとんどの消費者は$を認識していますが、CADが何を表しているのかを即座に知らないかもしれません。対象者がコードを理解している場合や、精度が親しみやすさよりも重要な場合にコードを使用してください。

最大限の明確さを得るための名前形式の使用

name 形式は、ロケールの言語で通貨の完全な名前を表示します。これにより、金額がどの通貨を表しているかについて完全な明確さを提供します。

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
});

console.log(formatter.format(25));
// 出力: "25.00 US dollars"

通貨名がスペルアウトされて表示され、金額が何を表しているかについてあいまいさがありません。この形式はアクセシビリティにとって特に価値があります。スクリーンリーダーは通貨名を明確に発音できますが、記号は一貫性なく発表される可能性があります。

名前はロケールに適応し、適切な言語で表示されます。

const enFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});

console.log(enFormatter.format(25));
// 出力: "25.00 euros"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});

console.log(deFormatter.format(25));
// 出力: "25,00 Euro"

const frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});

console.log(frFormatter.format(25));
// 出力: "25,00 euros"

英語では「euros」、ドイツ語では「Euro」、フランス語では「euros」を使用します。APIはこれらの言語的なバリエーションを自動的に処理し、適切な場合には複数形も含みます。

異なる通貨は、各ロケールに適した言語でその名前を表示します。

const enFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'JPY',
  currencyDisplay: 'name'
});

console.log(enFormatter.format(1000));
// 出力: "1,000 Japanese yen"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'JPY',
  currencyDisplay: 'name'
});

console.log(deFormatter.format(1000));
// 出力: "1.000 Japanische Yen"

英語では「Japanese yen」と表示され、ドイツ語では「Japanische Yen」と表示されます。このローカライゼーションにより、ユーザーは自分の言語で馴染みのない通貨を理解するのに役立ちます。

明確さがスペースよりも重要な場合は、名前形式を使用してください。教育コンテンツ、アクセシビリティに焦点を当てたインターフェース、およびユーザーが馴染みのない通貨に遭遇する可能性のあるコンテキストは、スペルアウトされた名前から恩恵を受けます。この形式は、通貨名が記号よりも処理しやすい音声インターフェースにも適しています。

トレードオフはスペースです。通貨名は記号やコードよりもかなり長くなります。コンパクトなモバイルインターフェースでは、$25.00で問題ない場所に「25.00 US dollars」を収めるのに苦労するかもしれません。

適切な表示形式の選択

currencyDisplay の値は、スペースの制約、ユーザーの馴染み度、および曖昧さの懸念に基づいて選択してください。

単一の通貨で操作するような日常的なインターフェースでは symbol を使用してください。Eコマースサイト、価格ページ、消費者向けアプリケーションではシンボルが適しています。ユーザーはシンボルを素早く認識でき、最小限のスペースしか取りません。

スペースが非常に限られており、通貨のコンテキストが明確な場合は narrowSymbol を使用してください。モバイルアプリ、コンパクトな表、ダッシュボードウィジェットは、より短い形式の恩恵を受けます。インターフェースの他の場所で通貨が識別されていることを確認してください。

複数の通貨を曖昧さなく区別する必要がある場合は code を使用してください。金融アプリケーション、通貨コンバーター、国際ビジネスツール、会計システムはコードが提供する精度を必要とします。この形式はシンボルが問題を引き起こす可能性がある技術的なコンテキストでもうまく機能します。

最大限の明確さが必要な場合は name を使用してください。アクセシビリティに焦点を当てたインターフェース、教育コンテンツ、音声インターフェース、馴染みのない通貨のコンテキストでは、スペルアウトされた名前が役立ちます。この形式は国際通貨について学ぶユーザーにも役立ちます。

ユーザーが形式を切り替えられるようにすることで、同じデータの複数のビューを提供できます。金融ダッシュボードはデフォルトでシンボルを表示し、詳細な分析のためにコードに切り替えるオプションを提供することができます。通貨コンバーターはインターフェースでコードを使用し、ツールチップで名前を表示することができます。

ユーザーの専門知識レベルを考慮してください。金融の専門家は通貨コードを理解しています。一般消費者はシンボルを期待します。国際的なユーザーは通貨を区別するためにコードが必要かもしれません。アクセシビリティのニーズを持つユーザーは名前から恩恵を受けます。

currencyDisplayと他のオプションの組み合わせ

currencyDisplay オプションは他のすべての数値フォーマットオプションと連携します。通貨形式を選択しながら、小数点以下の桁数、丸め、符号の表示を制御できます。

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(formatter.format(25.5));
// 出力: "USD 25.50"

コード形式は指定された小数点以下の桁数設定で表示されます。currencyDisplay は signDisplay、notation、またはカスタム丸めルールなど、他のオプションと組み合わせることができます。

異なる表示形式は会計表記法でも機能します。

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name',
  currencySign: 'accounting'
});

console.log(formatter.format(-25));
// 出力: "(25.00 US dollars)"

会計形式の括弧はスペルアウトされた通貨名と組み合わされます。

覚えておくべきこと

currencyDisplayオプションは、フォーマットされた金額で通貨単位がどのように表示されるかを制御します。日常的な表示にはsymbolを、スペースが限られたインターフェースにはnarrowSymbolを、明確な国際的コンテキストにはcodeを、そして最大限の明確さとアクセシビリティにはnameを使用してください。

利用可能なスペース、ユーザーの専門知識、通貨間の曖昧さが懸念されるかどうかに基づいてフォーマットを選択してください。currencyDisplayを他のフォーマットオプションと組み合わせて、アプリケーションに必要な正確な表現を作成できます。