多言語インターフェースとローカリゼーション

1）原則

1.言語は皮膚ではありません。テキスト、フォーマット、執筆の方向、イラスト、法的ブロック、さらにはナビゲーションが変化しています。
2.最初にキー、次にテキスト。構造セマンティックキーとパラメータ-翻訳は後で来る。
3.疑似ロカリゼーション-終了前。キャッチオーバーフロー、「ハード縫製」ラインと隠されたアングリシズム。
4.フォールバックは予測可能です。'ru-UA→ru→en'。「静かな」失敗はありません。
5.セキュリティーよ。消毒なしで翻訳からDOMへのHTMLはありません。プレースホルダは位置指定/名前のみです。
6. 。 。Altテキスト、アリアラベル、略語-すべてがローカライズされています。

2）ロケール戦略

システムコード：'language-REGION'（例：'pt-BR'、 'en-GB'）。
ロケール選択：ユーザープロファイル→設定；spare-ブラウザ/地理による自動検出（確認付き）。
マルチリージョン：言語と法律を区別する：'es-ES' ≠ 'es-MX'（異なる法律/支払い/制限）。
フォールバックチェーン：UIは最も近い言語です。法的テキスト-厳密に地域版、そうでなければブロックと確認要求。

3）情報アーキテクチャとコンテンツ

主な分野：ナビゲーション、CTA、バグ、フォーム、プロンプト、通知、手紙、PDF/バナー。
テキスト拡張子：+30-40％幅リザーブ（ドイツ語/フィンランド語）。レイアウト-弾性（フレックス/グリッド）。
トーン/スタイル：ブランド辞書（用語、重要な場所で「スラング翻訳」なし）。
画像/アイコン：画像のテキストを避けます。必要に応じて、ローカルバージョンを維持してください。

4） i18nアーキテクチャ

キー：'ドメイン。セクション。intent'→'payment。撤退してください。エラーです。 。 。
プレースホルダ：named （'{amount}'、 '{minutes}'）、整形されていない行。
ICU MessageFormat： multiplicity、 gender、 concordance。
ファイル：ロケールとドメイン（'/i18n/{ locale}/{domain} 。json'）によって、チャンクは遅延してロードされます。
サーバー/クライアント：universal render、 cookie+HTTP-Varyのロケール。

json
{
"betslip": {
"placed": "{amount} {currency} bid accepted,"
"timeout": "Waiting for confirmation... ~ {seconds, plural, one {# sec} few {# sec} many {# sec} other {# sec}}"
}
}

5）フォーマット： 数字、日付、通貨、単位

'Intlを使用します。':

js const nf = new Intl. NumberFormat('uk-UA', { style:'currency', currency:'UAH' });
nf. format(2000); // 2 000,00 ₴

const df = new Intl. DateTimeFormat('tr-TR', { dateStyle:'medium', timeStyle:'short' });
df. format(new Date());

const pl = new Intl. PluralRules('ru-RU');

マイナー単位：セント/kopecksで量を保って下さい；クライアント上のフォーマット。
相対時間：'Intl。RelativeTimeFormat'。
単位：'Intl。NumberFormat （{style： 'unit'、 unit： 'meter'}）'。
カレンダー/週：曜日の最初の日と日付形式-ロケール別。

6） RTLおよび執筆方向

'ar'、 'he'、 'fa'の'dir=「rtl」'をサポート；カスタムコンテンツには'dir='auto'を使用します。
反転アイコン/シェブロン；カルーセルとステッピングミラー。
通貨番号/記号-LTRウィンドウ（BiDi混乱を避けます）。
CSSブール型プロパティ（'inline-start/end'）は、左/右ではなく。

7）フォームと入力

名前/アドレス：apostrophes/diacritics/double姓を許可します。
電話：E.164貯蔵；マスク-柔らかく、挿入サポート付き。
アドレス形式：国によるフィールド順序。index/stateが見つからない場合があります。
キーボード：'inputmode'、 'autocomplete'ロケールの正しい。
プレースホルダ：ローカル言語/フォーマットの例。

8）疑似ロカリゼーションとテスト

行を自動的に'【 】'+extension'+++'（~ 35％）に置き換えます。
devアセンブリに疑似ロカルを'qps-ploc'として含める。
翻訳者のコンテキストを含むスクリーンショット：プレースホルダと長いテキストを強調表示します。
テスト：トリミング、ハイフネーション、オーバーフロー、「ハードステッチ」文字列、RTL。

9）通知、手紙、テンプレート

文字と件名のテンプレート-各ロケール用；テキストとレイアウトを分離します。
件名の日付/金額-ロケールでフォーマットされています。
［通知の構成］リンクは常に文字の言語です。
SMS：短い、マルチライン引用符なし；UTM-ローカリゼーションなし。

10）安全性と信頼性

翻訳をHTMLと解釈しないでください。安全なインサートを使用してください。
プレースホルダ-データのみ、マークアップのみ。
ログ/メトリックは分類されていませんが、問題をトレースするためのロケールがあります。
翻訳ファイルが利用できない場合のフォールバック-「quiet」（英語+テレメトリを表示）。

11）パフォーマンス

ルート/ドメインによる転送のチャンク。頻繁のためのpreload。
CDN 'ETag'/'Cache-Control'。
ロケールを変更するときにレンダリングを行わないようにします。

