CultureInfoFormatter クラスを使用したグローバライズモジュール

[アーティクル]
03/08/2023

この記事では、CultureInfoFormatter クラスを使用したモジュールのグローバライズ方法について説明します。

オンラインサイトのグローバリゼーションには、文字列のローカライズだけでなく、さまざまな言語や Web サイトが動作している地域の数値、日付、および通貨の書式設定も含める必要があります。

Microsoft Dynamics 365 Commerce オンラインソフトウェア開発キット (SDK) は、数値、通貨、および日付と時刻の書式に関する一般的なグローバリゼーションの要件を満たすのに役立つ CultureInfoFormatter クラスを提供しています。

モジュールビューファイル内の CultureInfoFormatter クラスにアクセスする

CultureInfoFormatter クラスのインスタンスは自動的に作成され、モジュールビューで this.props.context オブジェクトを通してアクセスすることができます。次の例は、CultureInfoFormatter メソッドを使用して通貨に書式設定をする方法を示しています。

public render(): JSX.Element | null {
    ...
    // this.props.context.cultureFormatter contains an initialized formatter
    // with locale of 'en-US' in this example
    const intlFormatter = this.props.context.cultureFormatter
    intlFormatter.formatCurrency(34.12);
    // expected output: $ 34.12
}

CultureInfoFormatter クラスのインスタンスをコンストラクトする

CultureInfoFormatter クラスのコンストラクターは、1 つの引数 lang-locale を使用します。

lang-locale 引数は、有効な BCP-47 言語タグである必要があります。言語タグが指定されていない場合、既定値の 'en-US' が使用されます。言語タグは、大文字と小文字を区別しません。ただし、慣例として、通常、ロケールは大文字化されます。

例

import {CultureInfoFormatter} from '@msdyn365-commerce/core';

// Default constructor will use 'en-US' for locale
let intlFormatter = new CultureInfoFormatter();

// Constructs a new intl formatter using the French language as spoken in France
intlFormatter = new CultureInfoFormatter('fr-FR');

// Constructs a new intl formatter using the English language as spoken in Great Britain
intlFormatter = new CultureInfoFormatter('en-GB');

CultureInfoFormatter クラスの書式設定関数

CultureInfoFormatter クラスは、次の書式設定関数を提供します。

通貨のフォーマット
日付の書式設定
時間の書式設定
数値の書式設定

通貨のフォーマット

特定のロケールの規則に従って通貨に書式設定するには、次の例に示すように formatCurrency() メソッドを使用します。

/**
 * Returns a localized currency formatted version of a price.
 *
 * @param price Either a string or number representing the price that will be localized and formatted
 * @param currencyCode Optional argument. The three letter currency code that will be used for formatting the currency.
 * If the currency code is not provided the locale will be used to determine the best fit currency code.
 */
formatCurrency(price: string | number, currencyCode?: string): string;

currencyCode 引数はオプションです。指定されている場合は、ISO 4217 形式である必要があります。 currencyCode 引数を指定しない場合、フォーマッターはロケールを使用して、使用するのに最適な通貨コードを決定します。

通貨の書式設定の例

import {CultureInfoFormatter} from '@msdyn365-commerce/core';

// Set locale to fr-FR
let cultureInfoFormatter = new CultureInfoFormatter('fr-FR');

// Using a string argument for the price
cultureInfoFormatter.formatCurrency('34.12', 'eur');
// expected output:  "34,12 €"

// Using a number argument for the price and letting the formatter find
// the best currency code to use from the locale given
cultureInfoFormatter.formatCurrency(34.12); 
// expected output: "34,12 €"

cultureInfoFormatter = new CultureInfoFormatter('en-IN');
cultureInfoFormatter.formatCurrency(34.12, 'inr');
// expected output: ₹ 34.12

日付の書式設定

特定のロケールの規則に従って日付に書式設定するには、次の例に示すように formatDate() メソッドを使用します。

バージョン 1.27.7 およびそれ以降のSDK

/**
 * Returns a localized formatted version of a date
 *
 * @param date Date object or valid date string representing the date that will be localized and formatted
 * @param options An optional argument that controls the formatting.
 */
public formatDate = (date: Date | string, options?: IDateFormatOptions): string

1.27.7 より前のバージョンの SDK

/**
 * Returns a localized formatted version of a date
 *
 * @param date Date object representing the date that will be localized and formatted
 * @param options An optional argument that controls the formatting.
 */
