en は翻訳の元となるソースロケールです。未翻訳のロケールは en にフォールバックします。
アプリには 2 種類の翻訳可能なテキストがあり、どちらも同じ locales/ カタログを通じて処理されます。
- Manifest labels — オブジェクト名とフィールド名、ビュータイトル、メニュー項目、その他アプリのメタデータで宣言される文字列。
- Front-component strings — React のフロントコンポーネントがレンダリングするUIテキスト。
フロントコンポーネント文字列のマーク
20-sdk/front-component から翻訳ヘルパーをインポートします。
When to use which
<Trans>…</Trans>— JSX の静的テキスト。messageとvaluesプロパティを使用して補間（<Trans message="Hi {name}" values={{ name }} />); 子要素に直接補間する は静的に抽出できません。useTranslate().t— コンポーネント内の動的文字列。 ユーザーが言語を切り替えたときに再レンダリングします。 これをレンダリング内で好みます。t(...)(imported directly) — eager translation used anywhere , including event handlers, helpers, module scope — だけでなく、render内だけでなく。msg(...)— dataとして宣言された文字列の遅延記述子 (定数、 config)。 後でt(descriptor)で解決します。
コンテキスト
異なる変換元文字列を曖昧にするためにcontext を渡します。
抽出と翻訳
アプリディレクトリから抽出コマンドを実行します。t()/msg()/\<Trans> の文字列の両方が収集され、ソース文字列をキーとして locales/\<locale>.json にまとめられます。 翻訳を入力：
{name}のようなプレースホルダは、実行時に置き換えられます —
翻訳でそれらを維持します。 空の文字列はすべて元のテキストに戻ります。
動作方法
twenty dev:build はカタログをコンパイルし、現在のユーザーに対して適切な言語を提供します。マニフェストのラベルはサーバー側で解決され、フロントコンポーネントのカタログは各コンポーネントバンドルに組み込まれます。 実行時には、コンポーネントが実行コンテキスト（ホストの現在の言語）からロケールを読み取り、そのカタログに対して各文字列を解決し、翻訳が存在しない場合はソースにフォールバックします。 ホストの再レンダリングで言語を切り替えます。\<Trans> と
useTranslate().t 文字列は動作します。
カタログはビルド時にコンパイルされるため、翻訳を更新すると、他の変更と同じように、
20dev:build を再実行(および再デプロイ)することになります。
翻訳は
20dev:build によってコンパイルされています (そして、20の適用)。
連続した 20dev ウォッチはソース文字列を表示するため、ワンオフビルドでローカライズされた出力
をテストします。<Trans> のテキスト子要素は複数行にまたがってもかまいません — 空白は JSX と同じように折りたたまれるため、<Trans>Welcome\n back</Trans> と抽出されたキーはどちらも Welcome back になります。