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

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


## 概要

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

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

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

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

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

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

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

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

***


## 注意事項

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

## 次のステップ

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