# General Translation Knowledge Base: JSX の条件付きテキストはどのように翻訳すればよいですか？ URL: https://generaltranslation.com/ja/kb/translate-conditional-jsx.mdx Docs index: https://generaltranslation.com/llms.txt Description: 文を分割せずに、すべてのバージョンを翻訳します。三項演算子を使うと文が断片に分かれ、断片は意味を失ううえ、各言語の語順に沿った位置にも置けなくなります。General Translation では `` の中で `` を使い、文をひとつの単位として翻訳します。 Category: 国際化 Last updated: 2026-10-21 Authors: Ernest McCarter Published: 2025-09-26 JSX の条件付きテキスト (三項演算子などの条件によって選ばれる文言) を翻訳するには、文を分割せずに、すべてのバージョンを翻訳します。`I eat lunch at {atHome ? 'home' : 'work'}.` のような三項演算子は、ひとつの文を断片に分けてしまいます。"home" や "work" を単独で翻訳すると、意味を決める文脈となる文が失われます。しかも、コード上ではこれらの語が英語の文の末尾に固定されたままです。語順は言語によって異なり、たとえば中国語では、我在家吃午餐 ("I eat lunch at home") のように場所を動詞の前に置きます。 | アプローチ | 得意なこと | 自分で対応する必要があること | | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 国際化 (i18n) ライブラリ単体 (`i18next`、`react-intl`、`next-intl`) | バージョンごとの文脈キー (`i18next`) または ICU (International Components for Unicode) の `select` メッセージ (`react-intl`、`next-intl`) で、文のすべてのバージョンを保持できる | 文を JSX からキーファイルに移し、すべての言語ですべてのバージョンを記述すること | | Google Translate | テキストを1文字列ずつ、高速かつ汎用的に翻訳できる | 各バージョンを完全な文として書き出し、結果をコードに戻し、文言が変わるたびにその両方をやり直すこと | | 生の AI API (OpenAI API、Claude API) | すべてのバージョンをまとめて送信すれば、文全体を自然に翻訳できる | すべてのバージョンとその文脈を収集し、リリースをまたいで用語の一貫性を保ち、レビューを行い、結果をアプリに読み込むこと | | General Translation ([``](/docs/react/reference/components/t) と [``](/docs/react/reference/components/branch)) | [``](/docs/react/reference/components/t) が文をひとつの単位として翻訳し、すべてのバージョンはひとつの [``](/docs/react/reference/components/branch) 内にまとまる。各バージョンの文言全体を言語ごとに変えられる | 三項演算子を [``](/docs/react/reference/components/branch) に置き換えること ([``](/docs/react/reference/components/t) 内では ESLint の自動修正で対応可能) 、初回のみのセットアップ、文言が変わったときに [`npx gt translate`](/docs/cli/reference/commands/translate) を再実行すること | アプリを単一言語でのみ提供する場合は、通常の三項演算子で十分です。文言がすでにキーファイルで管理され、翻訳者がそこに訳を記入する運用なら i18n ライブラリ単体を、一度翻訳すれば済む文には Google Translate や生の AI API を使います。文が JSX 内にあり、文言が変わっても翻訳を最新に保つ必要がある場合は、[``](/docs/react/reference/components/t) 内で [``](/docs/react/reference/components/branch) を使います。数値によって文言が変わる場合は、代わりに [``](/docs/react/reference/components/plural) を使ってください。複数形規則は言語によって異なり、英語には2つ、アラビア語には6つの形があるためです。 General Translation の `gt-react` および `gt-next` ライブラリでは、[``](/docs/react/reference/components/t) 内の [``](/docs/react/reference/components/branch) コンポーネントで条件を処理します。値を `branch` (文字列、数値、または真偽値) として渡し、値ごとにプロパティを1つずつ追加し、フォールバックを `children` に記述します。フォールバックは、どのプロパティにも一致しない場合にレンダリングされます。条件によって1語にとどまらず文法が変わる場合は、各ブランチに完全な文を記述し、翻訳者が文言全体を調整できるようにしましょう。[``](/docs/react/reference/components/t) 内のインラインの三項演算子は、次のように [``](/docs/react/reference/components/branch) に書き換えられます。 ```tsx // インラインの三項演算子 {isActive ? 'Active' : 'Inactive'}; // 翻訳可能な分岐 Inactive ; ``` General Translation の ESLint プラグイン `@generaltranslation/react-core-linter` は [``](/docs/react/reference/components/t) 内の三項演算子を検出し、`npx eslint . --fix` を実行するとそれを [``](/docs/react/reference/components/branch) に変換します。続いて [`npx gt translate`](/docs/cli/reference/commands/translate) を実行すると、各 [``](/docs/react/reference/components/t) が `gt.config.json` に指定されたすべてのロケールに翻訳されます。詳しい手順は[複数形とブランチの扱い](/docs/react/guides/handling-plurals-and-branches)を参照してください。各フレームワークのクイックスタートへのリンクは [React の概要](/docs/react/overview#frameworks)にまとめられています。 ## Video The video is narrated in English, with English captions. [How do I translate conditional text in JSX?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-conditional-jsx.mp4) (46 秒) General Translation lets you wrap whole sentences in `T` and express conditions with `Branch`. Run `npx gt init`, choose Japanese and Chinese and sign in, put the sentence in a `T` component with a `Branch` so the translator sees it whole, then run `npx gt translate` to write Japanese and Chinese with the place before the verb. ## React で変数とリンクを含む文を翻訳するにはどうすればよいですか？ 変数とリンクを含む文を翻訳するには、文、変数、リンクテキストを 1 つの翻訳エントリにまとめます。こうすることで各言語に文全体が渡され、それぞれの文法に合わせて名前とリンクを適切な位置に配置できます。`Hi {name}, read the terms of service before you continue.` を "Hi"、"read the"、"terms of service"、"before you continue" に分割すると、翻訳者には前後の文脈のない 4 つの断片が渡されるうえ、コード上でも英語の語順のまま固定されてしまいます。 | アプローチ | 文の中でリンクを示す方法 | 開発者側に残る作業 | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | | 各部分を個別の文字列にする | リンクテキストが独立した文字列になる | 前後の文脈がなく、英語の語順に固定された断片 | | react-i18next `` | `<3>terms of service` のような番号付きタグ、または `components` プロパティで指定する名前付きタグ | 全言語での文字列の記述と、JSX 変更時のタグ番号の振り直し | | react-intl `` | `terms of service` のような名前付きタグ (`values` 内の関数でレンダリング) | 全言語でのメッセージの記述と、タグ名と `values` の対応の維持 | | General Translation ([``](/docs/react/reference/components/t) と [``](/docs/react/reference/components/var)) | 文の中に JSX として記述したリンク | 初回のみのセットアップと、文言変更時の [`npx gt translate`](/docs/cli/reference/commands/translate) の再実行 | 個別の文字列は、スタンドアロンのボタンラベルなど、文の一部ではないテキストにのみ使用してください。翻訳者が記入するカタログファイルで文言をすでに管理している場合は、react-i18next の `` または react-intl の `` を使用し、周囲の JSX が変わっても影響を受けない名前付きタグを優先してください。文が JSX 内にあり、文言が変わっても翻訳を常に最新に保つ必要がある場合は、General Translation の [``](/docs/react/reference/components/t) と [``](/docs/react/reference/components/var) を使用してください。 General Translation の `gt-react` および `gt-next` ライブラリでは、[``](/docs/react/reference/components/t) を使って文を分割せずに扱えます。文を [``](/docs/react/reference/components/t) でラップし、動的な値を [``](/docs/react/reference/components/var) に入れ、リンクは文の中に通常の JSX として記述します。 ```tsx import { T, Var } from 'gt-react'; export function TermsNotice({ name }: { name: string }) { return (