formatDate(date: Date, options?: IDateFormatOptions): string;

options 引数はオプションです。これにより、ローカライズと書式設定の制御ができます。日付の書式設定プロパティの詳細については、IDateFormatOptions を参照してください。

日付の書式設定の例

import {CultureInfoFormatter} from '@msdyn365-commerce/core';
const testDate = new Date(2012, 11, 20, 3, 0, 0); // 12/20/2012 (in US format-mm/dd/yyyy)
let cultureInfoFormatter = new CultureInfoFormatter('en-US');

// Basic format with no options
cultureInfoFormatter.formatDate(testDate);
// expected output:  "12/20/2012"

// Set lang-locale to English as spoken in Great Britain
cultureInfoFormatter = new CultureInfoFormatter('en-GB');
cultureInfoFormatter.formatDate(testDate);
// expected output:  "20/12/2012"

// Set lang-locale to German as spoken in Germany
cultureInfoFormatter = new CultureInfoFormatter('de-DE');

let options: IDateFormatOptions = <IDateFormatOptions>{};
options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

cultureInfoFormatter.formatDate(testDate);
// expected output:  "Donnerstag, 20. Dezember 2012"

時間の書式設定

特定のロケールの規則に従って時刻に書式設定するには、次の例に示すように formatTime() メソッドを使用します。

バージョン 1.27.7 およびそれ以降のSDK

/**
 * Returns a localized formatted version of a time
 *
 * @param time Date object or valid date string representing the time that will be localized and formatted
 * @param options An optional argument that controls the formatting
 */
public formatTime = (time: Date | string, options?: ITimeFormatOptions): string

1.27.7 より前のバージョンの SDK

/**
 * Returns a localized formatted version of a time
 *
 * @param time Date object representing the time that will be localized and formatted
 * @param options An optional argument that controls the formatting
 */
formatTime(time: Date, options?: ITimeFormatOptions): string;

options 引数はオプションです。これにより、ローカライズと書式設定の制御ができます。時刻の書式設定プロパティの詳細については、ITimeFormatOptions を参照してください。

時刻の書式設定の例

import {CultureInfoFormatter} from '@msdyn365-commerce/core';
const testDate = new Date(2012, 11, 20, 13, 34, 23); // 1:34:23 PM in en-US Format
let cultureInfoFormatter = new CultureInfoFormatter('en-US');
let options: ITimeFormatOptions = <ITimeFormatOptions>{};
options.hour12 = false;
// Format time with 24 hour time
cultureInfoFormatter.formatTime(testDate, options);

cultureInfoFormatter = new CultureInfoFormatter('fr-FR');
options = <ITimeFormatOptions>{};
options.second = 'numeric';
cultureInfoFormatter.formatTime(testDate, options);
// expected output:  "13:34:23"

数値の書式設定

特定のロケールの規則に従って数値に書式設定するには、次の例に示すように formatNumber() メソッドを使用します。

/**
 * Returns a localized formatted version of a number
 *
 * @param value The number that will be localized and formatted
 * @param options An optional argument that controls the formatting.
 */
formatNumber(value: number, options?: INumberFormatOptions): string;

options 引数はオプションです。これにより、ローカライズと書式設定の制御ができます。数値の書式設定プロパティの詳細については、INumberFormatOptions を参照してください。

数値の書式設定の例

import {CultureInfoFormatter} from '@msdyn365-commerce/core';

let cultureInfoFormatter = new CultureInfoFormatter('en-US');
cultureInfoFormatter.formatNumber(123456789);
// expected output:  "123,456,789"
cultureInfoFormatter.formatNumber(1234567.89);
// expected output:  "1,234,567.89"

// German language uses comma as decimal separator and period for thousands
cultureInfoFormatter = new CultureInfoFormatter('de-DE');
cultureInfoFormatter.formatNumber(1234567.89);
// expected output:  "1.234.567,89"

