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

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


## 概要

`<Var>` コンポーネントは、翻訳対象にしない内容を表示するために使用します。
これは、変数やコードスニペットなど、翻訳対象にしない内容を表示する際に便利です。
さらに、APIキーや個人情報など、非公開のまま保持すべき内容を表示する際にも便利です。

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

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


## リファレンス

### プロパティ

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

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/next/guides/variables)を参照してください。