まずはこちらを御覧ください
ここで使われる多言語対応の技術について説明します。
i18nとl10n
i18nとl10nは、ソフトウェアの国際化と地域化に関連する用語です。
i18nは「internationalization」の略で、その名前は「i」から始まり、「n」で終わる20文字の単語から来ています。i18nは、ソフトウェアを設計・開発する際に、それが異なる言語と地域で使用できるようにするプロセスを指します。これには、文字列の外部化、日付と数値の書式設定、文字列の比較とソート、データの双方向性などが含まれます。
l10nは「localization」の略で、その名前は「l」から始まり、「n」で終わる12文字の単語から来ています。l10nは、ソフトウェアを特定の地域や言語に合わせて適応させるプロセスを指します。これには、翻訳、地域固有の書式設定、法的要件の遵守などが含まれます。
これらのプロセスは、ソフトウェアがグローバルな市場で成功するために重要です。i18nは、ソフトウェアが異なる地域で使用できるようにするための基盤を提供し、l10nはそのソフトウェアを特定の地域に適応させるための手段を提供します。
internationalization
i18n（国際化）の具体的な使い方は、使用するプログラミング言語やフレームワークによりますが、一般的な手法をいくつか紹介します。
文字列の外部化：ユーザーに表示するすべての文字列をコードから分離し、外部のリソースファイル（例えば、.propertiesファイルや.jsonファイル）に格納します。これにより、異なる言語の翻訳を追加するためにコードを変更する必要がなくなります。
日付と数値の書式設定：異なる地域では、日付や数値の書式が異なります。これらの書式をユーザーの地域設定に合わせて動的に変更するために、国際化ライブラリを使用します。
文字列の比較とソート：異なる言語では、文字列の比較とソートのルールが異なります。これらの操作を行う際には、ユーザーの地域設定を考慮する必要があります。
以下に、JavaScriptでi18nを実装する一例を示します。この例では、i18nextというライブラリを使用しています。
// i18nextの初期化
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
i18n.use(initReactI18next).init({
resources: {
en: {
translation: {
Welcome: "Welcome",
},
},
ja: {
translation: {
Welcome: "ようこそ",
},
},
},
lng: "en",
fallbackLng: "en",
interpolation: {
escapeValue: false,
},
});
// 文字列の使用
console.log(i18n.t("Welcome")); // Outputs: Welcome
i18n.changeLanguage("ja");
console.log(i18n.t("Welcome")); // Outputs: ようこそ
この例では、英語と日本語の翻訳をリソースとして定義し、i18n.t関数を使用して翻訳された文字列を取得しています。また、i18n.changeLanguage関数を使用して現在の言語を変更しています。
localization
l10n（ローカライゼーション）は、ソフトウェアを特定の地域や言語に合わせて適応させるプロセスです。これには、翻訳だけでなく、日付や通貨の形式、文字列のソート順序など、地域固有の規則や慣習を考慮することが含まれます。
以下に、JavaScriptでl10nを実装する一例を示します。この例では、Intlオブジェクトを使用しています。
// 日付のローカライゼーション
let date = new Date();
console.log(new Intl.DateTimeFormat("en-US").format(date)); // Outputs: "12/31/2020" (for example)
console.log(new Intl.DateTimeFormat("ja-JP").format(date)); // Outputs: "2020/12/31" (for example)
// 通貨のローカライゼーション
let number = 123456.78;
console.log(
new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(
number,
),
); // Outputs: "$123,456.78"
console.log(
new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" }).format(
number,
),
); // Outputs: "￥123,457" (JPY doesn't use decimal places)
// 文字列の比較（ソート順序）
let strings = ["ä", "a", "z"];
strings.sort(new Intl.Collator("de").compare);
console.log(strings); // Outputs: ["a", "ä", "z"] (In German, 'ä' is sorted with 'a')
strings.sort(new Intl.Collator("sv").compare);
console.log(strings); // Outputs: ["a", "z", "ä"] (In Swedish, 'ä' is sorted after 'z')
この例では、日付と通貨の形式をローカライゼーションし、文字列の比較をローカライゼーションしています。これらの操作は、ユーザーの地域設定に基づいて動的に変更されます。