# General Translation React SDKs (gt-react, gt-next): Derive
URL: https://generaltranslation.com/ja/docs/react/reference/components/derive.mdx
---

title: Derive
description: General Translation の `gt-react` で、翻訳内の有限個のコンテンツバリアントを抽出対象としてマークします。Derive の API リファレンス。

---

`<Derive>` コンポーネントは、文法的一致、活用、語順を損なうことなく、文の分割や再利用可能なコンテンツを扱います。CLI に対して、その `children` が取り得るすべての値を一覧化し、それぞれに個別の翻訳エントリを作成するよう指示します。

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。例では `gt-react` から import していますが、代わりにお使いのフレームワークのパッケージから import してください。*

## 概要 [#overview]

結果が変わる値や関数呼び出しをラップします。CLI は、起こりうる各結果を、それぞれ独自の [`<T>`](/docs/react/reference/components/t) でラップされているかのように扱います。

```tsx
<T>
  The beautiful <Derive>{getSubject(gender)}</Derive> plays with the ball.
</T>
```

これにより、&quot;The beautiful boy plays with the ball&quot; と &quot;The beautiful girl plays with the ball&quot; の 2 つのエントリが生成されます。

*注: `<Derive>` は高度な機能です。一見した以上に大量の翻訳エントリが生成される可能性があり、考えられるあらゆるコンテンツの組み合わせを静的に解析できなければなりません。文字列形式については、[`derive`](/docs/react/reference/functions/derive) を参照してください。*

## 仕組み [#how-it-works]

* **ビルド時の解析。** ビルド中に、CLI は各 `<Derive>` の children を解析し、取り得る結果ごとに個別の翻訳エントリを作成するため、言語ごとの文法的な一致や語順を正しく処理できます。
* **Runtime では変更されずにレンダリング。** Runtime では、`<Derive>` は解決後の children をそのままレンダリングします。導出が影響するのは抽出のみです。
* **静的要件。** children はビルド時に確定できる必要があります。対応する構文には、文字列・数値・真偽値のリテラル、入れ子の `<Derive>` と [`<Var>`](/docs/react/reference/components/var) を含む JSX 式、三項演算子、結果を静的に解析できる関数呼び出しが含まれます。動的な値は `<Var>` でラップする必要があります。

## Props [#props]

| Prop                    | 説明                      | Type        | 任意  | デフォルト |
| ----------------------- | ----------------------- | ----------- | --- | ----- |
| [`children`](#children) | CLI が取り得る値を解析する静的コンテンツ。 | `ReactNode` | いいえ | —     |

### `children` [#children]

**型** `ReactNode` · **必須**

静的コンテンツ — リテラル、三項演算子、または結果を静的に解析できる関数呼び出し。CLI は、想定される値ごとに 1 つの翻訳エントリを生成します。

## 例 [#examples]

```tsx title="BasicExample.tsx"
import { T, Derive } from 'gt-react';

export default function Example({ gender }) {
  return (
    <T>
      The <Derive>{gender === 'male' ? 'boy' : 'girl'}</Derive> is beautiful.
    </T>
  );
}
// 生成される文字列: "The boy is beautiful" と "The girl is beautiful"
```

```tsx title="FunctionInvocation.tsx"
import { T, Derive } from 'gt-react';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

export default function Example({ gender }) {
  return (
    <T>
      The <Derive>{getSubject(gender)}</Derive> is beautiful.
    </T>
  );
}
```

```tsx title="MultipleDerive.tsx"
import { T, Derive } from 'gt-react';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}
function getObject(toy) {
  return toy === 'ball' ? 'ball' : 'crayon';
}

export default function PlayExample({ gender, toy }) {
  return (
    <T>
      <Derive>{getSubject(gender)}</Derive> plays with the{' '}
      <Derive>{getObject(toy)}</Derive>.
    </T>
  );
}
// 4つのエントリを作成（2 × 2）: boy/girl × ball/crayon
```

## 制限事項 [#limitations]

* **指数的に増加します。** `<Derive>` を 1 つ追加するごとに、翻訳エントリの総数が増えていきます。必要な場合にのみ使用し、可能であればよりシンプルな構造を優先してください。
* **可変コンテンツはラップする必要があります。** static function returns 内の動的または可変なコンテンツは、[`<Var>`](/docs/react/reference/components/var) でラップする必要があります。そうしないとビルド エラーになります。

```tsx
// ✅ 正しい
function getContent() {
  return <>Hello, <Var>{userName}</Var>!</>;
}

// ❌ 誤り — ビルドエラーが発生する
function getContent() {
  return <>Hello, {userName}!</>;
}
```