メインコンテンツへスキップ
Twenty のアプリは 英語 で作成されています。ソースやマニフェスト内の文字列は英語のソーステキストであり、en は翻訳の元となるソースロケールです。未翻訳のロケールは en にフォールバックします。 アプリには 2 種類の翻訳可能なテキストがあり、どちらも同じ locales/ カタログを通じて処理されます。
  • Manifest labels — オブジェクト名とフィールド名、ビュータイトル、メニュー項目、その他アプリのメタデータで宣言される文字列。
  • Front-component strings — React のフロントコンポーネントがレンダリングするUIテキスト。
翻訳可能な文字列にマークを付けてロケールごとのカタログに抽出し、それらのカタログを翻訳すれば、ビルドが現在のユーザーに適切な言語を提供します — 追加の設定は不要です。

​
フロントコンポーネント文字列のマーク

20-sdk/front-component から翻訳ヘルパーをインポートします。 
import { Trans, t, msg, useTranslate } from 'twenty-sdk/front-component';

const STATUSES = [
  { id: 'draft', label: msg('Draft') },
  { id: 'sent', label: msg('Sent') },
];

const Card = ({ count, name }: { count: number; name: string }) => {
  const { t } = useTranslate();

  return (
    <section>
      {/* Static text — reactive to the user's locale */}
      <Trans>Loading postcard…</Trans>

      {/* Disambiguate identical sources with a context */}
      <Trans context="card-title">Untitled</Trans>

      {/* Interpolation: pass values explicitly */}
      <p>{t('Hi {name}', { name })}</p>
      <p>{t('Saved {count} cards', { count })}</p>

      {/* Resolve a lazily-declared descriptor */}
      <ul>{STATUSES.map((s) => <li key={s.id}>{t(s.label)}</li>)}</ul>
    </section>
  );
};

​
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({ message: 'Open', context: 'door' });
t({ message: 'Open', context: 'window' });
<Trans context="card-title">Untitled</Trans>

​
抽出と翻訳

アプリディレクトリから抽出コマンドを実行します。 
twenty dev:translations-extract                  # collect strings into locales/en.json
twenty dev:translations-extract --locale fr-FR   # also scaffold a target locale
抽出処理では、マニフェストのラベルとフロントコンポーネントのソース内にある t()/msg()/\<Trans> の文字列の両方が収集され、ソース文字列をキーとして locales/\<locale>.json にまとめられます。 翻訳を入力： 
// locales/fr-FR.json
{
  "Loading postcard…": "Chargement de la carte…",
  "Hi {name}": "Bonjour {name}",
  "Saved {count} cards": "{count} cartes enregistrées"
}
{name}のようなプレースホルダは、実行時に置き換えられます — 翻訳でそれらを維持します。 空の文字列はすべて元のテキストに戻ります。

​
動作方法

twenty dev:build はカタログをコンパイルし、現在のユーザーに対して適切な言語を提供します。マニフェストのラベルはサーバー側で解決され、フロントコンポーネントのカタログは各コンポーネントバンドルに組み込まれます。 実行時には、コンポーネントが実行コンテキスト（ホストの現在の言語）からロケールを読み取り、そのカタログに対して各文字列を解決し、翻訳が存在しない場合はソースにフォールバックします。 ホストの再レンダリングで言語を切り替えます。\<Trans> と useTranslate().t 文字列は動作します。 カタログはビルド時にコンパイルされるため、翻訳を更新すると、他の変更と同じように、 20dev:build を再実行(および再デプロイ)することになります。
翻訳は 20dev:build によってコンパイルされています (そして、20の適用)。 連続した 20dev ウォッチはソース文字列を表示するため、ワンオフビルドでローカライズされた出力 をテストします。
<Trans> のテキスト子要素は複数行にまたがってもかまいません — 空白は JSX と同じように折りたたまれるため、<Trans>Welcome\n back</Trans> と抽出されたキーはどちらも Welcome back になります。