M

MLOG

日本語

JavaScript Intl APIでグローバルリーチを拡大。日付、数値、通貨などの書式設定における国際化のベストプラクティスを学び、世界中でシームレスなユーザーエクスペリエンスを実現。

JavaScript Intl API: グローバルオーディエンスのための国際化のベストプラクティス

今日の相互接続された世界では、グローバルオーディエンスに対応するWebアプリケーションを作成することが重要です。JavaScript Intl APIは、国際化（i18n）のための強力なツールを提供し、さまざまなロケールの規則に従って日付、数値、通貨などを書式設定できます。この記事では、Intl APIを活用して真にグローバルなアプリケーションを構築するためのベストプラクティスを探ります。

国際化（i18n）とローカリゼーション（l10n）の理解

Intl APIの詳細に入る前に、国際化（i18n）とローカリゼーション（l10n）の違いを理解することが重要です。I18nは、エンジニアリングの変更を必要とせずに、さまざまな言語や地域に簡単に適応できるようにアプリケーションを設計および開発するプロセスです。一方、L10nは、テキストを翻訳し、他のロケール固有の要素をカスタマイズすることにより、国際化されたアプリケーションを特定のロケールに適応させるプロセスです。

Intl APIはi18nの側面に焦点を当て、ロケールに依存するデータを処理するメカニズムを提供しますが、ローカリゼーションには通常、翻訳とロケール固有の構成の提供が含まれます。

Intl APIの主要コンポーネント

Intl APIは、国際化の特定の側面を処理するいくつかの主要なオブジェクトで構成されています。

Intl APIを使用するためのベストプラクティス

Intl APIを効果的に利用し、グローバルオーディエンスにポジティブなユーザーエクスペリエンスを提供するために、次のベストプラクティスを検討してください。

1. 正しいロケールを指定する

国際化の基礎は、正しいロケールを指定することです。ロケールは、書式設定に使用する言語、地域、および特定のバリアントを識別します。ユーザーの優先ロケールは、navigator.languageプロパティまたはAccept-Language HTTPヘッダーから取得できます。

Intlオブジェクトを作成するときに、ロケールを文字列または文字列の配列として指定できます。配列を指定すると、APIは使用可能なオプションから最適な一致ロケールを見つけようとします。

例：

const locale = navigator.language || 'en-US';
const numberFormat = new Intl.NumberFormat(locale);

ユーザーの優先ロケールが利用できない場合は、フォールバックロケールを指定できます。たとえば、ユーザーのブラウザがサポートされていないロケールを報告する場合は、デフォルトとして「en-US」を使用できます。

2. Intl.DateTimeFormatを使用して日付と時刻の書式を設定する

日付と時刻を正しく書式設定することは、ローカライズされたエクスペリエンスを提供するために重要です。Intl.DateTimeFormatオブジェクトを使用すると、特定ロケールの規則に従って日付と時刻を書式設定できます。

年、月、日、時、分、秒の形式など、さまざまなオプションを指定して書式設定をカスタマイズできます。タイムゾーンを指定して、世界中のユーザーに対して日付と時刻が正しく表示されるようにすることもできます。

例：

const locale = 'de-DE'; // ドイツ語（ドイツ）
const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'Europe/Berlin'
};

const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // 出力例： "22. Mai 2024, 14:30"
console.log(formattedDate);

この例では、現在のDateTimeをドイツ語（ドイツ）ロケールに従って書式設定し、年、月、日、時、分を含めます。「Europe/Berlin」タイムゾーンも指定します。

世界中で使用されているさまざまな日付と時刻の形式を考慮することを忘れないでください。たとえば、米国ではMM/DD/YYYYを使用しますが、他の多くの国ではDD/MM/YYYYを使用します。

3. Intl.NumberFormatを使用して、数値、通貨、およびパーセンテージの書式を設定する

Intl.NumberFormatオブジェクトは、ロケール固有の規則に従って、数値、通貨、およびパーセンテージを書式設定するための柔軟な方法を提供します。通貨、スタイル（10進数、通貨、またはパーセント）、最小および最大の小数桁数などのオプションを指定して、書式設定をカスタマイズできます。

例（通貨の書式設定）：

const locale = 'ja-JP'; // 日本語（日本）
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // 出力例： "￥12,346"
console.log(formattedAmount);

この例では、数値12345.67を日本円（JPY）として書式設定します。通貨記号（￥）とグループ化区切り記号（、）が、日本語ロケールに従って自動的に調整されることに注意してください。

例（パーセンテージの書式設定）：

const locale = 'ar-EG'; // アラビア語（エジプト）
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // 出力例： "٧٥٫٠٠٪"
console.log(formattedPercentage);

この例では、数値0.75をアラビア語（エジプト）のパーセンテージとして書式設定します。出力には、アラビア語のパーセンテージ記号（٪）と小数点以下2桁が含まれます。

通貨の書式設定に関する重要な考慮事項：

4. Intl.PluralRulesで複数形を正しく処理する

