# gt-react: General Translation React SDK: derive
URL: https://generaltranslation.com/ja/docs/react/api/strings/derive.mdx
---
title: derive
description: derive() 文字列関数の API リファレンス
---

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


## 概要

`derive` 関数を使うと、文字列の翻訳内で静的な関数呼び出しや変数式を使用できます。
これは、再利用可能なコードを記述したり、断片化された文を国際化したり、文法的一致を保ったりするのに役立ちます。

```jsx
const getDisplayName = (condition) => {
  return condition ? "User" : 'Admin';
};

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

これは、取りうる結果ごとに個別の翻訳を生成することで実現され、言語ごとの文法的一致、活用、語順の違いを保てるという利点があります。

<Callout>
  **複数の翻訳エントリ:**
  `derive` は、ラップした関数で取りうる結果ごとに個別の翻訳エントリを作成するため、翻訳数が大幅に増える可能性があります。
  この機能は慎重に使用し、増加数が多くなりすぎる場合は ICU の select 文を優先してください。
</Callout>

<Callout>
  **静的解析:**
  `derive` が解析できるのは、ビルド時に内容が確定しているものだけです。
  動的コンテンツ (変数、API 呼び出しなど) は、必ず `declareVar` でラップする必要があります。
</Callout>

## リファレンス

### パラメータ

| 名前        | 型                                                            | 説明                   |
| --------- | ------------------------------------------------------------ | -------------------- |
| `content` | `T extends string \| boolean \| number \| null \| undefined` | 翻訳可能な内容を返す静的な関数呼び出し。 |

### 戻り値

`T` 型の `content` を返します。

***

## 挙動

### ビルド時の解析

ビルド中、CLI ツールは次の処理を行います。

1. `derive` でラップされた関数を解析します
2. 関数が返しうるすべての値を特定します (これらはビルド時に静的解析できる必要があります)
3. 結果ごとに個別の翻訳エントリを作成します

### パフォーマンスに関する考慮事項

`<Derive>` と同様に、`derive` も翻訳エントリを増やします。
複数の取りうる結果を持つ関数呼び出しごとに個別の翻訳エントリが作成され、同じ文字列内に複数の `derive` 呼び出しがあると、エントリの総数は指数関数的に増加します。

***

## 例

### 再利用可能なコンテンツ

断片化された文の処理や、関数呼び出しを含む再利用可能なコンテンツには、`derive` を使用できます。

```jsx copy
import { derive, gt } from 'gt-react';

function getSubject() {
  return "boy";
}

function Component() {
  const translation1 = gt(`The ${derive(getSubject())} is playing.`);
  const translation2 = gt(`The ${derive(getSubject())} is having fun.`);
  const translation3 = gt(`The ${derive(getSubject())} is having a great time.`);
  return <p>{translation1} {translation2} {translation3}</p>;
}
```


### 断片化された文

関数呼び出しを使った断片化された文の処理には、`derive` を使用できます。

```jsx copy
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>;
}
```


### 文法的一致

`derive` を使わないと、文法的一致の翻訳は構文的にかなり複雑になります。
単複や性別などの一致を処理するには、select 文を追加する必要があります。
さらに、取りうる各パターンも列挙しなければなりません。

```jsx copy
import { gt } from 'gt-react';

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

function Component({ gender }) {
  const translation = gt(
    '{gender, select, boy {The boy is playing.} girl {The girl is playing.} other {}}',
    {
      gender: getSubject(gender) ,
    },
  );
  return <p>{translation}</p>;
}
```

`derive` を使えば、文法的一致は簡単に扱えます。
`select` 文は不要で、あらゆるパターンを個別に指定する必要もありません。

```jsx copy
import { derive, declareVar, 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>;
}
```

`derive` を使うと、CLI ツールは `getSubject` に 2 つの取りうる結果があることを判別し、それぞれの結果に対応する翻訳エントリを作成します。
これにより、文法的一致も自動的に処理されます。

* &quot;その男の子は遊んでいます&quot; -&gt; &quot;*El* niño está jugando&quot;
* &quot;その女の子は遊んでいます&quot; -&gt; &quot;*La* niña está jugando&quot;


### 変数を使う場合

動的なコンテンツでは、`derive` と `declareVar` を組み合わせて使えます。

```jsx copy
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>;
}
```


### 複雑な関数

関数には、複数の条件分岐や`return`文を含められます。

```jsx copy
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>;
}
```


### インライン式とロジック

`derive` 呼び出し内にロジックを直接埋め込めます。

```jsx copy
import { derive, gt } from 'gt-react';

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

***


## 注意事項

* `derive` は翻訳エントリを指数関数的に増やす可能性があるため、使用は慎重に行ってください
* 取りうるすべての結果は、ビルド時に静的に解析できなければなりません
* 静的関数内の変数は `declareVar` でラップする必要があります

## 次のステップ

* 静的関数内で動的コンテンツをマークする方法については、[`declareVar`](/docs/react/api/strings/declare-var)を参照してください
* 宣言された変数から元の値を取り出す方法については、[`decodeVars`](/docs/react/api/strings/decode-vars)を参照してください
* JSXでの相当機能については、[`<Derive>`](/docs/react/api/components/derive)を参照してください
* 詳しくは、[リリースノート](/devlog/gt-next_v6_12_0)を参照してください