# gt-next: General Translation Next.js SDK: derive
URL: https://generaltranslation.com/ja/docs/next/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-next';

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

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

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

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;The boy is playing&quot; -&gt; &quot;*El* niño está jugando&quot;
* &quot;The girl is playing&quot; -&gt; &quot;*La* niña está jugando&quot;


### 変数を使う

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

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

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

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

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

***


## 注意点

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

## 次のステップ

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