目次
i18n（国際化）とは？
国際化（i18n）とは、ウェブサイトをさまざまな言語、地域、文化に容易に適応できるように設計するプロセスのことです。 サイトに「Welcome」や「Buy now」といった言葉を直接書き込む（ハードコーディングする）代わりに、ウェブサイトはすべてのテキストを翻訳ファイルに保存します。 これらのファイルは、テキストの「キー」を対応する言語の文字列にマッピングします。
例えば、次のようになります。
ページが読み込まれると、サイトはユーザーの優先言語（またはURLの /ja/ のような目印）を確認し、適切なファイルから正しいテキストを取得します。 そのため、開発者は次のように書く代わりに、
次のように書きます。
t welcomeは、ウェブサイトに対して「このキーを現在有効な言語で翻訳してください」と指示します。
では、なぜ単に言語を「ハードコーディング」しないのでしょうか？ それも可能です。複数のウェブサイトリポジトリを作成し、各言語を単純なHTMLテキストとして入力することはできます。これは、軽量で高速、かつSEOに強いウェブサイトを確保する良い方法かもしれません。 しかし、ウェブサイトを更新しようとすると、事態は非常に複雑になります。 たった一言の変更でも、言語ごとに異なるウェブサイトを変更しなければなりません。 ウェブサイトにページや機能を追加したい場合、事態はさらに複雑になります。各言語ですべてをやり直さなければならないからです。
i18nライブラリの役割
手作業で翻訳を管理するのは、煩雑で間違いが起こりやすいものです。そこで役立つのがi18nライブラリです。 i18nライブラリは、以下の処理を担う小さなソフトウェアです。
・適切な言語ファイルの読み込み
・言語間の切り替え
・翻訳が見つからない場合のデフォルト言語（英語など）へのフォールバック
・各ロケールに合わせた日付、数値、通貨のフォーマット
・複数形の管理（例：「1 item」 vs 「2 items」）
今日使われている最も一般的なi18nライブラリは以下の通りです。
| ライブラリ | 対象 | 説明 |
|---|---|---|
| i18next | React, Vue, Node.js | Webアプリ用の最も人気のある汎用i18nライブラリ。 |
| react-intl / formatjs | React | メッセージ、数値、日付の国際的な書式設定に特化。 |
| Vue-i18n | Vue.js | Vueアプリをローカライズするための公式ライブラリ。 |
| @angular/localize | Angular | Angularアプリに組み込まれた国際化機能。 |
| Next-i18next / Next-Intl | Next.js | ローカライズされたルートを持つサーバーレンダリングReactアプリにi18nサポートを追加。 |
これらはすべて「キーとJSONファイルを使って翻訳する」という同じコンセプトに従っていますが、特定のフレームワークへの統合方法が異なります。
実践例：実際の動作
Reactとi18nextを使った簡単な例を見てみましょう。
ステップ1. 翻訳ファイル
ステップ2. コードでの使用
「日本語」ボタンをクリックすると、ページはリロードなしで即座に日本語に切り替わります。
サイトが表示言語を判断する方法
ユーザーの言語を検出または選択するには、いくつかの方法があります。
| 方法 | 例 | 用途 |
|---|---|---|
| クエリパラメータ | ?lang=ja | 簡単な設定やテスト |
| パス/サブフォルダ | /ja/about | SEOに優しいアプローチ |
| サブドメイン | ja.example.com | グローバルブランド |
| ブラウザ設定 | navigator.languageで自動検出 | 優れたユーザー体験の提供 |
| ユーザープロファイル | アカウントに保存 | Webアプリやダッシュボード |
i18nライブラリはどの方法を選ぶかを問いません。ただ、有効な言語コード（en, ja, frなど）を知る必要があるだけです。
翻訳が見つからない場合はどうなるか？
こちらも対応されています。 選択した言語で文字列が見つからない場合、ライブラリはデフォルトの言語（通常は英語）にフォールバックします。
ページが日本語に設定されていても welcome が翻訳されていない場合、サイトは英語ファイルの「Welcome」を表示します。 また、開発コンソールには [MISSING: welcome] のような警告を表示するように設定することもできます。
コードなしで翻訳を管理する
エンジニア以外の人々、例えば営業、翻訳者、ブランドチームにとって、生のJSONファイルを編集するのは気が引けるかもしれません。 そのため、このプロセスを簡素化するために作られたGUIツール（GUI＝インタフェース）やクラウドプラットフォームが存在します。
ローカルツール
・i18n Manager – 翻訳を並べて編集できるデスクトップアプリ。
・Poedit – 伝統的な翻訳エディタ（プラグイン経由でJSONにも対応）。
・VS Code + i18n Ally – コードエディタ内でビジュアルエディタを使いたい開発者向け。
クラウドプラットフォーム
・Locize – i18nextと直接統合し、リアルタイムで翻訳を更新。
・Phrase – 機械翻訳オプションを備えた共同Webエディタ。
・POEditor や Crowdin – ワークフローやレビューシステムを備えたエンタープライズ向けのプラットフォーム。
上記のツールはプロジェクトに接続し、翻訳者がコードベースに触れることなくコンテンツを更新できるようにします。
テキスト以外：日付、数値、複数形
言語の違いは単語だけではありません。
例えば、複数形について：
・英語: “1 product”, “2 products”
・日本語: 「1個の製品」「2個の製品」のように、単語自体は変化しない。
i18nライブラリは上記の違いを自動的に処理します。 また、以下の書式設定も行います。
・日付: March 5, 2025 → 2025年3月5日
・数値: 1,000.50 → 1,000.50 （地域によっては 1.000,50 となる）
・通貨: $10.00 → ¥1,500
一般的なプロジェクト構造
多言語ウェブサイトは、しばしば次のような構造になります。
i18n.js ファイルがライブラリを初期化し、翻訳を読み込みます。 すべての翻訳ファイルは /locales の下に、言語ごとに一つのフォルダで管理されます。
正しい方法で行うことの重要性
適切なi18nツールで多言語サイトを構築することには、確かな利点があります。 また、以下の効果が得られます。
・より良いユーザー体験：ユーザーは自動的に母国語でサイトを見ることができる。
・強力なSEO：Googleは /ja/, /de/, /es/ を個別のページとしてインデックスする。
・迅速なローカライゼーション：翻訳者が開発者から独立して作業できる。
・容易なスケーリング：アプリを書き直すことなく新しい言語を追加できる。
・一貫したブランディング：すべてのコンテンツが市場間で統一される。
