# vue: <T>
URL: https://generaltranslation.com/ja/docs/vue/reference/components/t.mdx
---

title: "<T>"
description: Vue テンプレートのコンテンツをインプレースで翻訳します。<T> コンポーネントの API リファレンス。

---

`<T>` コンポーネントは、デフォルトスロット内の静的に記述されたコンテンツを読み取り、対応するリッチコンテンツカタログのエントリをレンダリングします。エントリがない場合は元のスロットをレンダリングし、HTML ラッパーは追加しません。

## 概要 [#overview]

1つの翻訳として扱うテキストとマークアップをラップします。

```vue
<T>
  Today, I went to the <strong>store</strong>.
</T>
```

ランタイム値には、[`<Var>`](/docs/vue/reference/components/var)、[`<Num>`](/docs/vue/reference/components/num)、[`<Currency>`](/docs/vue/reference/components/currency)、[`<DateTime>`](/docs/vue/reference/components/datetime) を使用します。選択肢には、[`<Plural>`](/docs/vue/reference/components/plural) または [`<Branch>`](/docs/vue/reference/components/branch) を使用します。

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

* **静的抽出。** CLI は、リテラルのテンプレート構造、翻訳メタデータ、対応するテキスト props、対応するすべての branch を抽出します。翻訳済みコンテンツに含まれるランタイム式は variable コンポーネント でラップする必要があります。通常の コンポーネント props とリスナーはランタイム値のままです。
* **カタログ参照。** コンポーネント は source structure とメタデータをハッシュ化し、アクティブなプラグインの カタログ から該当するエントリを取得します。エントリが存在しない場合や互換性がない場合は、source slot にフォールバックします。
* **リアクティブレンダリング。** [`createGT()`](/docs/vue/reference/functions/create-gt) プラグインでは、新しい カタログ の読み込みまたはロケールの変更により、参照結果が再レンダリングされます。[`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) が返すプラグインは、マウント前にプリロードを行い、ページを再読み込みしてロケールを変更します。
* **Fragment root。** コンポーネント は常に Vue Fragment 境界を返します。DOM element は挿入されず、翻訳済み output には コンポーネント 境界を変更することなく、child を 0 個、1 個、または複数含めることができます。

`<T>` は ICU 構文を処理せず、placeholders も補間しません。各動的な値は適切な variable コンポーネント でラップしてください。

## Props とスロット [#props]

| 名前                                  | 説明                             | 型            | 任意 | デフォルト   |
| ----------------------------------- | ------------------------------ | ------------ | -- | ------- |
| [`default`](#default-slot)          | 翻訳対象の静的テンプレートコンテンツ。            | `VNodeChild` | はい | 空       |
| [`context`](#context)               | 同一のソースコンテンツを区別するためのコンテキスト。     | `string`     | はい | —       |
| [`id`](#id)                         | 非推奨の互換性メタデータ。                  | `string`     | はい | —       |
| [`maxChars`](#maxchars)             | 翻訳に求める最大文字数。                   | `number`     | はい | —       |
| [`requiresReview`](#requiresreview) | エントリを人手によるレビューが必要なものとしてマークします。 | `boolean`    | はい | `false` |

### デフォルトスロット

**型** `VNodeChild` · **任意** · **デフォルト** 空

翻訳を構成するテキスト、要素、コンポーネント、および対応する分岐。作成するコンテンツは、variable コンポーネント でラップされた値を除き、静的である必要があります。

### `context`

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

コンテンツハッシュの計算時に使用する静的コンテキストです。同じソーステキストでも、動詞と形容詞としての `"Open"` のように異なる翻訳が必要な場合に使用します。

```vue
<T context="Button that opens the settings panel">Open</T>
```

### `id`

**型** `string` · **任意** · **非推奨**

React API 向けに適応されたコードとの互換性を保つためのメタデータです。Vue のコンテンツベースのカタログハッシュを置き換えるものではなく、安定した翻訳識別子として使用すべきではありません。

### `maxChars`

**型** `number` · **任意**

翻訳ツールに指定する最大文字数です。これは翻訳メタデータであり、Vue Runtime でレンダリングされる出力が切り詰められることはありません。

テンプレートでは、静的にバインドした整数を使用します。

```vue
<T :max-chars="80">Save your changes</T>
```

### `requiresReview`

**型** `boolean` · **任意** · **デフォルト** `false`

翻訳エントリを人手によるレビューが必要としてマークします。これは翻訳メタデータであり、単体ではレンダリングに影響しません。

```vue
<T requires-review>Terms and conditions apply.</T>
```

## テンプレートのルール [#template-rules]

抽出とランタイムレンダリングで結果が一致するよう、ソースの形状を決定的に保ってください。

* `<T>` を別の `<T>` 内にネストしないでください。
* 翻訳済みコンテンツとしてレンダリングされるすべての補間値やその他のランタイム値は、variable コンポーネント でラップしてください。
* `v-if`、`v-else-if`、`v-else`、`v-for` は翻訳の外に移動するか、[`<Branch>`](/docs/vue/reference/components/branch) または [`<Plural>`](/docs/vue/reference/components/plural) で代替パターンを表現してください。
* 翻訳内で `v-html`、`v-text`、`<slot>` を使用しないでください。
* カスタム コンポーネント には直接タグを使用してください。`<コンポーネント :is="...">` や `is="vue:..."` などのセレクター形式は、認識されている GT コンポーネント、または エクストラクター が明示的に解決するサポート対象の Vue 組み込み要素でのみサポートされます。任意のカスタムセレクター、ランタイムで選択されるセレクター、未解決のセレクターはサポートされません。
* `context` と `id` は静的な string、`maxChars` は静的にバインドされた整数、`requiresReview` は静的な boolean または属性のみとして保持してください。

HTML element および custom コンポーネント 上の静的な `placeholder`、`title`、`alt`、`aria-label`、`aria-labelledby`、`aria-describedby` props は、作成時と翻訳後の child value の両方がランタイムの truthiness チェックを通過する場合に翻訳対象となります。`<img>` のように child を持たない element や、source または翻訳後の child value が falsy の node では、source props が保持されます。それらの element のテキスト props は、[`useGT()`](/docs/vue/reference/composables/use-gt) を使用して個別に翻訳してください。これらのテキスト props の動的なバージョンは、`<T>` 内ではサポートされません。

```vue title="ProfileGreeting.vue"
<script setup lang="ts">
import { T, Var } from 'gt-vue';

defineProps<{ name: string }>();
</script>

<template>
  <T>
    Hello, <Var>{{ name }}</Var>!
  </T>
</template>
```

## コンポーネントの境界 [#components]

カスタムコンポーネント内で静的に記述されたデフォルトスロットのコンテンツは、周囲の翻訳の一部として扱われます。Vue は、コンポーネント本体、翻訳対象外のランタイム props、リスナー、識別情報を保持したまま、デフォルトスロットのコンテンツと対応する静的テキスト props を置き換えます。

```vue
<T>
  <DocsLink to="/docs">Read the documentation</DocsLink>
</T>
```

`DocsLink` の実装内で作成されたコンテンツは、外側の翻訳では認識されません。カスタムコンポーネントには直接タグを使用してください。セレクター形式で指定できるのは、エクストラクターが明示的に解決する認識済みの GT コンポーネントと、サポートされている Vue 組み込み要素に限られます。任意のカスタムセレクター、Runtime で選択されるセレクター、未解決のセレクターは翻訳ソースとして扱われません。

スコープ付きスロットや任意の名前を持つカスタムコンポーネントのスロットでは、代わりにスロット内に `<T>` を配置してください。不透明な動的コンポーネント境界は、[`<Var>`](/docs/vue/reference/components/var) でラップすることもできます。

リテラルの `<Suspense>` 境界では、静的で単一ルートのデフォルトスロットがサポートされます。その default コンテンツは外側の翻訳に含まれますが、fallback スロットは保持されるものの除外されます。境界が動的である場合や、エクストラクターが解決できない形でエイリアスが付けられている場合は、デフォルトスロットと fallback スロット内にそれぞれ別の `<T>` コンポーネントを配置してください。

## 空白 [#whitespace]

Vue のテンプレートコンパイラは、ソース内の空白を圧縮するか保持するかを決定します。抽出ツールは、利用側アプリの Vue コンパイラ設定を使用するため、コンパイラの `whitespace` オプションを変更すると、ソースコンテンツとそのハッシュが変わる可能性があります。

意味のある空白は、明示的にインラインで記述してください：

```vue
<T>Hello <strong>world</strong>!</T>
```

`<T>` 内でテキストを分割するコメントや、意味のある空白に隣接するコメントは避けてください。Vue ではビルドによってコメントの保持方法が異なる場合があり、その結果 translation hash がビルドに依存する場合、抽出ツールは拒否します。