はじめに
Webアプリケーションを開発していると、多言語対応が必要になることがあります。
例えば、日本語と英語に対応する場合、画面に表示するテキストを言語ごとに切り替える必要があります。
しかし、多言語対応は単に日本語の文章を英語に置き換えるだけではありません。
ユーザーが使用する言語の判定、翻訳データの管理、日付や通貨の表示形式など、さまざまな要素が関係しています。
この記事では、i18n・l10n・localeの違いを整理しながら、多言語対応の基本的な仕組みについて解説します。
1. i18nとは
i18n（Internationalization）は、ソフトウェアを異なる言語や地域に対応できるように設計することを指します。
「i18n」という表記は、Internationalizationの最初の「i」と最後の「n」の間に18文字あることに由来します。
例えば、次のような仕組みを整えることがi18nにあたります。
- 表示言語を切り替えられるようにする
- 翻訳データを管理できるようにする
- 地域ごとに日付や通貨の表示形式を変更できるようにする
- 言語による文字列の長さやレイアウトの違いに対応する
重要なのは、i18nは翻訳そのものではなく、異なる言語や地域に対応できるようにするための設計や仕組みだということです。
2. l10nとは
l10n（Localization）は、特定の言語や地域に合わせて、ソフトウェアの表示や内容を調整することです。
「l10n」という表記は、Localizationの最初の「l」と最後の「n」の間に10文字あることに由来します。
例えば、次のような作業が該当します。
- 日本語や英語の翻訳を用意する
- 地域に合わせた日付や通貨の表示形式を設定する
- 地域ごとの文化や慣習に合わせて表現を調整する
i18nとl10nの関係は、次のように整理できます。
| 概念 | 役割 |
|---|---|
| i18n（国際化） | 多言語・多地域に対応できる仕組みを作る |
| l10n（地域化） | 特定の言語・地域向けに内容を調整する |
つまり、i18nが対応できる土台を作り、l10nがその土台を使って各言語・地域向けの内容を用意するという関係です。
3. locale（ロケール）とは
locale（ロケール）は、アプリケーションで使用する言語や地域を識別するための情報です。
例えば、次のような値があります。
| locale | 意味 |
|---|---|
ja |
日本語 |
en |
英語 |
ja-JP |
日本語（日本） |
en-US |
英語（アメリカ） |
en-GB |
英語（イギリス） |
zh-CN |
中国語（中国） |
ja や en のように言語だけを指定することもあれば、ja-JP や en-US のように言語と地域を組み合わせることもあります。
ここで重要なのは、localeはi18nの仕組みそのものではなく、どの言語・地域向けの設定を適用するかを示す情報だということです。
例えば、次のように現在のlocaleを管理できます。
const locale = "ja";
この値を参照して、日本語の翻訳データを使用するか、英語の翻訳データを使用するかを決定できます。
また、localeは翻訳だけでなく、日付や数値の表示形式にも使用されます。
const date = new Date(2026, 10, 2);
console.log(
new Intl.DateTimeFormat("ja-JP").format(date)
);
// 2026/11/2
console.log(
new Intl.DateTimeFormat("en-US").format(date)
);
// 11/2/2026
このように、同じ日付でもlocaleによって表示形式が変わります。
i18n・l10n・localeの違い
3つの概念をまとめると、次のようになります。
| 概念 | 意味 | 具体例 |
|---|---|---|
| i18n | 国際化の仕組み・設計 | 翻訳データを切り替える仕組み |
| l10n | 特定の言語・地域への対応 | 日本語・英語の翻訳を用意する |
| locale | 言語・地域を識別する情報 |
ja-JP、en-US
|
4. 多言語対応の基本的な仕組み
一般的な多言語対応では、次のような処理が行われます。
- ユーザーが使用する言語や地域を判定する
- 使用するlocaleを決定する
- localeに対応する翻訳データを取得する
- 翻訳キーから表示する文字列を取得する
- 取得した文字列を画面に表示する
例えば、日本語と英語の翻訳データを用意します。
日本語（ja.json）
{
"welcome": "ようこそ",
"login": "ログイン"
}
英語（en.json）
{
"welcome": "Welcome",
"login": "Log in"
}
アプリケーション側では、表示する文章を直接記述する代わりに、翻訳キーを指定します。
const locale = "ja";
const messages = {
ja: {
welcome: "ようこそ"
},
en: {
welcome: "Welcome"
}
};
function t(key) {
return messages[locale][key];
}
console.log(t("welcome"));
// ようこそ
この例では、locale が ja なので、日本語の翻訳データが使用されます。
locale を en に変更すると、「Welcome」が返されます。
このように、画面に表示する文字列と翻訳データを分離し、localeに応じて表示内容を切り替えることが、多言語対応の基本的な仕組みです。
なお、上記は仕組みを説明するための簡略化したコードです。実際のアプリケーションでは、翻訳ライブラリを使用したり、翻訳キーが存在しない場合の処理を追加したりします。
5. localeはどのように決定されるのか
多言語対応では、ユーザーに適したlocaleを決定する必要があります。
代表的な方法には、次のようなものがあります。
URLから判定する
example.com/ja/about
example.com/en/about
URLに含まれる言語コードを使用する方法です。
言語ごとにURLを分けられるため、ページの共有やSEOにも適しています。
ブラウザの設定から判定する
ブラウザはHTTPリクエストの Accept-Language ヘッダーを通じて、ユーザーが希望する言語をサーバーに伝えることができます。
Accept-Language: ja-JP,ja;q=0.9,en;q=0.8
この例では、日本語が優先され、次に英語が候補になります。
ただし、ブラウザの言語設定が必ずしもユーザーの希望する表示言語と一致するとは限りません。
ユーザーの選択から判定する
言語切り替えボタンを設置し、ユーザーが明示的にlocaleを選択する方法です。
選択結果をCookieやユーザー設定に保存すれば、次回アクセス時にも同じ言語を表示できます。
実際のアプリケーションでは、これらの方法を組み合わせて使用することもあります。
例えば、ユーザーが明示的に選択した言語を優先し、選択がない場合にブラウザの言語設定を参照するといった設計が考えられます。
6. 翻訳データはどのように管理するのか
翻訳データは、JSONなどのファイルで言語ごとに管理する方法が一般的です。
locales/
├── ja.json
├── en.json
└── fr.json
翻訳キーを共通化しておけば、言語が増えてもアプリケーションの表示ロジックを大きく変更せずに対応できます。
例えば、次のように名前空間を分けて管理することもできます。
{
"common": {
"save": "保存",
"cancel": "キャンセル"
},
"auth": {
"login": "ログイン",
"logout": "ログアウト"
}
}
アプリケーションの規模が大きくなるほど、翻訳キーの命名規則や管理方法が重要になります。
7. 翻訳が存在しない場合はどうなるのか
すべての言語で翻訳データが揃っているとは限りません。
例えば、フランス語の翻訳が存在しない場合、日本語や英語などのデフォルト言語を表示する仕組みを用意できます。
これをフォールバックと呼びます。
fr → en
フランス語の翻訳が見つからなければ、英語の翻訳を使用するという考え方です。
また、地域まで指定されたlocaleを、より一般的な言語のlocaleへフォールバックさせる場合もあります。
en-GB → en
フォールバックのルールはアプリケーションやライブラリの設定によって異なります。
8. 多言語対応は文字列の翻訳だけではない
多言語対応では、日付や数値、通貨などの表示形式も考慮する必要があります。
JavaScriptでは、Intl APIを使ってlocaleに応じた表示形式を扱えます。
const number = 1234567.89;
console.log(
new Intl.NumberFormat("ja-JP").format(number)
);
// 1,234,567.89
console.log(
new Intl.NumberFormat("de-DE").format(number)
);
// 1.234.567,89
ほかにも、次のような要素があります。
- 通貨や数値の区切り方
- 複数形の扱い
- 言語による語順の違い
- 右から左に読む言語への対応
- 翻訳によって変化する文字列の長さ
特に複数形は、英語と日本語で扱いが異なります。
英語では「1 item」と「2 items」のように数によって表現が変化しますが、日本語では一般的に同じ表現を使えます。
そのため、単純な文字列の置換では対応できないケースもあります。
9. 多言語対応とSEO
Webサイトを多言語化する場合、検索エンジンへの対応も重要です。
言語ごとにURLを分ける場合は、hreflang を使用して各ページの言語や対象地域を示すことができます。
例えば、日本語版と英語版のページがある場合です。
<link
rel="alternate"
hreflang="ja"
href="https://example.com/ja/about"
/>
<link
rel="alternate"
hreflang="en"
href="https://example.com/en/about"
/>
これにより、検索エンジンが言語別のページの関係を理解しやすくなります。
ただし、hreflang を設定するだけで検索順位が上がるわけではありません。
まとめ
多言語対応は、単に文章を翻訳する仕組みではありません。
i18n・l10n・localeには、それぞれ異なる役割があります。
- i18n：異なる言語や地域に対応できる仕組みを整える
- l10n：特定の言語や地域向けに内容を調整する
- locale：どの言語・地域向けの設定を適用するかを識別する
これらを組み合わせ、言語判定、翻訳データの管理、フォールバック、地域に応じた表示形式などを実現しています。
特に重要なのは、アプリケーションのロジックと表示する言語を分離し、localeに応じて適切な内容を表示できるようにすることです。
この仕組みを理解しておくと、特定のライブラリに依存せず、多言語対応の設計や実装を考えやすくなります。