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

title: derive
description: General Translation gt-react で抽出できるよう、string 翻訳内で限られたコンテンツバリアントをマークします。derive の API リファレンス。

---

`derive` 関数を使うと、string 翻訳内で静的な関数呼び出しや変数式を使用できます。これは [`<Derive>`](/docs/react/reference/components/derive) コンポーネントの string 版で、再利用可能なコード、断片化された文の国際化、語の一致の維持に役立ちます。

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

## 概要 [#overview]

結果が変わりうる関数呼び出しや式をラップします。CLI は取りうる結果をすべて特定し、それぞれに対応する翻訳エントリを作成します。

```tsx
const getDisplayName = (condition) => (condition ? 'User' : 'Admin');

gt(`${derive(getDisplayName(condition))} says hello.`);
// 2つのエントリを作成します:
// "User says hello."  -> "Usuario dice hola."
// "Admin says hello." -> "Administrador dice hola."
```

*注: `derive` は、あり得る結果ごとに個別の翻訳エントリを作成するため、翻訳数が大幅に増える可能性があります。使用は慎重に行い、増加率が大きくなりすぎる場合は ICU の select 文を優先してください。*

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

* **ビルド時の解析。** CLI はラップされた式を解析し、取り得るすべての静的な戻り値を特定して、それぞれに対して個別の翻訳エントリを作成します。これにより、言語ごとの語形変化や文法的一致、語順を保てます。
* **Runtime では変更されません。** `derive` は Runtime では引数をそのまま返し、導出が影響するのは抽出時だけです。`derive` 呼び出しを追加または変更したら、CLI が各式を解決できることを確認するために `gt validate` を実行してください。
* **静的である必要があります。** 導出できるのは、ビルド時に判明しているコンテンツだけです。動的コンテンツは [`declareVar`](/docs/react/reference/functions/declare-var) でラップしてください。
* **パフォーマンス。** [`<Derive>`](/docs/react/reference/components/derive) と同様に、1 つの文字列内で複数の `derive` 呼び出しを使うと、エントリ総数が増えます。

## パラメーター [#parameters]

| パラメーター                | 説明                 | 型                                                  | 任意  | デフォルト |
| --------------------- | ------------------ | -------------------------------------------------- | --- | ----- |
| [`content`](#content) | 翻訳対象のコンテンツを返す静的な式。 | `string \| boolean \| number \| null \| undefined` | いいえ | —     |

### `content` [#content]

**型** `string | boolean | number | null | undefined` · **必須**

取り得る結果をビルド時に解析できる、静的な関数呼び出しまたは式。

## 戻り値 [#returns]

**型** `T`

`content` をそのまま返し、型 `T` を保持します。

## 例 [#examples]

```tsx title="FragmentedSentence.tsx"
import { derive, gt } from 'gt-react';

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

function Component({ gender }) {
  const translation = gt(`The ${derive(getSubject(gender))} is playing.`);
  return <p>{translation}</p>;
}
// "The boy is playing"  -> "El niño está jugando"
// "The girl is playing" -> "La niña está jugando"
```

```tsx title="WithVariables.tsx"
import { derive, declareVar, gt } from 'gt-react';

function getGreeting(name) {
  return name ? `Hello, ${declareVar(name)}` : 'Hello, stranger';
}

function Component({ name }) {
  const translation = gt(`${derive(getGreeting(name))}! How are you?`);
  return <p>{translation}</p>;
}
```

```tsx title="ComplexFunction.tsx"
import { derive, gt } from 'gt-react';

function getStatusMessage(status, priority) {
  if (status === 'complete') {
    return priority === 'high' ? 'Urgent task completed' : 'Task completed';
  } else if (status === 'pending') {
    return priority === 'high' ? 'Urgent task pending' : 'Task pending';
  }
  return 'Task status unknown';
}

function Component({ status, priority }) {
  const message = gt(`${derive(getStatusMessage(status, priority))}.`);
  return <p>{message}</p>;
}
```

```tsx title="InlineExpression.tsx"
import { derive, gt } from 'gt-react';

function Component({ gender }) {
  const message = gt(`The ${derive(gender === 'male' ? 'boy' : 'girl')} is playing.`);
  return <p>{message}</p>;
}
```

## メモ [#notes]

* `derive` の使用は慎重にしてください。翻訳エントリが指数関数的に増える可能性があります。
* 取り得るすべての結果は、ビルド時に静的に解析できる必要があります。
* `derive` 内の関数で使う動的な値は、[`declareVar`](/docs/react/reference/functions/declare-var) でラップしてください。
* JSX 形式については、[`<Derive>`](/docs/react/reference/components/derive) コンポーネントを参照してください。