← コンセプト

トークンの検出

「トークン検出」とは、UI の書き方から翻訳が必要な箇所を SDK が自動的に判別する仕組みです。コンテンツの形に応じて、4つの構成要素があります。

t() — インライン文字列

主力となる関数です。原文テキストを渡して呼び出すと、現在のロケールの翻訳を返します（そのロケールの準備がまだ整っていない場合は原文テキストそのものを返します）。省略可能な category は関連するフレーズをグループ化し、コンテキストとして機械翻訳に渡されます。params は {placeholders} に値を埋め込みます。

const t = useT();

// t(phrase, category?, params?)
t('Hello, {name}!', 'Greetings', { name });

<Translate> — コンテンツブロック

マークアップの一部を囲むと、SDKがそれをコンテンツブロックにトークン化します(各テキストノードが1つのフレーズになります)。その後、ロケールが変わるたびにブロック全体を再翻訳します。ブロックは内容とカテゴリーから生成される安定したIDで管理されるため、再レンダリングやリロードをまたいでも同じブロックとして認識されます。

<Translate category="Home">
  <p>Welcome to our store. Browse the catalog in your language.</p>
</Translate>

<Phrase> — マークアップを含む 1 つの文

文中にインラインのマークアップや埋め込み変数が含まれる場合、<Phrase> はそれをひとつの翻訳単位として扱います。そのため「Hi Sarah, you have 3 items」のような文も、断片に分割されず、自然なひとつの文として翻訳されます。パラメータと複数形にも対応しています。

<Phrase category="Cart" params={{ name: 'Sarah', count: 3 }}>
  Hi %name%, you have %count% items in your cart.
</Phrase>

<DontTranslate> — そのままにする

ブランド名、コード、識別子、住所など、翻訳してはいけない領域を指定できます。translate="no" として出力され、検出処理の対象から完全に除外されます。

<p>Welcome! <DontTranslate>This sentence always stays in English.</DontTranslate> Thanks for visiting!</p>