Hi {name}, read the terms of service before you continue.

); } ``` General Translation の [``](/docs/react/reference/components/t) は、リンクテキストを含めて段落全体を1つの単位として翻訳し、`` 要素とその `href` は記述したまま保持します。[``](/docs/react/reference/components/var) は `name` をそのままレンダリングし、General Translation API には一切送信せず、各ロケールの文で必要な位置に配置します。[``](/docs/react/reference/components/var) を使わずに `{name}` と記述すると、General Translation の [`static-jsx`](/docs/react/reference/lint-rules#static-jsx) lint ルールで検出され、`npx eslint . --fix` を実行すると [``](/docs/react/reference/components/var) で自動的にラップされます。Next.js の App Router では、General Translation の `gt-next` から [``](/docs/react/reference/components/t) と [``](/docs/react/reference/components/var) をインポートし、リンクには [`gt-next/link` の `Link`](/docs/react/nextjs/link) を使用します。`Link` は内部 URL にロケールプレフィックスを付加するため、スペイン語のユーザーがアクセスすると `/terms` は `/es/terms` になります。 ## react-i18next の Trans と General Translation の T は、ネストされた要素をどのように扱うのか？ react-i18next の `` コンポーネントは、React 要素を含む文を、言語ごとに 1 つの文字列からレンダリングします。この文字列では、各要素を `` の子要素内での位置によって示します。この文の子要素は、名前の前のテキスト、`name` の値、リンクの前のテキスト、リンク、末尾のテキストの 5 つです。したがって、0 から数えるとリンクは子要素 3 になります。 ```tsx import { Trans } from 'react-i18next'; export function TermsNotice({ name }: { name: string }) { return ( Hi {{ name }}, read the terms of service before you continue. ); } ``` ```json title="locales/en/translation.json" { "termsNotice": "Hi {{name}}, read the <3>terms of service before you continue." } ``` ある要素の内側にネストされた要素には、その親要素の子要素として番号が振られます。短いデフォルトリスト (`
`、``、``、`

`) に含まれる要素は、属性がなければ文字列内でも元の名前のまま残ります。`components` プロパティを使うと、番号を名前に置き換えられます。たとえば `components={{ termsLink: }}` とすると、文字列は `terms of service` になります。react-intl の `` も名前を使います。メッセージには `terms of service` が含まれ、`values` で `link` を `` 要素を返す関数にマッピングします。 `` でネストされた要素が翻訳されなくなった場合、原因はたいてい文字列と JSX の不一致です。リンクより前に子要素を追加・削除すると、それ以降の番号がすべてずれるため、全言語の文字列で番号を振り直さなければなりません。番号が誤った子要素を指していると、誤ったコンテンツがレンダリングされたり、リンクが消えたりします。また、`components` にない名前付きタグは、そのままテキストとしてレンダリングされます。 General Translation の [``](/docs/react/reference/components/t) なら、翻訳文字列を書く必要も、番号の同期を保つ必要もありません。[``](/docs/react/reference/components/t) タグで囲んだ JSX がそのまま翻訳元になります。General Translation はそのコンテンツからエントリを識別し、ネストされた各要素を、そのタグおよび General Translation が割り当てる内部識別子とともに記録します。[``](/docs/react/reference/components/t) タグの間に書いた要素内のテキストは、ネストの深さにかかわらず、文の残りの部分と一緒に翻訳されます。General Translation の [`` リファレンス](/docs/react/reference/components/t#overview)にある次の例をご覧ください： ```tsx Today, I went to

the store to buy some groceries.

``` General Translation の [``](/docs/react/reference/components/t) が翻訳するのは、タグの間に直接記述されたコンテンツだけです。そのため、`