自動化i18nテストのための擬似ローカリゼーション

擬似ローカリゼーションは、実際の翻訳が始まる前に国際化（i18n）の問題を特定するために、ソーステキストを偽の言語に変換する強力なテスト技術です。このガイドでは、pseudo-l10n npmパッケージを使用して擬似ローカリゼーションテストを自動化する方法を示します。

擬似ローカリゼーションとは？

擬似ローカリゼーションは、アプリケーションのソーステキストを変更された偽の言語に変換するプロセスで、翻訳後のUIの動作を模倣します。これにより、QAエンジニアや開発者は開発サイクルの早い段階でi18nの問題を特定できます。

擬似ローカリゼーションを使用して潜在的な国際化の問題を特定する例。フォントとサイズは両側で同じですが、他のスクリプトをサポートするには通常、より多くのスペースが必要です。

擬似ローカリゼーションが役立つ理由

擬似ローカリゼーションは、早期にi18nの問題をキャッチするのに役立ちます：

• テキストの拡張によって引き起こされるレイアウトの破損を露呈します（ドイツ語やフィンランド語は通常、英語より30-40%長くなります）。
• アクセント付き文字を追加してUTF-8サポートをテストすることでエンコーディングの問題を浮き彫りにします。
• すべての文字列が翻訳可能であることを保証します - ハードコーディングされたテキストは変更されず、簡単に見つけることができます。
• プレースホルダーの取り扱いミスを明らかにします - {{name}}のような動的コンテンツは保持される必要があります。
• スペース制約のあるUIコンポーネントの翻訳長さの制限を定義するのに役立ちます。

QAのための自動化戦略

擬似ローカリゼーションを使ったi18nテストを自動化するための実績のある戦略を以下に示します：

アクセント付きおよび非ラテン文字

ラテン文字をアクセント付きの形式や異なるスクリプトに置き換えて、文字エンコーディングとフォントサポートをテストします。

例： "Save" → "Šàvē"

QAチェック： すべての文字が正しく表示され、エンコーディングの問題で何も壊れないことを確認します。

テキスト拡張シミュレーション

各文字列を自動的に約30–40%拡張して、ドイツ語やフィンランド語のような長い言語を模倣します。視覚的なマーカーでラップして、クリッピング検出を容易にします。

例： "Save" → ⟦Šàvēēēēē⟧

QAチェック： 自動化されたスクリーンショット比較を使用して、UIのオーバーフロー、クリッピング、または不整合を特定します。

プレースホルダーストレステスト

補間変数（プレースホルダー）を可視マーカーに置き換えて、翻訳中に保持されることを確認します。

例： "You have {{count}} items" → "You have <COUNT> items"

QAチェック： 回帰テストを実行します。マーカーが欠落しているか、正しくエスケープされていない場合（&lt;COUNT&gt;）は失敗します。

RTLシミュレーション

テキストを右から左（RTL）マーカーでラップして、アラビア語やヘブライ語をシミュレートします。

QAチェック： RTL言語のために、整列、テキストの方向、ミラーリングが正しいことを確認します。

CI/CD統合

自動テストパイプラインに擬似ローカリゼーションを追加して、i18nの問題が本番環境に到達する前にキャッチします。

QAチェック： テストで翻訳の欠落、壊れたプレースホルダー、またはレイアウトの問題が検出された場合は、デプロイをブロックします。

pseudo-l10nパッケージを使った自動化

pseudo-l10n npmパッケージは、JSON翻訳ファイルの擬似ローカリゼーションを自動化し、i18nテストを開発ワークフローに簡単に統合できるようにします。

主な機能

• テキスト拡張：翻訳されたテキストが通常英語より30-40%長くなることをシミュレートします。
• アクセント付き文字：アクセント付きの同等物を使ってUTF-8エンコーディングとフォントサポートをテストします。
• 視覚的マーカー: 翻訳されていないまたは切り捨てられたテキストを簡単に見つけるために、文字列を⟦...⟧マーカーで囲みます。
• プレースホルダー処理: {{name}}、{count}、%key%などのプレースホルダーを保持します。
• RTLシミュレーション: Unicode制御文字を使用して右から左への言語をシミュレートします。

インストール

コマンドラインで使用するために、pseudo-l10nをグローバルにインストールします:

npm install -g pseudo-l10n

または、開発依存関係として追加します:

npm install --save-dev pseudo-l10n

基本的な使い方

ソース翻訳ファイルを擬似ローカライズされたバージョンに変換します:

pseudo-l10n input.json output.json

例の変換

入力 (en.json):

{
  "welcome": "Welcome to our application",
  "greeting": "Hello, {{name}}!",
  "itemCount": "You have {{count}} items"
}

出力 (pseudo-en.json):

{
  "welcome": "⟦Ŵëļçõɱë ţõ õür àƥƥļïçàţïõñēēēēēēēēēēēēēēēēēē⟧",
  "greeting": "⟦Ĥëļļõēēēēēē, {{name}}!ēēēēē⟧",
  "itemCount": "⟦Ŷõü ĥàṽë {{count}} ïţëɱšēēēēēēēēēēēēēēēē⟧"
}

