JavaScriptに国際化（I18N）を実装する方法

キーポイント

• Internationalization（I18N）は、製品とサービスを作成または変換するプロセスであり、地元の言語や文化に適応できるようにします。ローカリゼーション（L10N）は、特定の地域または言語に対して国際化ソフトウェアを調整するプロセスです。
• Globalizeは、国際化とローカリゼーションのためにJQueryチームのメンバーによって開発されたJavaScriptライブラリです。公式のUnicode CLDR JSONデータを使用し、すべての主要なブラウザーをサポートし、デジタルフォーマットと解析、日付と時刻のフォーマットと解析、相対時間のフォーマット、通貨のフォーマット、メッセージフォーマット、複数のサポート、ユニットサポートなどの機能を提供します。
• JavaScriptは、国際化API（ECMA-402とも呼ばれる）を通じて、国際化に対するネイティブサポートを提供します。ただし、グローバル化は、ブラウザ間で低くて一貫性のないサポートのためにそれを使用しませんでした。
グローバル化は、NPMを介してインストールできます。NPMは、各機能にモジュールを提供し、開発者が必要なモジュールのみを使用できるようにします。ライブラリにロケールデータをホストまたは埋め込まないことにより、コードとコンテンツを分離します。
グローバル化を使用すると、開発者は日付、数値、通貨値、解析番号、および相対日付をフォーマットできます。このライブラリのドキュメントは、これらの機能やその他の機能の使用方法に関する詳細な情報を提供します。

この記事は、Julian Motz、Panayiotis Velisarakos、Vildan Softic、Tim Severienによってレビューされました。 SitePointコンテンツを最高の状態にしてくれたすべてのSitePointピアレビューアに感謝します！

あなたが開発者であり、次のホット製品に取り組んでいると仮定します。顧客はあなたの製品が大好きで、すべてのソーシャルネットワークで非常に高い評価を受けています。さらに良いことに、CEOは新しい市場に拡大するために10,000,000ドルの資金を受け取ったばかりです。ただし、グローバルになる前に、さまざまな言語、通貨、日付形式などをサポートするために製品を更新する必要があります。どう思いますか？あなたとあなたのチームはこれを達成する責任があります。技術的な観点からは、ソフトウェアは国際化され、ローカライズされている必要があります。

Internationalization（

i18n とも呼ばれます）は、特定のローカル言語と文化に簡単に適応できるように、製品とサービスを作成または変換するプロセスです。ローカリゼーション（l10nとも呼ばれます）は、特定の地域または言語の国際化ソフトウェアを調整するプロセスです。言い換えれば、国際化とは、ソフトウェアが複数の文化（通貨形式、日付形式など）をサポートできるようにするプロセスであり、ローカライズは1つ以上の文化を実装するプロセスです。

これらの2つのプロセスは、さまざまな国に関心のある企業でしばしば採用されていますが、自分のウェブサイトで作業している個々の開発者にも役立つ可能性があります。たとえば、おそらく私はイタリア人であり、ウェブサイトを所有しています。私のウェブサイトは現在英語ですが、私はそれを国際化して、それをイタリア語にローカライズすることを決定するかもしれません。これは、ネイティブのイタリア語で英語に不慣れな人にとっては非常に有益です。

この記事では、国際化とローカリゼーションのためにjQueryチームの一部のメンバーによって開発されたJavaScriptライブラリであるGlobalizeを紹介します。この記事で示されているすべてのコードスニペットは、GitHubリポジトリにあります。

しかし、グローバル化を掘り下げる前に、プロジェクトリーダーのラファエル・ザビエル・デ・スーザの言葉でi18nについてのこの短い紹介を終わらせたいと思います：

開発者は、i18nが英語以外の言語への翻訳についてであると考えています。 I18Nは、現在のアプリケーションを複数の国または市場に拡張する必要があります。私は、i18nが「話す」ことについてであると説明しようとしてきました。すべてのアプリは、ある時点でユーザーと「通信」する必要があります。ユーザーと話をするには、アプリケーションには複数のサポート、性別の変動、日付の書式設定、デジタルフォーマット、通貨のフォーマットが必要になる場合があります。英語であっても、仕事を正しく行うのは難しい場合があります。

グローバル化とは何ですか？

グローバライズは、公式のUnicode CLDR JSONデータを利用する国際化とローカリゼーションのためのJavaScriptライブラリです。

このライブラリはオープンソースで、Rafael Xavier de SouzaとJQueryチームの一部のメンバーによって開発されています。

Globalize Unicode ConsortiumベースのUnicode Consortium Data Repository（CLDR）は、利用可能なロケールデータの最大かつ最も包括的な標準リポジトリです。したがって、ロケールデータを埋め込むライブラリとは異なり、Globalizeを使用する場合、最新のCLDRデータを常に簡単に使用できます。