const options: INumberFormatOptions = <INumberFormatOptions>{};
options.style = 'percent';
(cultureInfoFormatter.formatNumber(0.7842, options);
// expected output:  "78,42 %"

// Setting the language to Arabic formats numbers using Arabic numerals
cultureInfoFormatter = new CultureInfoFormatter('ar-EG');
cultureInfoFormatter.formatNumber(1234567.89);
// expected output:  "١٬٢٣٤٬٥٦٧٫٨٩"

書式設定のオプション

このセクションでは、ITimeFormatOptions、IDateFormatOptions、および INumberFormatOptions インターフェイスの書式設定オプションとプロパティの詳細について説明します。

ITimeFormatOptions

interface ITimeFormatOptions {
    localeMatcher?: 'best fit' | 'lookup';
    formatMatcher?: 'basic' | 'best fit';
    hourCycle?: 'h11' | 'h12' | 'h23' | 'h24';
    timeZone?: string;
    hour12?: boolean;
    hour?: 'numeric' | '2-digit';
    minute?: 'numeric' | '2-digit';
    second?: 'numeric' | '2-digit';
    timeZoneName?: 'short' | 'long';
}

プロパティの詳細

Name	型	許可された値	Description
localeMatcher	列挙型	「最適」または「検索」	ロケールの照合と検索に使用するアルゴリズムを指定します。「検索」の一致は、BCP-47 で指定されている検索アルゴリズムに従います。「最適」の一致により、ランタイムが検索アルゴリズムの結果として少なくとも要求に適しているロケールを提供するようにできますが、その結果よりも適している場合があります。
formatMatcher	列挙型	「基本」または「最適」	使用される書式照合アルゴリズムと、それがいつ使用されるかを指定します。既定値は「最適」です。
hourCycle	列挙型	'h11'、'h12'、'h23'、または 'h24'	使用する時間サイクルを指定します。
timeZone	文字列	IANA タイムゾーンデータベースにより定義されているタイムゾーン名	使用するタイムゾーンを指定します。既定値は、ランタイムの既定のタイムゾーンです。環境に国際化のネイティブサポートがなく、国際化のポリフィルがされている場合、このオプションはサポートされません (国際化のポリフィルはタイムゾーンをサポートしないため)。
hour12	ブール型	「はい」または「いいえ」	24 時間の代わりに 12 時間を使用するかどうかを指定します。このオプションは hourCycle プロパティを上書きし、既定値はロケールに依存します。
時間	列挙型	「数値」または「2 桁」	時間の表示を指定します。「2 桁」の値を使用すると、時間は強制的に 2 桁で表示されます。
分	列挙型	「数値」または「2 桁」	分の表示を指定します。「2 桁」の値を使用すると、分は強制的に 2 桁で表示されます。
秒	列挙型	「数値」または「2 桁」	秒の表示を指定します。「2 桁」の値を使用すると、秒は強制的に 2 桁で表示されます。
timeZoneName	列挙型	「ショート」または「ロング」	タイムゾーン名の表示を指定します。「ショート」値は、タイムゾーンの 3 文字の省略形を表示します。「ロング」値は、完全な名前を表示します。

IDateFormatOptions

interface IDateFormatOptions extends ITimeFormatOptions {
    weekday?: 'narrow' | 'short' | 'long';
    year: 'numeric' | '2-digit';
    month?: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';
    day?: 'numeric' | '2-digit';
}

メモ

時刻オブジェクトは日付オブジェクトのサブコンポーネントなので、ITimeFormatOptions インターフェイスで提供されるプロパティはすべて、IDateFormatOptions インターフェイスで使用できます。

プロパティの詳細

Name	型	許可された値	Description
平日	列挙型	「ナロー」、「ショート」または「ロング」	日の表示を指定します。「ナロー」値は、日を 1 文字または 2 文字で表示します。「ショート」値は、3 文字で表示します。「ロング」値は、完全な名前を表示します。
年	列挙型	「数値」または「2 桁」	年の表示を指定します。 2 桁値は、年の最も重要な数字 2 桁を表示します (たとえば、2018 年は 18 と表示します)。「数値」値は、年全体を表示します。
か月	列挙型	「数値」、「2 桁」、「ナロー」、「ショート」、または「ロング」	月の表示を指定します。「数値」値は、月の数値表現を示します (たとえば、4 月は 4 と表示します)。「2 桁」値は、2 桁の数値を表示します (たとえば、4 月は 04 と表示します)。「ナロー」値は、2 文字で表示します (たとえば、4 月は AP と表示します)。「ショート」値は、3 文字で表示します (たとえば、4 月は Apr と表示します)。「ロング」値は、完全な名前を表示します。
曜日	列挙型	「数値」または「2 桁」	日の表示を指定します。「2 桁」の値を使用すると、日は強制的に 2 桁で表示されます。

各日時コンポーネントプロパティに対して既定値は定義されていません。ただし、すべてのコンポーネントプロパティが未定義の場合、年、月、および日プロパティについては「数値」値を前提とします。

INumberFormatOptions

export interface INumberFormatOptions {
    localeMatcher?: 'best fit' | 'lookup';
    style?: 'decimal' | 'percent' | 'currency';
    currency?: string;
    minimumIntegerDigits?: number;
    minimumFractionDigits?: number;
    maximumFractionDigits?: number;
    minimumSignificantDigits?: number;
    maximumSignificantDigits?: number;
}

プロパティの詳細

Name	型	許可された値	Description
localeMatcher	列挙型	「最適」または「検索」	ロケールの照合と検索に使用するアルゴリズムを指定します。「検索」の一致は、BCP-47 で指定されている検索アルゴリズムに従います。「最適」の一致により、ランタイムが検索アルゴリズムの結果として少なくとも要求に適しているロケールを提供するようにできますが、その結果よりも適している場合があります。
スタイル	列挙型	「数値」、「パーセント」、または「通貨」	使用する書式スタイルを指定します。数値の書式設定には「数値」、通貨の書式設定には「通貨」、割合の書式設定には「パーセント」の値を使用します。既定値は、「数値」です。
通貨	文字列	3 文字の ISO 4217 通貨コード	通貨の書式設定に使用する通貨を指定します。既定値はありません。スタイルプロパティが「通貨」に設定されている場合、通貨プロパティを指定する必要があります。
minimumIntegerDigits	番号	1 ～ 21 までの整数値を入力します	使用する整数の桁数の最小数を指定します。既定値は 1 です。
minimumFractionDigits	番号	0 ～ 20 までの整数値を入力します	使用する小数の桁数の最小数を指定します。数値および割合の書式設定の既定値は 0 (ゼロ) です。通貨の書式設定の既定値は、ISO 4217 標準に従って指定されます。
maximumFractionDigits	番号	0 ～ 20 までの整数値を入力します	使用する小数の桁数の最大数を指定します。
minimumSignificantDigits	番号	1 ～ 21 までの整数値を入力します	使用する有効桁数の最小数を指定します。既定値は 1 です。
maximumSignificantDigits	番号	1 ～ 21 までの整数値を入力します	使用する有効桁数の最大数を指定します。既定値は 21 です。

追加リソース

ローカル開発中にサインイン状態をモックする

コンテキストに基づいてモジュールプロパティを表示するように構成する

Azure Key Vault を使用してキー管理のセキュリティを強化する

次の方法で共有

CultureInfoFormatter クラスを使用したグローバライズモジュール

モジュールビューファイル内の CultureInfoFormatter クラスにアクセスする

CultureInfoFormatter クラスのインスタンスをコンストラクトする

例

CultureInfoFormatter クラスの書式設定関数

通貨のフォーマット

通貨の書式設定の例

日付の書式設定

バージョン 1.27.7 およびそれ以降のSDK

1.27.7 より前のバージョンの SDK

日付の書式設定の例

時間の書式設定

バージョン 1.27.7 およびそれ以降のSDK

1.27.7 より前のバージョンの SDK

時刻の書式設定の例

数値の書式設定

数値の書式設定の例

書式設定のオプション

ITimeFormatOptions

プロパティの詳細

IDateFormatOptions

プロパティの詳細

INumberFormatOptions

プロパティの詳細

追加リソース

フィードバック

その他のリソース

次の方法で共有

CultureInfoFormatter クラスを使用したグローバライズ モジュール

モジュール ビュー ファイル内の CultureInfoFormatter クラスにアクセスする

CultureInfoFormatter クラスのインスタンスをコンストラクトする

例

CultureInfoFormatter クラスの書式設定関数

通貨のフォーマット

通貨の書式設定の例

日付の書式設定

バージョン 1.27.7 およびそれ以降のSDK

1.27.7 より前のバージョンの SDK

日付の書式設定の例

時間の書式設定

バージョン 1.27.7 およびそれ以降のSDK

1.27.7 より前のバージョンの SDK

時刻の書式設定の例

数値の書式設定

数値の書式設定の例

書式設定のオプション

ITimeFormatOptions

プロパティの詳細

IDateFormatOptions

プロパティの詳細

INumberFormatOptions

プロパティの詳細

追加リソース

フィードバック

その他のリソース

CultureInfoFormatter クラスを使用したグローバライズモジュール

モジュールビューファイル内の CultureInfoFormatter クラスにアクセスする