高度な機能

カスタム拡張

pseudo-l10n en.json pseudo-en.json --expansion=30

RTLシミュレーション

アラビア語やヘブライ語などの右から左への言語をシミュレートします:

pseudo-l10n en.json pseudo-ar.json --rtl

視覚テスト用のプレースホルダーを置き換える

視覚的な検出を容易にするために、プレースホルダーを大文字のマーカーに置き換えます:

pseudo-l10n en.json pseudo-en.json --replace-placeholders

# Input:  { "greeting": "Hello, {{name}}!" }
# Output: { "greeting": "⟦Ĥëļļõēēēēēē, <NAME>!ēēēēē⟧" }

異なるプレースホルダーフォーマットのサポート

このパッケージは、異なるi18nライブラリで使用されるさまざまなプレースホルダーフォーマットをサポートしています:

# For i18next (default)
pseudo-l10n en.json pseudo-en.json --placeholder-format="{{key}}"

# For Angular/React Intl
pseudo-l10n en.json pseudo-en.json --placeholder-format="{key}"

# For sprintf style
pseudo-l10n en.json pseudo-en.json --placeholder-format="%key%"

プログラムによる使用

Node.jsスクリプトやビルドプロセスでプログラム的にpseudo-l10nを使用します:

const { generatePseudoLocaleSync, pseudoLocalize } = require('pseudo-l10n');

// Generate a pseudo-localized JSON file
generatePseudoLocaleSync('en.json', 'pseudo-en.json', {
  expansion: 40,
  rtl: false
});

// Pseudo-localize a single string
const result = pseudoLocalize('Hello, {{name}}!');
console.log(result);
// Output: ⟦Ĥëļļõēēēēēēēēēēēēēē, {{name}}!ēēēēē⟧

ワークフローへの統合

npmスクリプト

package.jsonスクリプトに擬似ローカライズ生成を追加します:

{
  "scripts": {
    "pseudo": "pseudo-l10n src/locales/en.json src/locales/pseudo-en.json",
    "pseudo:rtl": "pseudo-l10n src/locales/en.json src/locales/pseudo-ar.json --rtl"
  }
}

ビルドプロセスの統合

ビルドプロセスの一部として擬似ロケールを生成します:

// build.js
const { generatePseudoLocaleSync } = require('pseudo-l10n');

// Generate pseudo-locales as part of build
generatePseudoLocaleSync(
  './src/locales/en.json',
  './src/locales/pseudo-en.json',
  { expansion: 40 }
);

generatePseudoLocaleSync(
  './src/locales/en.json',
  './src/locales/pseudo-ar.json',
  { rtl: true }
);

CI/CDパイプラインの統合

継続的インテグレーションパイプラインに擬似ローカライズを統合します:

# .github/workflows/test.yml
- name: Generate pseudo-locales
  run: |
    npm install -g pseudo-l10n
    pseudo-l10n src/locales/en.json src/locales/pseudo-en.json

- name: Run i18n tests
  run: npm run test:i18n

テスト戦略

1. ビルドプロセス中に擬似ロケールを生成します。
2. アプリケーションに擬似ロケールを追加します（例：言語セレクターで）。
3. 擬似ロケールを有効にしてアプリケーションをテストします。
4. 一般的なi18nの問題についてアプリケーションを確認します。

探すべきこと

• ⟦⟧マーカーがない = 翻訳されていない文字列（ハードコーディングされたテキスト）。
• 切り捨てられたマーカー = テキストの切り捨てまたはUIのオーバーフロー。
• 壊れたレイアウト = テキストの拡張に対するスペース不足。
• 文字化け = エンコーディングの問題またはフォントサポートの欠如。
• 間違ったテキスト方向 = RTLの問題（RTL擬似ロケール用）。

テストから実際の翻訳へ

擬似ローカライズでi18nの実装を検証したら、実際のユーザー向けにアプリケーションを翻訳する時が来ました。ここで、l10n.devのようなAI駆動の翻訳サービスが役立ちます。

プロダクション翻訳にl10n.devを選ぶ理由

擬似ローカライズでアプリが国際化を正しく処理していることを確認した後、プロフェッショナルなAI駆動の翻訳にl10n.devを使用します:

• プレースホルダー、フォーマット、構造を保持 - テスト中に擬似l10nが保護するのと同様です。
• 文脈を考慮したAI翻訳で165言語をサポート。
• 複数形、補間、特殊文字を自動的に処理。
• APIまたはnpmパッケージを介したCI/CD統合を提供 (ai-l10n)、自動化されたワークフローのために。
• 手動翻訳とレビューのためのVS Code拡張機能とWeb UIを提供。

完全なi18nワークフロー

1. 擬似l10nでi18nの実装をテストして早期に問題をキャッチします。
2. テスト中に発見されたレイアウト、エンコーディング、またはプレースホルダーの問題を修正します。
3. l10n.devを使用して、検証されたソースファイルをプロダクション準備完了の翻訳に翻訳します。

i18nの問題を早期にキャッチして、ローカリゼーションワークフローを効率化する準備はできていますか？