リッチテキストと構造化メッセージ

まずメッセージの構造から考える

翻訳で何を保つ必要があるかを考えてください。

• 単なるプレーンテキスト
• 文字列の中に変数が入る
• リンクや強調を埋め込む
• マークアップで書いたほうが自然な複数形や選択分岐

実用的な目安

• プレーンな文字列と、ほとんどの文字列生成ケースでは t を使います。
• インラインマークアップや構造化されたリッチテキストが重要なら Trans を使います。
• 関数形式よりコンポーネント形式のほうがマークアップ内で読みやすいなら、Plural、Select、SelectOrdinal を使います。

これは厳格な禁止事項ではなく、あくまで目安です。 目的は、Lingui の公式な意味論に沿いつつ、読みやすく記述できるようにすることです。

例

プレーンな文字列: t を使う

<button>{$t`Submit`}</button>
<img alt={$t`Profile photo of ${name}`} />

リンクを含むリッチテキスト: Trans を使う

<!-- 翻訳者には "Read the <0>documentation</0>." が見え、リンク位置を並べ替えられます。 -->
<Trans>Read the <a href="/docs">documentation</a>.</Trans>

マークアップ内の複数形: コンポーネント形式と関数形式

<!-- コンポーネント形式: 複数形の分岐がその場で見えます。 -->
<Plural value={count} one="# file selected" other="# files selected" />

<!-- 関数形式: 同等ですが、文の中ではこちらのほうが自然に読めることがあります。 -->
<p>
  {$t`You have ${$plural(count, { one: "# message", other: "# messages" })}.`}
</p>

描画系の違いは依然として重要

• Svelte では、Trans、Plural などはリアクティブモデルに参加します。ロケールが変わると再描画されます。
• Astro では、翻訳結果は描画時点で確定します。静的ならビルド時、サーバー、ハイブリッドならリクエスト時です。クライアント側での再描画はありません。