Webアプリケーションの国際化（i18n）

国際化：ウェブサイトを多言語対応にする

国際化（i18n）とは、ウェブサイトをさまざまな言語や地域に適応できるように設計する手法です。適切に国際化されたウェブサイトは、コードを書き換えることなく新しい言語に翻訳でき、各ロケールに合わせて日付形式、通貨、テキストの方向などを正しく処理します。

テキストとコードの分離

国際化の基本原則は、テキストをハードコードしないことです。テンプレートに直接「ようこそ」と書く代わりに、t('welcome') のような関数を使用して、現在の言語の翻訳を検索します。翻訳は言語ごとに別々のファイルに保存されるため、新しい言語を追加するには、新しい翻訳ファイルを追加するだけで済みます。

翻訳ファイルは通常、各文字列にキーを持つJSONオブジェクトです。英語のファイルには 'welcome': 'Welcome' があり、イタリア語のファイルには 'welcome': 'Benvenuto' があります。この分離により、翻訳者はコードに触れることなく翻訳ファイルを扱うことができます。

複数形と変数の処理

単純なテキストの置き換えだけでは不十分です。言語によって複数形のルールは異なります。英語には2つの形式（単数、複数）がありますが、アラビア語には6つあり、日本語には基本的に1つしかありません。優れたi18nライブラリはこれを自動的に処理します。各複数形の翻訳を指定すると、ライブラリが数に基づいて適切なものを選択します。

翻訳内の変数も言語によって異なる方法で処理されます。英語では「Hello, {name}」と言うかもしれません。変数は特定の位置に現れます。他の言語では、語順が異なる場合があります。優れたライブラリは、名前付きプレースホルダーを許可し、翻訳者が必要に応じてそれらを並べ替えられるようにすることで、これを処理します。

日付、数値、通貨

地域によって、日付、数値、通貨の形式は異なります。アメリカ人は04/01/2024（4月1日）と書き、ヨーロッパ人は01/04/2024と書き、日本人は2024/04/01と書きます。数値は異なる区切り文字を使用します。米国では1,234.56、ヨーロッパの多くの地域では1.234,56です。通貨には異なる記号と異なる配置ルールがあります。

最新のブラウザに組み込まれているIntl APIは、これらすべてを処理します。Intl.DateTimeFormat、Intl.NumberFormat、Intl.RelativeTimeFormatは、ユーザーのロケールに合わせて日付、数値、相対時間を正しくフォーマットします。これにライブラリは必要ありません。ブラウザが処理します。

テキストの方向とレイアウト

すべての言語が左から右に読まれるわけではありません。アラビア語、ヘブライ語、ペルシャ語、ウルドゥー語は右から左に書かれます。レイアウトはこれを処理する必要があります。テキストは右から左に流れ、UIはそれに応じてミラーリングされる必要があります。CSSには、テキストの方向に自動的に適応する論理プロパティ（margin-inline-start、padding-inline-end）があるため、左から右と右から左で別々のスタイルシートは必要ありません。

人気のi18nライブラリ

JavaScriptプロジェクトで最も人気のあるライブラリはi18nextです。フレームワークに依存しませんが、React、Vue、その他のフレームワークとの統合があります。複数形化、補間、書式設定などを処理します。Reactに特化したものとしては、react-intlとreact-i18nextが人気の選択肢です。重要なのは、ライブラリを選択して早期に統合することです。既存のアプリケーションにi18nを後付けするのは、最初から組み込むよりもはるかに困難です。