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

title: Var
description: General Translation の gt-react で、動的な値を翻訳せずに翻訳文内へ埋め込みます。Var の API リファレンス。

---

`<Var>` コンポーネントは、翻訳してはいけない動的コンテンツを表示します。値、コードスニペット、API キーや個人データなどの非公開情報に使うことで、周囲のテキストは翻訳可能なままにできます。

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

## 概要 [#overview]

[`<T>`](/docs/react/reference/components/t) の中に `<Var>` を配置すると、その値を変数として扱えます。値自体はそのまま表示され、それ以外の文はその値に合わせて翻訳されます。

```tsx
<T>
  Your name is <Var>{user.name}</Var>.
</T>
```

*注: `<Var>` は常に `<T>` の中で使用されます。[`<Num>`](/docs/react/reference/components/num)、[`<Currency>`](/docs/react/reference/components/currency)、[`<DateTime>`](/docs/react/reference/components/datetime) のいずれにも当てはまらない動的な値を幅広く扱うための受け皿だと考えてください。*

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

* **翻訳対象から除外されます。** `<Var>` の内容は General Translation API に送信されません。渡されたとおりにそのまま表示されるため、動的な値や機密性の高い値を保持できます。
* **周囲の翻訳を維持します。** 値を変数としてマークすると、周囲のテキストを1つの翻訳可能なエントリのまま保てるため、各ロケールで適切な位置に変数を差し込めます。

## Props [#props]

| Prop                    | 説明                  | 型        | 任意  | デフォルト |
| ----------------------- | ------------------- | ----------- | --- | ----- |
| [`children`](#children) | 翻訳せずにレンダリングする値。     | `ReactNode` | いいえ | —     |
| [`name`](#name)         | メタデータに使用するエントリの変数名。 | `string`    | はい  | —     |

### `children` [#children]

**型** `ReactNode` · **必須**

コンポーネント内にレンダリングする内容です。内容は変更されず、そのまま渡され、翻訳されることはありません。

### `name` [#name]

**型** `string` · **任意**

メタデータや翻訳エントリ内で値を識別するために使われる、任意の変数名です。

## 例 [#examples]

```tsx title="Address.tsx"
import { T, Var } from 'gt-react';

export default function Example({ user }) {
  return (
    <T>
      Translate this text! Your name is: <Var>{user.name}</Var> // [!code highlight]
      <Var><p>Do not translate this text</p></Var> // [!code highlight]
    </T>
  );
}
```

## メモ [#notes]

* Variable components は、翻訳対象外の動的コンテンツを翻訳文に含めないようにします。
* `<T>` 内では必ず `<Var>` を使用してください。
* ロケールに応じた書式設定には、代わりに [`<Num>`](/docs/react/reference/components/num)、[`<Currency>`](/docs/react/reference/components/currency)、または [`<DateTime>`](/docs/react/reference/components/datetime) を使用してください。