このライブラリは、ブラウザとnode.jsモジュールに適しています。 Globalize 1.0は、IE9、Chrome、Firefox、Safari 5.1、Opera 12.1など、すべての主要なブラウザーをサポートしています。

このライブラリの主な関数には、

：

が含まれます

デジタルフォーマットと解析

日付と時刻のフォーマットと解析
相対時間のフォーマット
通貨形式
メッセージフォーマット
複数のサポート
ユニットサポート
• 私がGlobalizeで一番気に入っているのは、それぞれの機能にモジュールを提供することです。開発者はライブラリ全体を必要としない場合があるため、必要なモジュールを選択できます。もう1つの興味深い機能は、他のライブラリとは異なり、ライブラリにロケールデータをホストまたは埋め込まないことにより、コンテンツとは別にコードを保持することです。

しかし、グローバル化が唯一の選択肢ではありません。他の代替品に興味がある場合、Rafaelには専用のページがあります。最も注目すべき代替品はI18Nextです。

Globalize and JavaScript Internationalization API

これは皆さんにとって驚くかもしれませんが、JavaScriptは国際化API（ECMA-402とも呼ばれる）を通じて国際化に対するネイティブサポートを提供します。 INTLオブジェクトは、国際化されたAPIの名前空間として機能するウィンドウオブジェクトで利用可能なオブジェクトです。このAPIは現在、特定の言語の文字列を比較するだけでなく、数字と日付をフォーマットする方法を提供します。

国際的なAPIの存在を知っているので、Globalizeが舞台裏でそれを使用していると思うかもしれません。このアプローチは、日付と数のフォーマットのパフォーマンスを確実に改善します。ただし、ブラウザ間では低くて一貫性のないサポートのため、ライブラリはそれを使用していません。

グローバル化について議論し続ける前に、国際的なAPIを体験してほしい。

フォーマット日

私が示す最初の例は、国際APIを使用して、複数のロケールで日付をフォーマットすることです：it、us、およびgb。

// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);

// "30/6/2016"
console.log(new Intl.DateTimeFormat('it-IT').format(date));

// "6/30/2016"
console.log(new Intl.DateTimeFormat('en-US').format(date));

// "30/06/2016"
console.log(new Intl.DateTimeFormat('en-GB').format(date));

この例では、指定されたロケール（ "it-it"、 "en-us"、 "en-gb"）を使用して、dateTimeFormatコンストラクターを使用して新しい日付フォーマッタを作成します。次に、フォーマットメソッドを呼び出して、日付オブジェクトをフォーマットします。

上記のコードはJSBINとしても使用できます。

フォーマット番号

前述のように、

APIでは、数値をフォーマットすることもできます。 NumberFormatコンストラクターを使用した例を以下に示します

この2番目のコードスニペット（JSBINとして使用することもできます）の出力を見ると、イタリアでは、米国と英国よりも数字の異なる形式があることに気付くことができます。

前述のように、このAPIのサポートは低いですが、使用したい場合は、アプリケーションでこのポリフィルを使用できます。

var number = 1302.93;

// "1.302,93"
console.log(new Intl.NumberFormat('it-IT').format(number));

// "1,302.93"
console.log(new Intl.NumberFormat('us-US').format(number));

// "1,302.93"
console.log(new Intl.NumberFormat('en-GB').format(number));

今度は、国際化とローカリゼーションがどのように機能するかをよりよく理解したので、グローバル化について議論しましょう。

インストールしてグローバル化

を使用します

Globalizeは、NPM：

を通じて簡単にインストールできます

このコマンドもCLDRデータをインストールします。これは、Globalizeが使用するロケールデータをロードするために必要です（たとえば、数字や日付の言語形式で）。これら2つのパッケージをインストールした後、ライブラリを使用できます。

注：次の例では、ノードが使用されていることを前提としています。ブラウザでグローバル化を使用することに興味がある場合は、プロジェクトのホームページの例から始めることをお勧めします。 Webpackの例により、すぐに起きて実行が簡単になります。

npm install globalize cldr-data --save

次に、Globalizeを使用して、前のセクションにリストされている2つのコードスニペットを書き換えます。

フォーマット日

最初の例は、次のように実装できます

// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);

// "30/6/2016"
console.log(new Intl.DateTimeFormat('it-IT').format(date));

// "6/30/2016"
console.log(new Intl.DateTimeFormat('en-US').format(date));

// "30/06/2016"
console.log(new Intl.DateTimeFormat('en-GB').format(date));

