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

{/* 自動生成: 直接編集しないでください。content/docs-templates/ 内の template を編集してください。 */}


## 概要

`<Derive>` コンポーネントは、語の一致、活用、語順の変化を損なうことなく、文の断片化や再利用可能なコンテンツに対応するために使用します。
次の例では、&quot;美しい少年がボールで遊ぶ&quot; と &quot;美しい少女がボールで遊ぶ&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-native';

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-native';

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-native';


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-native';

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-native/api/components/var) コンポーネントを参照してください。
* メインの翻訳コンポーネントについては、[`<T>`](/docs/react-native/api/components/t) を参照してください。
* `<Derive>` の文字列版については、[`derive`](/docs/react-native/api/strings/derive) を参照してください。