# General Translation Knowledge Base: General Translation と vue-i18n：どちらを使うべきか
URL: https://generaltranslation.com/ja/kb/general-translation-vs-vue-i18n.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: General Translation を使うと、Vue チームはテンプレートに翻訳元の文言を直接記述し、CLI で翻訳を生成できます。gt-vue プラグインは、そのコンテンツをロケール対応の複数形や数値フォーマットでレンダリングします。キーで管理する原文ファイルの保守をなくしたいなら General Translation が適しています。一方、Nuxt の i18n モジュールと確立されたカタログのワークフローを利用しているチームには、引き続き vue-i18n が適しています。
Category: 国際化
Last updated: 2026-10-16
Authors: Kevin Wu, Jackie Chen
Published: 2026-10-16

vue-i18n は、Vue アプリでメッセージをユーザーの言語でレンダリングするライブラリです。ロケールごとにメッセージを定義し、テンプレート内でキーを使って参照すれば、複数形、日付、数値のフォーマットも行ってくれます。ただし、翻訳そのものは行いません。各言語のメッセージは、開発者自身や翻訳者、または翻訳管理システム (TMS) が用意する必要があります。General Translation の `gt-vue` も同様に翻訳をレンダリングしますが、General Translation はさらに、テンプレートにインラインで記述した文言から翻訳を生成することもできます。

## vue-i18n の優れている点