それは単純ですが、上記のコードではいくつかのトピックをカバーできます。 Globalizeを最初に使用したとき、CLDRデータに使用される言語コードの一部が2文字しか使用していないことが少し奇妙に感じました。一貫性を維持するために、すべてのロケールに、短いバージョン（「IT」や「EN」など）ではなく、ISO 3166標準（「IT-IT」および「EN-US」など）の完全なバージョンを必要とします。イタリア人がイタリア語であると仮定するのは合理的であるように思われますが（結局イタリア語はイタリアで生まれた）、これは英語を混乱させています。 「en」とは、英国の英語ではなく、アメリカの英語を意味します。あなたが私と同じ間違いを犯さないようにしたい場合は、このテーブルをチェックすることをお勧めします。

概要を示す価値のある別の概念は、補足法全体（コードの3番目のステートメント）です。これにより、国またはロケールデータの補足情報を含むすべてのファイルがロードされます。たとえば、電話国コード（イタリアの39）、人口、いくつかのよく知られている略語、他の国の通貨の綴り方など

私が紹介したい最後のポイントは、4番目のステートメントであり、ここではAvereMainforメソッドを呼び出します。これにより、必要な国（イタリア、米国、および英国の例の例）にロケールデータを読み込むことができます。

フォーマット番号

数字をフォーマットするために、GlobalizeはFormatNumberメソッドを提供します。このメソッドの署名は

です

var number = 1302.93;

// "1.302,93"
console.log(new Intl.NumberFormat('it-IT').format(number));

// "1,302.93"
console.log(new Intl.NumberFormat('us-US').format(number));

// "1,302.93"
console.log(new Intl.NumberFormat('en-GB').format(number));

値がフォーマットされる番号である場合、オプションはカスタムメソッドの返品値のオブジェクトです。指定できるオプションのいくつかの例は次のとおりです

ラウンド：数字を丸める方法を定義します。その価値は次のいずれかになります：天井、床、丸い、または切り捨て
USEGROUPING：グループ化区切り文字を使用するかどうかを示すブール値
MinimutIntegerDigits：使用する整数数字の最小数を示す非陰性整数。

利用可能なオプションの完全なリストは、ドキュメントに記載されています。

フォーマットナンバーメソッドについて詳しく学んだので、実際にどのように適用されるかを見てみましょう。

npm install globalize cldr-data --save

通貨値をフォーマット

ライブラリは、通貨値をフォーマットするのに役立つ通貨ファッターメソッドを提供します。このメソッドは多くのオプションをサポートし、通貨のシンボル（「$」など）またはそのコード（「USD」など）などを使用するかなど、番号を丸めたいかどうかを定義できます。

数字を分析します

// 包含 Globalize 库
var Globalize = require('globalize');

// 包含 CLDR 数据
var cldrData = require('cldr-data');

// 加载补充数据
Globalize.load(cldrData.entireSupplemental());

// 加载指定语言环境的数据
Globalize.load(cldrData.entireMainFor('it', 'en', 'en-GB'));

// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);

// "30/6/2016"
console.log(Globalize('it').formatDate(date));

// "6/30/2016"
console.log(Globalize('en').formatDate(date));

// "30/06/2016"
console.log(Globalize('en-GB').formatDate(date));

数字の解決は、ユーザー入力を処理するときなど、実行する必要があるタスクでもあります。次の例は、これを行う方法を示しています

相対日付

のフォーマット

最新のWebアプリケーションのもう1つの非常に一般的な機能は、相対的な用語で日時を表示することです。たとえば、1日の完全な日付を表示する代わりに、「昨日」や「先週」などのラベルを見つけることがよくあります。 Globalizeを使用すると、このタスクは、relativeTimeFormatterメソッドで簡単に実現できます。使用の例は次のとおりです

// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);

// "30/6/2016"
console.log(new Intl.DateTimeFormat('it-IT').format(date));

// "6/30/2016"
console.log(new Intl.DateTimeFormat('en-US').format(date));

// "30/06/2016"
console.log(new Intl.DateTimeFormat('en-GB').format(date));

Globalizeは、この記事で説明していない他の多くの方法を提供します。ただし、ここに示されているトピックは、始めるのに役立つ十分な情報を提供する必要があります。さらに、このライブラリのドキュメントは非常に詳細です。

結論

この記事では、国際化とローカリゼーションが何であるか、そして製品の市場を拡大するために非常に重要である理由について説明します。いくつかのサポートされた機能に言及して、国際化されたAPIを簡単に紹介しました。その後、それらの使用例をいくつか示しました。

この記事の第2部では、jQueryチームが国際化とローカリゼーションのために開発したJavaScriptライブラリであるGlobalizeを紹介します。ライブラリは非常に強力であり、プロジェクトを国際化するために必要なすべての方法が付属しています。たとえば、数字、フォーマット日、フォーマット通貨値などです。図書館が時間を節約していると思う場合は、プロジェクトに貢献することで、お気軽にお返事をしてください。

この記事で示されているすべてのコードスニペットがGitHubリポジトリにあることを繰り返して思い出させてください。

JavaScript（i18n）

での国際化に関する

