# vue: コンテンツの翻訳
URL: https://generaltranslation.com/ja/docs/vue/guides/translating-content.mdx
---

title: コンテンツの翻訳
description: <T> コンポーネントを使用して、Vue テンプレートのコンテンツをインプレースで翻訳する方法。
related:
  links:
    - /docs/vue/guides/formatting-variables
    - /docs/vue/guides/handling-plurals-and-branches
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/configuring

---

[`<T>`](/docs/vue/reference/components/t) コンポーネントは、デフォルトスロットの内容をアクティブなロケールに翻訳します。ソース言語でフレーズ全体を記述し、テキスト、ネストされた要素、フォーマットを 1 つの単位として翻訳できるようにラップします。

## テンプレートのコンテンツを `<T>` でラップする [#wrap]

静的に作成したユーザー向けコンテンツをデフォルトスロットに配置します。

```vue
<script setup lang="ts">
import { T } from 'gt-vue';
</script>

<template>
  <T>
    <section>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </section>
  </T>
</template>
```

CLI はコンテンツと構造に基づいてエントリを識別します。翻訳内の通常の補間にはランタイム値を含めないでください。ランタイム値は [`<Var>`](/docs/vue/reference/components/var)、[`<Num>`](/docs/vue/reference/components/num)、[`<Currency>`](/docs/vue/reference/components/currency)、または [`<DateTime>`](/docs/vue/reference/components/datetime) でラップします。

[`<T>`](/docs/vue/reference/components/t) を別の [`<T>`](/docs/vue/reference/components/t) 内にネストしないでください。独立したフレーズは兄弟関係の翻訳に分割してください。

## 翻訳コンテキストを追加する [#context]

同じソーステキストが文脈によって異なる意味を持つ場合は、Vue 向けの `context` prop を使用します。

```vue
<T context="a bank beside a river">Bank</T>
```

コンテキストはカタログの識別情報を変更し、翻訳システムが意図した表現を選択するために必要な情報を提供します。ページには表示されません。

任意の`max-chars`および`requires-review` propsは、翻訳メタデータを追加します。CLIで抽出できるよう、これらの値は静的にしてください。

## カスタムコンポーネントを通じて翻訳する [#components]

カスタムコンポーネントのデフォルトスロットに静的に記述したコンテンツも、周囲のコンテンツとともに翻訳されます。

```vue title="src/components/HelpPanel.vue"
<script setup lang="ts">
import { T } from 'gt-vue';
import DocsLink from './DocsLink.vue';
</script>

<template>
  <T>
    Read the <DocsLink href="/docs">installation guide</DocsLink> before continuing.
  </T>
</template>
```

カスタムコンポーネントのインスタンス、リスナー、翻訳対象外の props は保持されたまま、翻訳済みコンテンツによってデフォルトスロットと対応する静的テキスト props が置き換えられます。`DocsLink` は Fragment に置き換えられないため、状態と動作は同じ境界に紐付いたままです。周囲の [`<T>`](/docs/vue/reference/components/t) は、更新時にルートの種類を変更せず、ソースと翻訳後のレンダリングの両方で Fragment をルートとして維持します。

外側の翻訳で表示されるのは、デフォルトスロットに渡されたコンテンツのみです。`DocsLink.vue` 内で作成されたテキストは、そのエントリには含まれません。内部テキストは専用の [`<T>`](/docs/vue/reference/components/t) でラップしてください。

翻訳内のカスタムコンポーネントタグは、Runtime で解決できる必要があります。ローカルコンポーネントはインポートするか、通常どおり登録してください。未解決のコンポーネントに関する警告は設定エラーであり、サポートされる翻訳ソースではありません。

## スロット境界を明示する [#slots]

外側の [`<T>`](/docs/vue/reference/components/t) では、カスタムコンポーネントの通常のデフォルトスロットのコンテンツを翻訳できます。スコープ付きスロット、任意の名前付きスロット、実行時に選択されるコンポーネントは、抽出では安全に特定できない振る舞いに依存します。

* そのスロットがフレーズを担う場合は、スコープ付きスロットまたは名前付きスロット内に [`<T>`](/docs/vue/reference/components/t) を配置します。
* 出力を変更せずに保持する必要がある不透明な動的境界は、[`<Var>`](/docs/vue/reference/components/var) でラップします。
* カスタムコンポーネントには直接タグを使用します。セレクター形式は、抽出器が明示的に解決できる認識済みの GT コンポーネントとサポート対象の Vue ビルトインに限定されます。任意のカスタムコンポーネント、実行時に選択されるコンポーネント、または未解決のセレクター境界の内側には、[`<T>`](/docs/vue/reference/components/t) を配置します。

[`<Suspense>`](https://vuejs.org/guide/built-ins/suspense) では、default スロットと fallback スロットにそれぞれ別の翻訳を配置します。

```vue
<Suspense>
  <T>ダッシュボードの準備ができました。</T>
  <template #fallback>
    <T>ダッシュボードを読み込んでいます…</T>
  </template>
</Suspense>
```

外側の [`<T>`](/docs/vue/reference/components/t) 内に [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense) がある場合、デフォルトコンテンツは翻訳対象にできますが、fallback はその翻訳の外に保持されます。各スロットのフレーズを個別の翻訳として扱うことで、どの翻訳に属するかが明確になります。

## ランタイムの構造を安全に表現する [#dynamic-structure]

翻訳では、抽出時点ですべての候補フレーズを把握できている必要があります。数に応じて変化する表現には [`<Plural>`](/docs/vue/reference/components/plural) を使用し、それ以外の有限な選択肢には [`<Branch>`](/docs/vue/reference/components/branch) を使用してください。翻訳ツリー内にランタイムの条件分岐を直接配置しないでください。

```vue
<T>
  <Branch :branch="status">
    <template #active>Your subscription is active.</template>
    <template #paused>Your subscription is paused.</template>
    <template #default>Your subscription status is unavailable.</template>
  </Branch>
</T>
```

Vue の template compiler は、インデントや改行をテキストノードとして扱う方法を制御します。読者に表示されるフレーズはレイアウト内に inline で記述し、抽出時と render 時で同じ構造が使われるよう、compiler の空白設定は固定してください。
## Next steps

- /docs/vue/guides/formatting-variables
- /docs/vue/guides/handling-plurals-and-branches
- /docs/vue/guides/translating-strings
- /docs/vue/guides/configuring