# General Translation Knowledge Base: JSX 内の条件付きテキストはどう翻訳すればよいですか？
URL: https://generaltranslation.com/ja/kb/translate-conditional-jsx.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 三項演算子の各分岐を個別に翻訳するのではなく、文全体を `<T>` コンポーネントでラップし、条件を `<Branch>` で表現しましょう。こうすることで翻訳者が文脈全体を把握でき、言語ごとに語順を組み替えられます。
Category: 国際化
Last updated: 2025-09-26
Authors: Ernest McCarter
Published: 2025-09-26

## 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.

## はじめに

国際化で私がよく目にする間違いの一つに、単純な三項演算子を
複数の翻訳呼び出しに分割してしまうというものがあります。
たいていは次のようなコードです。

```jsx
'use client'

import { T, useGT } from 'gt-react'

export default function ThemeSetting({ enabled }) {
  const gt = useGT()

  return (
    <>
      <span>
        <T>Dark Mode:</T>
      </span>
      <button>{enabled ? gt('On') : gt('Off')}</button>
    </>
  )
}
```

ほとんどの場合、これは意図どおりに動作します。i18n を導入する前のコードは、おそらく `{ enabled ? 'On' : 'Off' }` のようなものだったのでしょう。
i18n 対応で `gt()` 関数を追加したのも、既存のコード構造をそのまま自然に拡張しただけだと思われます。

これを見るたびに、思わず顔をしかめてしまいます。これは、このライブラリが想定している使い方とはまったく異なるからです。
特に機械翻訳を使う場合、これが誤りである理由は 2 つあります。(1) 文脈と (2) 柔軟性です。

### 文脈

意味は単語そのものだけでなく、その単語がどのように提示されるかにも込められています。
戻る矢印に添えられた &quot;back&quot; という単語は、カイロプラクターの履歴書に書かれた &quot;back&quot; (背中) とはおそらくまったく異なる意味を持つでしょう。
また、より広い文脈がなければ、翻訳者は (たとえ人間であっても) 単語を正しく訳すのに苦労することがあります。
WhatsApp の i18n 部門が、画像編集ツールの &quot;crop&quot; (切り抜き) という単語を、ドイツ語で農作物を意味する &quot;crop&quot; と訳してしまったという有名な話があります。

こうした文脈の問題を解決するために、[`<T>`](/docs/react/reference/components/t) コンポーネントや [`<Branch>`](/docs/react/reference/components/branch) コンポーネントを使って、コンテンツの提示方法に関する情報を渡すことができます。
今回の例でいえば、これにより「翻訳者」は &quot;on&quot; と &quot;off&quot; が何を意味するのかを、より広い視点から把握できるようになります。

```jsx
<T>
  <span>Dark Mode:</span>
  <button>
    <Branch branch={enabled.toString()} true="On" false="Off" />
  </button>
</T>
```

### 柔軟性

文脈に加えて、LLMのコード理解力を生かせるのも、LLM翻訳ならではの面白い活用法です。
言語によってコンポーネントの順序が変わる例を見てみましょう。

```jsx
<T>
  I eat lunch at <Branch branch={atHome.toString()} true="home" false="work" />.
</T>
```

つまり、次の2つの文が考えられます。

* &quot;I eat lunch **at home**&quot;
* &quot;I eat lunch **at work**&quot;

中国語 (標準中国語) では次のようになります。

* &quot;我**在家**吃午餐&quot;
* &quot;我**在公司**吃午餐&quot;

[`<T>`](/docs/react/reference/components/t) コンポーネントは、ここで語順を入れ替える必要があることを認識し、それに合わせて子要素を並べ替えます。
三項演算子と文字列翻訳を組み合わせる方法では、こうした処理を簡単には実現できません。

```jsx
<T>
  我在
  <Branch branch={atHome.toString()} true="家" false="公司" />
  吃午餐。
</T>
```

### まとめ

この記事から一つだけ覚えておいてほしいのは、コードの中で文脈と柔軟性を活かす方法を常に探るべきだということです。
[`<Branch />`](/docs/react/reference/components/branch) コンポーネントは、それを実現する最も手軽な方法の一つと言えるでしょう。

詳しくは [`<Branch />` コンポーネント](/docs/react/reference/components/branch)のドキュメントをご覧ください。

## Related questions

- [React で複数形を扱うには？](https://generaltranslation.com/ja/kb/how-to-handle-plurals-in-react.mdx): n === 1 のような条件分岐で複数形の選択ロジックをハードコードするのは避けましょう。英語のみのアプリなら小さなヘルパーで十分ですが、多言語アプリではロケール対応の複数形規則が必要になります。gt-react や gt-next の `<Plural>` のような i18n コンポーネントを使えば、あらゆる言語の複数形に対応できます。
- [翻訳ファイルなしで i18n はできますか？](https://generaltranslation.com/ja/kb/i18n-without-translation-files.mdx): はい。gt-react または gt-next を使えば、コンテンツは `<T>` コンポーネントで囲んだままコンポーネント内にインラインで記述でき、翻訳はビルド時に出力として生成されます。そのため、キーやロケールごとの JSON ファイルを作成したり、同期を保ったりする必要はありません。
- [多言語アプリをローンチする前に何を確認すべきか？](https://generaltranslation.com/ja/kb/multilingual-app-launch-checklist.mdx): 多言語アプリをローンチする前に、サポート対象のすべてのロケールで次の9項目をテストしてください：エラー時を含むユーザージャーニー全体、言語検出と言語の切り替え、変数と複数形、通貨とタイムゾーン、テキストの伸長、右から左のレイアウト、アクセシビリティ、本番環境での翻訳の配信、SEOのためのクロール可能な言語別URL。各項目には明確な合格条件が必要です。

## Previous and next questions

- Previous question: [React で複数形を扱うには？](https://generaltranslation.com/ja/kb/how-to-handle-plurals-in-react.mdx)
- Next question: [多言語対応のNext.jsアプリでSEOを設定するには？](https://generaltranslation.com/ja/kb/multilingual-nextjs-seo.mdx)

## Sitemap

See the [Knowledge Base sitemap](https://generaltranslation.com/ja/kb/sitemap.md) for every article.