FAQ（FAQ）

JavaScriptの国際化（I18N）の重要性は何ですか？

多くの場合、I18Nと略される国際化は、特にグローバルな視聴者向けのアプリケーションを作成する場合、Web開発の重要な側面です。複数の言語と地域の違いをサポートするために、ウェブサイトまたはアプリケーションを準備することが含まれます。これは、Web開発で広く使用されている言語であるJavaScriptで特に重要です。 JavaScriptにI18Nを実装することにより、開発者はさまざまなユーザーグループを満たすアプリケーションを作成し、ユーザーエクスペリエンスとアクセシビリティを向上させることができます。また、アプリケーションのローカライズにも役立ち、アプリケーションのカバレッジと使いやすさを大幅に改善できます。

JavaScriptではI18Nはどのように機能しますか？

JavaScriptの

i18nは、開発者がアプリケーションのコードからロケール固有の文字列またはメッセージを外部化できるようにすることで機能します。これらの文字列は、多くの場合、リソースパッケージと呼ばれる別のファイルに保存されます。各リソースパッケージは、特定のロケールに対応しています。アプリケーションが実行されると、ユーザーのロケールを認識し、対応するリソースパッケージをロードします。これにより、アプリケーションはユーザーの優先言語でメッセージとコンテンツを表示できます。

JavaScriptにi18nを実装するための人気のあるライブラリは何ですか？

JavaScriptにi18nを実装するために利用できるライブラリがいくつかあります。最も人気のあるライブラリには、I18Next、I18N-JS、Globalizeが含まれます。これらのライブラリは、言語検出、複数形、数値形式などの国際化を促進するためのさまざまな機能を提供します。また、React、Angular、Vue.jsなどのさまざまなフレームワークをサポートしているため、Web開発のための汎用性の高いツールになります。

JavaScriptプロジェクトでi18n-jsライブラリを使用する方法は？

JavaScriptプロジェクトでI18N-JSライブラリを使用するには、最初にNPMまたはYARNを使用してインストールする必要があります。インストールしたら、プロジェクトにインポートして、その機能の使用を開始できます。このライブラリは、文字列を翻訳し、数値と日付をフォーマットする機能を提供します。また、翻訳を別のJSONファイルに定義することもできます。これは、ライブラリがユーザーのロケールに従ってこれらのファイルをロードできます。

ライブラリを使用せずにJavaScriptにi18nを実装できますか？

はい、i18nはライブラリを使用せずにJavaScriptに実装できます。これは、コードからロケール固有の文字列を手動で外部化し、個別のファイルに保存することで実行できます。ただし、より大きなアプリケーションの場合、このアプローチは時間がかかり、複雑になる場合があります。ライブラリを使用してプロセスを簡素化し、アプリケーションの国際化を強化する追加機能を提供します。

i18nの複数形に対処する方法は？

I18Nでの複数形成の処分は、異なる言語で異なる複数ルールのために難しい場合があります。ただし、多くのI18Nライブラリは、多元化を処理する能力を提供します。たとえば、I18N-JSライブラリは、ユーザーのロケールに従って複数形を処理できる複数形関数を提供します。

私のアプリケーションの国際化をテストする方法は？

アプリケーションの国際化をテストするには、アプリケーションがユーザーのロケールに基づいて異なる言語のコンテンツとフォーマットを正しく表示するかどうかを確認することが含まれます。これは、ブラウザ内のロケール設定を手動で変更するか、自動テストツールを使用することで実行できます。また、翻訳の不足や誤った複数形式など、エッジケースを確認することも重要です。

i18nで日付と数字の形式を処理する方法は？

日付と数の形式は、ロケール間でかなり異なる場合があります。多くのI18Nライブラリは、ユーザーのロケールに従って日付と数値をフォーマットする機能を提供します。たとえば、I18N-JSライブラリは、これらのタスクを処理できるフォーマットデートおよびフォーマンバル機能を提供します。

i18nで右から左（RTL）言語を処理する方法は？

i18nの右から左（RTL）言語の処理には、ユーザーのロケールに基づいてアプリケーションのレイアウトとテキストの方向を調整することが含まれます。これは、CSSおよびHTMLプロパティを使用して実行できます。一部のI18Nライブラリは、RTL言語を処理する機能も提供します。

I18Nを使用したローカリゼーション（L10N）を処理する方法は？

通常、L10Nと略される

ローカリゼーションには、翻訳コンテンツ、日付や数字のフォーマットなど、特定のロケールにアプリケーションを適応させることが含まれます。 I18Nは複数のロケールをサポートするためにアプリケーションを準備しますが、L10Nは特定のロケールごとにこれらの調整を実装することを伴います。多くのI18Nライブラリも、ローカリゼーションを処理する機能を提供します。

以上がJavaScriptに国際化（I18N）を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。