国際化

国際化は複雑な問題です。Qwik は国際化の問題を直接解決するのではなく、他のライブラリがそれを解決できるように、低レベルの API を提供するだけです。

ランタイムとコンパイル時の翻訳

大まかに言うと、翻訳の問題を解決するには2つの方法があります。

• ランタイム：翻訳マップを読み込み、ランタイムで翻訳を検索します。
• コンパイル時：コンパイルステップで翻訳をアウトプット文字列にインライン化します。

上記の両方のアプローチには、考慮すべきトレードオフがあります。

ランタイムアプローチの利点は次のとおりです。

• シンプルさ。追加のビルドステップは必要ありません。

ランタイムアプローチの欠点は次のとおりです。

• 各文字列は3重に存在します。
  1. コード内の元の文字列として1回。
  2. 翻訳マップのキーとして1回。
  3. 翻訳マップの翻訳済み値として1回。
• 現在のツールには、翻訳マップを分割する機能がありません。アプリケーションの起動時に、翻訳マップ全体をeagerlyに読み込む必要があります。これは、Qwik のコードベースの分割と遅延読み込みの取り組みと相反するため、理想的ではありません。さらに、翻訳マップが分割されないため、ブラウザは不要な翻訳をダウンロードします。たとえば、クライアント上で再レンダリングされない静的コンポーネントの翻訳などです。
• 翻訳ルックアップにはランタイムコストがあります。

コンパイル時アプローチの利点は次のとおりです。

• Qwik のコードの遅延読み込みは、翻訳文字列の遅延読み込みにも適用されます。（不要な翻訳テキストは読み込まれません）
• ランタイム翻訳マップがないため、文字列は3重になりません。

コンパイル時アプローチの欠点は次のとおりです。

• 追加のビルドステップ。
• 言語の変更にはページの再読み込みが必要です。

推奨事項

上記の点を考慮して、Qwik は制約に最適なツールを使用することをお勧めします。意思決定に役立つように、ブラウザ、サーバー、開発の3つの異なる考慮事項があります。

ブラウザ

Qwik の目標は、可能な限り最高のユーザーエクスペリエンスを提供することです。これは、コードの読み込みを遅らせることで実現され、初期起動のパフォーマンスが低下しません。ランタイムアプローチではすべての翻訳の eager 読み込みが必要なため、このアプローチはお勧めしません。コンパイル時アプローチがブラウザには最適だと考えます。

サーバー

サーバーには遅延読み込みの制約がありません。このため、サーバーはランタイムアプローチとコンパイル時アプローチのどちらを使用することもできます。サーバーでのコンパイル時アプローチの欠点は、翻訳ごとに個別のデプロイメントが必要になることです。これはデプロイメントプロセスを複雑にするだけでなく、サーバー数の需要も増大させます。このため、サーバーではランタイムアプローチの方が好ましいと考えます。

開発

開発中は、ビルドステップが少ないほど、ターンアラウンドが速くなります。このため、ランタイム翻訳により、よりシンプルな開発ワークフローになります。

当社の推奨事項

当社の推奨事項は、サーバーでランタイムアプローチ、開発中または本番環境ではクライアントでランタイムまたはコンパイル時アプローチを提供するツールを使用することです。これにより、最高のユーザーエクスペリエンスと開発エクスペリエンスを実現し、サーバーリソースを最小限に抑えることができます。

国際化ライブラリ

$localize

$localize 翻訳システムは、Angular の $localize システムに基づいています。翻訳は xmb、xlf、xlif、xliff、xlf2、xlif2、xliff2、および json 形式で抽出できます。

注：$localize システムはコンパイル時の翻訳システムであり、最終的な出力から完全に削除されます。$localize は Angular のサブプロジェクトであり、その使用を含めることは、アプリケーションのレンダリングに Angular が使用されていることを意味しません。

$localize を Qwik に追加する最も簡単な方法は、`pnpm qwik add localize` コマンドを使用することです。これにより、必要な依存関係がインストールされ、i18n $localize 統合を示す新しいパブリックルート `/src/routes/[locale]` が作成されます。

npm run qwik add localize

さらに詳しい情報については、この サンプルリポジトリ を参照してください。

翻訳の抽出

変更が完了したら、`npm run i18n-extract` を使用してコードから翻訳を抽出できます。これにより、`package.json` に表示されるファイルが更新されます。

DeepL を使用した $localize の自動翻訳

自動翻訳には、deepl-localize パッケージを使用できます。これにより、deepl.com APIを使用して文字列を自動的に翻訳できます。

npx を使用して、文字列を翻訳するには、deepl-localizeコマンドを使用します。

npx deepl-localize translate -b src/locales/message.en.json -l de-DE fr-FR -a "YOUR-DEEPL-API-KEY"

あるいは、スクリプトセクション内で文字列を翻訳するために、deepl-localizeコマンドを使用することもできます。

{
  "scripts":{
    "translate":"deepl-localize translate -b src/locales/message.en.json -l de-DE fr-FR -a 'your-deepl-api-key'"
  }
}

qwik-speak

qwik-speakライブラリは、Qwikアプリでテキスト、日付、数値を翻訳します。

Qwikにqwik-speakを追加する最も簡単な方法は、公式のガイドに従うことです。