# gt-react: General Translation React SDK: Derive
URL: https://generaltranslation.com/ja/docs/react/api/components/derive.mdx
---
title: Derive
description: Derive コンポーネントの API リファレンス
---

{/* 自動生成: 直接編集せず、代わりに content/docs-templates/ 内の template を編集してください。 */}


## 概要

`<Derive>` コンポーネントは、語の一致、活用、語順の変化を損なうことなく、文の断片化や再利用可能なコンテンツを処理するために使用します。
次の例では、&quot;The beautiful boy plays with the ball&quot; と &quot;The beautiful girl plays with the ball&quot; という 2 つの別個の訳文が生成されます。

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

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

`<Derive>` コンポーネントは、関数呼び出しを参照解決し、その関数が返すすべての可能なコンテンツをカタログ化するよう CLI ツールに指示します。各 `return` 文は、あたかも `<T>` コンポーネントで囲まれているかのように扱われます。

<Callout>
  **高度な使用法:**
  `<Derive>` コンポーネントは高度な機能であり、想定以上に大量の翻訳エントリを生成する可能性があるため、注意して使用してください。
  さらに、`<Derive>` では、考えられるすべてのコンテンツの組み合わせが静的に解析可能でなければならないという厳格な要件があります。
</Callout>

詳細については、[gt-next@6.8.0](/devlog/gt-next_v6_8_0) のリリースノートを参照してください。

***


## リファレンス

### プロパティ

<TypeTable
  type={{
  children: {
    type: 'function invocation',
    optional: false,
  },
}}
/>

### 説明

| Prop       | 説明                                |
| ---------- | --------------------------------- |
| `children` | 静的コンテンツ。CLI は、想定されるすべての戻り値を解析します。 |

### 戻り値

関数呼び出しでレンダリングされたコンテンツを含む `React.JSX.Element`。結果の候補ごとに個別の翻訳エントリが作成されます。

***

## 挙動

### ビルド時の解析

ビルドプロセス中に、CLIツールは`<Derive>`コンポーネントの子要素を解析し、想定される結果ごとに個別の翻訳エントリを作成します。
これにより、言語ごとの文法上の一致や語順の違いにも適切に対応できます。

### 要件

`<Derive>` コンポーネントの子要素は、ビルド時に確定できる必要があります。サポートされる構文は次のとおりです。

* 文字列、数値、真偽値のリテラル
* `<Derive>` コンポーネントや `<Var>` コンポーネントがネストされた JSX 式
* 三項演算子
* 関数呼び出し (結果を静的に解析できるもの) 

***

## 例

### 基本的な使い方

文の構造に影響する動的コンテンツを扱うには、`<Derive>` を使用します。

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

export default function Example({ gender }) {
  return (
    <T>
      The <Derive>{gender === 'male' ? 'boy' : 'girl'}</Derive> is beautiful.
    </T>
  );
}
```

これにより、2 つの翻訳エントリが作成されます。

* &quot;その少年は美しい&quot;
* &quot;その少女は美しい&quot;


### 関数呼び出しの場合

関数呼び出しによって文構造が変わる動的コンテンツを扱うには、`<Derive>` を使用します。

```jsx title="BasicExample.jsx" copy
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>
  );
}
```


### 変数を使う場合

静的な関数の戻り値に含まれる動的コンテンツには、`<Derive>` と `<Var>` を組み合わせて使います。

```jsx title="WithVariables.jsx" copy
import { T, Derive, Var } from 'gt-react';


function getTitle(title) {
  return title === 'Mr.' ? 'Mr.' : 'Ms.';
}

function getGreeting(title) {
  return (
    <>
      Hello, <Derive>{getTitle(title)}</Derive>. How are you, <Var>{name}</Var>?
    </>
  );
}

export default function Greeting({ title, name }) {
  return (
    <T>
      <Derive>{getGreeting(title)}</Derive>
    </T>
  );
}
```


### 複数の Derive コンポーネント

複数の `<Derive>` コンポーネントを使用すると、翻訳エントリが倍増するため注意してください。

```jsx title="MultipleDerive.jsx" copy
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 の組み合わせ) が作成されます。

* &quot;boy plays with the ball&quot;
* &quot;boy plays with the crayon&quot;
* &quot;girl plays with the ball&quot;
* &quot;girl plays with the crayon&quot;


### サポートされる関数構文

```jsx title="SupportedSyntax.jsx" copy
function getExamples(key) {
  switch (key) {
    case 'literals':
      if (condition1) {
        return 'The boy';
      } else if (condition2) {
        return 22;
      } else {
        return true;
      }
    case 'jsx':
      return (
        <>
          Hello, <Derive>{getTitle(title)}</Derive>. How are you,{' '}
          <Var>{name}</Var>?
        </>
      );
    case 'ternary':
      return condition ? 'The boy' : 'The girl';
    case 'function_calls':
      return otherStaticFunction();
  }
}
```

***


## 制限事項

### パフォーマンスへの影響

`<Derive>` を使用すると、翻訳エントリが指数関数的に増加する可能性があります。
`<Derive>` コンポーネントが 1 つ増えるごとに、訳文の総数は倍々に増えていきます。

### 可変コンテンツ

静的関数の戻り値に含まれる動的または可変のコンテンツは、`<Var>` コンポーネントでラップする必要があります。

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

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

***


## 注意事項

* `<Derive>` コンポーネントは、言語をまたいで文法的な正確さを保ちながら、文の断片化に対応できるよう設計されています。
* 1 つの翻訳で複数の `<Derive>` コンポーネントを使用する場合は、パフォーマンスへの影響を常に考慮してください。
* 静的関数内のすべての return 文は、`<T>` コンポーネントでラップされているものとして扱ってください。
* `<Derive>` の使用は必要最小限にとどめ、可能であればよりシンプルな翻訳構造を優先してください。

## 次のステップ

* 訳文内の可変コンテンツについては、[`<Var>`](/docs/react/api/components/var) コンポーネントを参照してください。
* メインの翻訳コンポーネントについては、[`<T>`](/docs/react/api/components/t) を参照してください。
* `<Derive>` の文字列版については、[`derive`](/docs/react/api/strings/derive) を参照してください。