* **成熟度。** vue-i18n は 2014 年から npm で公開されています。[現在メンテナンスされているのはバージョン 11 で](https://vue-i18n.intlify.dev/guide/maintenance)、バージョン 12 はアルファ版です。
* **Nuxt。** [`@nuxtjs/i18n` モジュールは vue-i18n 11 をベースにしており](https://i18n.nuxtjs.org/docs/getting-started)、ロケールプレフィックス付きのルート、ローカライズされたパス、ブラウザの言語検出、翻訳の遅延読み込み、hreflang の代替リンクなどの SEO タグといった機能を追加します。
* **フォーマットとリッチテキスト。** `datetimeFormats` と `numberFormats` は `Intl` のオプションを受け取ります。また、[`<i18n-t>` コンポーネント](https://vue-i18n.intlify.dev/guide/advanced/component)を使えば、`v-html` を使わずに翻訳済みメッセージ内に要素を配置できます。
* **コンポーネントと同じ場所にメッセージを置ける。** `@intlify/unplugin-vue-i18n` を使うと、[`<i18n>` ブロック](https://vue-i18n.intlify.dev/guide/advanced/sfc)でコンポーネントのメッセージをそのシングルファイルコンポーネント内にまとめて記述できます。
* **ツール。** [公式 ESLint プラグイン](https://eslint-plugin-vue-i18n.intlify.dev/rules/)は、テンプレート内にハードコードされたテキストや、欠落・未使用のキーを検出します。

## vue-i18n が開発者に任せていること

以下は、vue-i18n の Composition API を使ったシンプルな受信トレイの例です。各文字列にはキーを割り当て、英語のテキストはメッセージファイルで管理します：

```json title="locales/en.json"
{
  "inbox": {
    "heading": "Inbox",
    "unread": "You have {n} unread message | You have {n} unread messages"
  }
}
```

```vue title="Inbox.vue"
<script setup>
import { useI18n } from 'vue-i18n'

defineProps({ count: { type: Number, required: true } })
const { t } = useI18n()
</script>

<template>
  <section>
    <h1>{{ t('inbox.heading') }}</h1>
    <p>{{ t('inbox.unread', count) }}</p>
  </section>
</template>
```

すべての対象言語について、チームや翻訳サービスが用意した翻訳済みメッセージが必要です。この例では、実装上の注意点が2つあります。

* **複数形規則。** vue-i18n 11 のデフォルトの規則は、位置に基づいて形式を選択します。ポーランド語では `one`、`few`、`many`、`other` の各カテゴリを使用するため、[カスタムの `pluralRules` 関数](https://github.com/intlify/vue-i18n/blob/master/docs/guide/v11/essentials/pluralization.md)を設定して、数値を翻訳済みの各形式に対応付けてください。なお、現在アルファ版の vue-i18n 12 では [`Intl.PluralRules` に移行しています](https://github.com/intlify/vue-i18n/releases/tag/v12.0.0-alpha.4)。
* **メッセージ内の数値。** 複数形メッセージ内の `{n}` はロケールに合わせて書式設定されません。そのため、書式設定済みの値を渡さない限り、スペイン語でも 12345 は &quot;12.345&quot; ではなく &quot;12345&quot; とレンダリングされます。

## 翻訳を自動生成するインラインテンプレート

`gt-vue` は vue-i18n と同じ役割を担います。各ロケールのメッセージをレンダリングし、各ロケールの CLDR ルールに従って複数形を選択し、[`<Num>`](/docs/vue/reference/components/num)、[`<Currency>`](/docs/vue/reference/components/currency)、[`<DateTime>`](/docs/vue/reference/components/datetime) で数値・通貨・日付を書式設定します。そのうえで General Translation は、vue-i18n にはできない「翻訳の生成」まで行います。以下は、先ほどと同じ受信トレイの文言をインラインで記述した例です。

```vue title="Inbox.vue"
<script setup>
import { Num, Plural, T } from 'gt-vue'

defineProps({ count: { type: Number, required: true } })
</script>

<template>
  <section>
    <T><h1>Inbox</h1></T>
    <p>
      <T>
        <Plural :n="count">
          <template #singular>You have <Num :value="count" /> unread message</template>
          <template #plural>You have <Num :value="count" /> unread messages</template>
        </Plural>
      </T>
    </p>
  </section>
</template>
```

[`npx gt translate`](/docs/cli/reference/commands/translate) はテンプレートをスキャンし、各 [`<T>`](/docs/vue/reference/components/t) ブロックを構造ごと General Translation API に送信して、対象ロケールごとにカタログを書き出します。`singular` スロットと `plural` スロットは、対象言語の各形式の元となる翻訳元の文言を指定します。[`<Plural>`](/docs/vue/reference/components/plural) はロケールの規則に従ってこれらの形式を選択し、[`<Num>`](/docs/vue/reference/components/num) は数値を書式設定します。たとえば、英語では 12,345、スペイン語では 12.345、ポーランド語では 12 345 と表示されます。

この例では `gt-vue` 0.1.22 と Vue 3.3 以降を使用しています。プラグインとカタログローダーのセットアップについては、[Vue クイックスタート](/docs/vue/quickstart)を参照してください。生成されたテキストはチームで[ダッシュボード](/docs/platform/dashboard/guides/reviewing-translations)上で改善できます。また、[共有の用語集とカスタムプロンプト](/docs/platform/dashboard/guides/defining-context-for-translations)を使えば、プロジェクト間で用語の一貫性を保てます。

## vue-i18n と General Translation の比較一覧

| 機能             | vue-i18n                                                     | General Translation (`gt-vue`)                                                       |
| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------ |
| テキストの書き方       | ロケールごとのメッセージファイルまたは `<i18n>` ブロックにキーを記述                      | テンプレート内の [`<T>`](/docs/vue/reference/components/t) にインラインで記述                         |
| コンテンツの翻訳       | なし                                                           | あり ([`npx gt translate`](/docs/cli/reference/commands/translate) を使用)                |
| 複数形            | 縦棒で区切って各形式を記述。バージョン 11 ではポーランド語などの言語にカスタムルールが必要              | すべてのロケールで CLDR ルールに基づいて [`<Plural>`](/docs/vue/reference/components/plural) のスロットを選択 |
| メッセージ内の数値      | 書式設定済みの値を渡した場合のみ書式設定される                                      | [`<Num>`](/docs/vue/reference/components/num) がロケールごとに書式設定                           |
| アプリとのインテグレーション | Vue プラグイン。`@nuxtjs/i18n` を使うと Nuxt のルーティング、言語検出、SEO タグが追加される | リアクティブなロケール切り替えとカタログの読み込みに対応した Vue プラグイン                                             |

Nuxt のルーティングや SEO を `@nuxtjs/i18n` に頼っている場合や、既存のカタログワークフローをそのまま維持したい場合は、vue-i18n を引き続き使用してください。Vue テンプレート内のテキストを読みやすく保ちつつ、ビルド時に翻訳を生成し、レビュー担当者がダッシュボードで翻訳を編集できるようにしたい場合は、General Translation がおすすめです。

## vue-i18n からの移行

移行はコンポーネント単位で 1 つずつ進めます。上記の例のように、各キーの参照を [`<T>`](/docs/vue/reference/components/t) で囲んだ英語のテキストに置き換え、パイプ区切りの複数形メッセージは [`<Plural>`](/docs/vue/reference/components/plural) の `singular` スロットと `plural` スロットに書き換えます。まだ移行していないコンポーネントでは、vue-i18n とレビュー済みのカタログをそのまま使い続けてください。[Vue クイックスタート](/docs/vue/quickstart)に従って `gt-vue` をセットアップしたら、ビルドの前に [`npx gt translate`](/docs/cli/reference/commands/translate) を実行します。

## vue-i18n がポーランド語で誤った複数形を表示するのはなぜですか？

vue-i18n 11 で `pluralRules` 関数を設定し、ポーランド語の複数形カテゴリをメッセージ内の各位置に対応付けてください。たとえば、1 では `one`、2 と 22 では `few`、5 では `many` が選択されます。General Translation では、インラインの例で翻訳元の文言を指定すると、サービスが各翻訳形式を生成し、[`<Plural>`](/docs/vue/reference/components/plural) が適切な形式を選択します。

## 重要なポイント

* vue-i18n は Nuxt を強力にサポートする成熟した i18n プラグインですが、翻訳そのものは行いません。また、バージョン 11 では、ポーランド語などの言語向けにカスタムの複数形規則を用意する必要があります。
* General Translation の CLI はインラインの [`<T>`](/docs/vue/reference/components/t) ブロックから翻訳を生成し、`gt-vue` はロケールごとに複数形の選択と数値フォーマットを適用してレンダリングします。
* Nuxt やカタログベースのワークフローがすでに確立している場合は、vue-i18n を使い続けるのがよいでしょう。キー付きの原文ファイルを保守する手間をなくしたい場合は、`gt-vue` を選びましょう。

## Related questions

- [General Translation vs. i18next、react-intl、next-intl：どのi18nライブラリを使うべきか？](https://generaltranslation.com/ja/kb/general-translation-vs-i18n-libraries.mdx): i18next、react-intl、next-intlなどのオープンソースライブラリ自体は、翻訳を一切行いません。これらが行うのは、あなた自身や翻訳者、あるいは別のサービスが作成し、言語ごとのカタログファイルに用意した翻訳を表示することだけです。General Translationのライブラリも同じくオープンソースで同じ役割を果たしますが、General Translationはさらに、コードを文脈として活用しながら翻訳そのものも行います。
- [i18next の代替：General Translation と i18next の比較](https://generaltranslation.com/ja/kb/general-translation-vs-i18next.mdx): テキストを React コンポーネント内にインラインで記述したまま、JSX 構造とプロダクトの文脈を活かして翻訳を生成したい場合は、General Translation を選びましょう。i18next を使い続けながら、General Translation で既存のカタログを翻訳することもできます。i18next はメッセージのレンダリングと複数形の選択を担いますが、翻訳の生成には別のサービスが必要です。
- [General Translation と Lingui：どちらを使うべきか？](https://generaltranslation.com/ja/kb/general-translation-vs-lingui.mdx): Lingui と同様にテキストをインラインで記述しつつ、JSX の構造を文脈として翻訳を生成したい場合は General Translation を選びましょう。Lingui はインラインのメッセージをカタログに抽出し、翻訳は翻訳者や連携サービスに委ねます。General Translation の CLI はコードの変更に合わせて翻訳を更新し、チームは ダッシュボード でその翻訳をレビューできます。
- [react-intl の代替：General Translation と react-intl の比較](https://generaltranslation.com/ja/kb/general-translation-vs-react-intl.mdx): General Translation なら、React チームは ICU メッセージ構文をそのまま使いながら、翻訳の生成、用語の共有、ダッシュボード でのレビューを追加できます。react-intl が提供するのはフォーマット機能と FormatJS のカタログツールですが、General Translation は翻訳そのものも生成します。
- [翻訳ファイルなしで i18n はできますか？](https://generaltranslation.com/ja/kb/i18n-without-translation-files.mdx): はい。gt-react または gt-next を使えば、コンテンツは `<T>` コンポーネントで囲んだままコンポーネント内にインラインで記述でき、翻訳はビルド時に出力として生成されます。そのため、キーやロケールごとの JSON ファイルを作成したり、同期を保ったりする必要はありません。

## Previous and next questions

- Previous question: [General Translation と Tolgee の比較：どちらを使うべきか？](https://generaltranslation.com/ja/kb/general-translation-vs-tolgee.mdx)
- Next question: [General Translation と Weblate の比較：どちらを使うべきか](https://generaltranslation.com/ja/kb/general-translation-vs-weblate.mdx)

## Sitemap

See the [Knowledge Base sitemap](https://generaltranslation.com/ja/kb/sitemap.md) for every article.