12） iGamingの詳細

免責事項と責任あるプレー：文言は国によって異なります（18+/21+、規制当局、ヘルプライン）。
KYC/AML：法的に正しい用語（例えば「、資金源」「、有益な所有者」）、ケース/出生オプション。
支払方法：ローカル名（PIX、 Papara、 SEPA）と条件（ETA/手数料）-厳密に地域によって。
係数と書式：'小数/分数/アメリカ'-ローカル説明と例。
法的テキスト：変更されていない地域バージョン。他の管轄区域からのフォールベックの禁止。

13）システムトークンの設計（例）

json
{
"i18n": {
"fallback": ["en"],
"rtl": ["ar", "he", "fa"],
"textExpansionPct": 0. 35,
"screenshotHints": true
},
"typography": {
"lineHeight": { "ui": 1. 4, "dense": 1. 3 },
"hyphens": "auto",
"tabularNums": true
},
"layout": {
"minLabelWidth": 96,
"gap": { "sm": 8, "md": 12, "lg": 16 }
},
"a11y": {
"ariaMirroring": true,
"altTranslate": true,
"contrastAA": true
}
}

14）スニペット

ts import i18n from 'i18next';
import ICU from 'i18next-icu';
import { initReactI18next } from 'react-i18next';

i18n. use(ICU). use(initReactI18next). init({
lng: 'uk-UA',
fallbackLng: ['ru', 'en'],
load: 'languageOnly',
interpolation: { escapeValue: false },
resources: {}//empty - loadim lazy
});

export async function loadNamespace(ns: string, lng = i18n. language){
const mod = await import(`/i18n/${lng}/${ns}.json`);
i18n. addResourceBundle(lng, ns, mod. default, true, true);
}

json
{
"notifications": "{count, plural, one {# notification} few {# notifications} many {# notifications} other {# notifications}}"
}

js const money = (v, c, l) => new Intl. NumberFormat(l, {style:'currency', currency:c}). format(v/100);
const rel = (v, unit, l) => new Intl. RelativeTimeFormat(l, {numeric:'auto'}). format(v, unit);
// money(250000,'EUR','de-DE') → 2. 500,00 €

js const rtl = new Set(['ar','he','fa']);
document. documentElement. dir = rtl. has(locale. split('-')[0])? 'rtl': 'ltr';

js const pseudo = s => s. replace(/[aAeEiIoOuU]/g, m => ({a:'à',e:'ê',i:'ï',o:'ô',u:'û'}[m. toLowerCase()]        m)). replace(/([^\s])/g,'$1\u0301');

15）空/エラー/グレーフル劣化

キーの翻訳はありません：英語+ログ'missing_key'を表示します。
ロケールファイルはありません：フォールバックとバナー「英語のインターフェースの一部」。
テキストが長すぎる：マルチライン、'line-clamp'を配置し、全文を含むツールチップ。

16）指標と品質管理

カバレッジ％キー/ロケーション別（ターゲット≥ 98％）。
新しいリリースのためのTime-to-Translate （TTT）。
バグレートL10n：ビジュアルクリッピング、RTL欠陥、誤ったフォーマット。
読み易さ（主観的調査）とロケールごとのNPS。
地域別の法的検証（コンプライアンスチェックリスト）。

17） Antipatterns

コード内の文字列の連結（「You wain」+amount+「！」）-breaks文法。
ローカルバージョンのない画像/アイコンのテキスト。
英語のためのハード幅。
国法を言語に置き換える（メキシコでは'es-ES'を使用する）。
公衆衛生のないCMSからのHTML翻訳。
異なった場所の異なった意味の同じキー。

18） QAチェックリスト

線とキー

• 名前付きプレースホルダ；連結はしない。
• 必要に応じてICU多元化/属。
• フォールバックチェーンが機能します。

レイアウトと可用性

• 幅のマージン+30-40％；'line-clamp'、単語のラッピング。
• Alt/ariaラベルはローカライズされます。
• RTLミラーアイコン/ナビゲーション；数字は読み取り可能です。

フォーマット

• 日付/通貨による'Intl。';マイナーユニットからの金額。
• 住所/電話/名前-フレキシブルカントリールール。

安全性・性能

• 翻訳はHTMLを実行しません。XSSは除外されました。
• レイジーチャンク、CDNキャッシュ、不要なレンダーなし。

iGaming特異性

• Disclaimers/18+/ヘルプライン-管轄によって。
• KYC/AMLテキストは合法的に調整されます。
• 支払い名/ETA/手数料-ローカル。

19）設計システムにおけるドキュメンテーション

i18nトークン、ガイド（ICU/複数 形/RTL）、パターン（電子メール/SMS/トースト）、地域ごとの法的文字列。
ツール：疑似、スクリーンのスクリーンショット、カバレッジレポート、キーリンタ。
プロセス：用語集、翻訳メモリ、コンテキストスクリーンショット、ネイティブスピーカーによるレビュー。

概要

多言語UIは、建築、デザイン、コンテンツ、法律のレベルで体系的な作品です。キーとフォールバックを整理し、ICUと'Intl'を使用し、RTLをサポートし、事前に疑似ロケールを実行し、地域の文言の法的正しさを確保します。その後、製品はそれぞれの国と各ユーザーのために-係数や支払いから文字やヘルプまで-ネイティブに感じるでしょう。