# gt-react: General Translation React SDK: Var
URL: https://generaltranslation.com/ja/docs/react/api/components/var.mdx
---
title: Var
description: Var コンポーネントの API リファレンス
---

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


## 概要

`<Var>` コンポーネントは、翻訳しないコンテンツをレンダリングするために使用します。
これは、変数やコードスニペットなど、翻訳しないコンテンツをレンダリングする場合に便利です。
また、APIキーや個人情報など、非公開のまま保持すべきコンテンツをレンダリングする場合にも便利です。

```jsx
<Var>{user.name}</Var>
```

`<Var>` コンポーネントは、常に `<T>` コンポーネント内で使用します。
`<Currency>`、`<DateTime>`、`<Num>` のいずれにも当てはまらない動的な値を扱うための汎用的なものと考えてください。


## リファレンス

### Props

<TypeTable
  type={{
      "children?": {
          type: 'JSX.Element',
          optional: true,
          default: 'undefined',
      },
      "name?": {
          type: 'string',
          optional: true,
          default: 'undefined',
      },
      "value?": {
          type: 'string',
          optional: true,
          default: 'undefined',
      },
  }}
/>

### 説明

| Prop       | 説明                                                   |
| ---------- | ---------------------------------------------------- |
| `children` | コンポーネント内にレンダリングする内容です。指定されている場合は、`value` よりも優先されます。  |
| `value`    | `children` が指定されていない場合に表示する省略可能なデフォルト値です。文字列を指定できます。 |

### 戻り値

翻訳しないコンテンツを含む`JSX.Element`。

***

## 例

### 基本的な例

`<Var>` コンポーネントは、`<T>` コンポーネントの中で使用する必要があります。

```jsx title="Address.jsx" copy
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>
  );
}
```

***


## 注記

* 変数コンポーネントは、翻訳文内で翻訳対象外の動的コンテンツを扱ううえで不可欠です。
* 変数コンポーネントは必ず `<T>` コンポーネント内で使用してください。
* `<Num>`、`<Currency>`、`<DateTime>` などのコンポーネントは、正確なフォーマットを実現するためのローカライズ機能を提供します。

## 次のステップ

* `<Var>` コンポーネントや、`<Currency>`、`<DateTime>`、`<Num>` などのほかの変数コンポーネントについて詳しい説明と使用例は、[変数コンポーネントの使用](/docs/react/guides/variables) を参照してください。