複数形ルールは、言語によって大きく異なります。たとえば、英語には単数形と複数形を持つ単純なルールがありますが、他の言語には、数値の値に基づいてより複雑なルールがあります。Intl.PluralRulesオブジェクトは、特定の数値とロケールに適切な複数形を判断するのに役立ちます。

例：

const locale = 'ru-RU'; // ロシア語（ロシア）
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (単数形)
    case 'few': return 'товара'; // tovara (少数)
    case 'many': return 'товаров'; // tovarov (多数)
    default: return 'товаров'; // デフォルトは多数
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // 出力： "5 товаров"

この例では、Intl.PluralRulesを使用して、ロシア語の単語「товар」（アイテム）の正しい複数形を取得する方法を示します。ロシア語には、数値が1、2〜4、または5〜9で終わるかどうかに応じて、異なる複数形があります。

5. Intl.ListFormatでリストを書式設定する

アイテムのリストを表示する場合、書式設定はロケールによって異なる場合があります。Intl.ListFormatオブジェクトを使用すると、さまざまな接続詞（例：「および」、「または」）とリスト区切り文字（例：カンマ、セミコロン）の使用を含む、ロケール固有の規則に従ってリストを書式設定できます。

例：

const locale = 'es-ES'; // スペイン語（スペイン）
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // 出力： "manzanas, naranjas y plátanos"
console.log(formattedList);

この例では、スペイン語（スペイン）で果物のリストを書式設定し、最後の2つのアイテムを接続するために接続詞「y」（および）を使用します。

6. Intl.RelativeTimeFormatで相対時刻を書式設定する

相対時刻（例：「昨日」、「2時間後」）を表示すると、時間の情報をユーザーフレンドリーな方法で表示できます。Intl.RelativeTimeFormatオブジェクトを使用すると、ロケール固有の規則に従って相対時刻を書式設定できます。

例：

const locale = 'fr-CA'; // フランス語（カナダ）
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // 出力： "hier"
console.log(rtf.format(2, 'day')); // 出力： "dans 2 jours"

この例では、フランス語（カナダ）で相対時刻を書式設定します。出力は、「hier」（昨日）と「dans 2 jours」（2日後）を示しています。

`numeric`オプションは、数値の表示方法を制御します。`'auto'`は、相対的な単語が利用可能な場合は（「昨日」など）表示し、そうでない場合は数値を表示します。`'always'`は常に数値を表示します。

7. Intl.Collatorで文字列を照合する

文字列の比較はロケールに依存します。文字列のソート方法は言語によって異なります。たとえば、ドイツ語では、文字「ä」は通常「a」のようにソートされますが、スウェーデン語では「z」の後にソートされます。Intl.Collatorオブジェクトを使用すると、特定のロケールのルールに従って文字列を比較できます。

例：

const locale = 'de-DE';
const collator = new Intl.Collator(locale);

const strings = ['äpfel', 'birnen', 'bananen', 'aprikosen'];
strings.sort(collator.compare);

console.log(strings); // 出力： ["äpfel", "aprikosen", "bananen", "birnen"]

この例では、Intl.Collatorを使用してドイツ語の単語の配列をソートします。「äpfel」は、「ä」がアルファベットの後半に来ていても、「aprikosen」の前にソートされることに注意してください。

8. エッジケースと欠落したデータを処理する

すべてのロケールがすべてのブラウザまたは環境でサポートされているわけではありません。ロケールが利用できない場合、またはデータが欠落している場合にエッジケースを処理することが不可欠です。次の戦略を検討してください。

9. さまざまなロケールで徹底的にテストする

国際化されたアプリケーションがサポートされているすべてのロケールで正しく動作することを確認するには、徹底的なテストが不可欠です。さまざまな文字セット、日付と時刻の形式、数値の形式、複数形ルールを使用する言語を含む、さまざまなロケールでアプリケーションをテストします。

自動テストツールを使用して、アプリケーションがさまざまなロケールで期待どおりに動作することを確認することを検討してください。

10. パフォーマンスへの影響を考慮する

Intl APIは一般的に効率的ですが、Intlオブジェクトの作成は比較的コストがかかる場合があります。パフォーマンスを最適化するには、次のことを検討してください。

Intl APIを超えて：国際化のためのさらなる考慮事項

Intl APIはデータの書式設定のための強力なツールを提供しますが、国際化には単なる書式設定以上のものが含まれます。次の追加の側面を検討してください。

結論

JavaScript Intl APIは、グローバルオーディエンスに対応するWebアプリケーションを構築するための非常に貴重なツールです。この記事で概説されているベストプラクティスに従うことで、機能的であるだけでなく、文化的にも敏感で、世界中のユーザーにとって使いやすいアプリケーションを作成できます。Intl APIの力を活用して、グローバルステージでのアプリケーションの可能性を解き放ちます。Intl APIを習得すると、場所や言語に関係なく、すべてのユーザーにとってより包括的でアクセスしやすいエクスペリエンスが得られます。