Vue i18nブロック

Lingo.dev CLIによるVue i18nブロックのAI翻訳

Vue i18n ブロックとは何か？

Vue i18n ブロックは、Vue単一ファイルコンポーネント（SFC）内の特別な <i18n> セクションで、JSON形式の翻訳を含みます。これによりコンポーネントコードと一緒に翻訳を保持することができます。

例えば：

<template>
  <div class="container">
    <h1>{{ $t('welcome') }}</h1>
    <button @click="handleClick">{{ $t('button.submit') }}</button>
  </div>
</template>

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  }
}
</i18n>

Lingo.dev CLIとは何か？

Lingo.dev CLIは、AIでアプリやコンテンツを翻訳するための無料のオープンソースCLIです。従来の翻訳管理ソフトウェアに代わるものとして設計されており、既存のパイプラインと統合できます。

詳細については、概要をご覧ください。

このガイドについて

このガイドでは、Lingo.dev CLIを使用してVue i18nブロックを翻訳する方法を説明します。

以下の方法を学びます：

  • ゼロからプロジェクトを作成する
  • 翻訳パイプラインを設定する
  • AIで翻訳を生成する

前提条件

Lingo.dev CLIを使用するには、Node.js v18以上がインストールされていることを確認してください：

❯ node -v
v22.17.0

ステップ1. プロジェクトのセットアップ

プロジェクトのディレクトリにi18n.jsonファイルを作成します：

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

このファイルは、翻訳パイプラインの動作を定義し、どの言語間で翻訳するか、ローカライズ可能なコンテンツがファイルシステム上のどこに存在するかを指定します。

利用可能なプロパティの詳細については、i18n.jsonをご覧ください。

ステップ2. ソースロケールの設定

「ソースロケール」は、コンテンツが最初に書かれた元の言語と地域です。ソースロケールを設定するには、i18n.jsonファイルのlocale.sourceプロパティを設定します：

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

ソースロケールはBCP 47言語タグとして提供する必要があります。

Lingo.dev CLIがサポートするロケールコードの完全なリストについては、サポートされているロケールコードをご覧ください。

ステップ 3. ターゲットロケールを設定する

_ターゲットロケール_とは、コンテンツを翻訳したい言語と地域のことです。ターゲットロケールを設定するには、i18n.jsonファイル内のlocale.targetsプロパティを設定します：

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

ステップ 4. ソースコンテンツを作成する

まだ作成していない場合は、翻訳するコンテンツを含む<i18n>ブロックを持つVueコンポーネントファイルを作成してください。

注意： 翻訳プロセス中、ソースコンテンツファイルは翻訳されたコンテンツを含むように上書きされます（ソースコンテンツに加えて）。

ステップ 5. バケットを作成する

  1. i18n.jsonファイルのbucketsオブジェクトに"vue-json"オブジェクトを追加します：

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {}
  }
}

  2. "vue-json"オブジェクト内で、1つ以上のincludeパターンの配列を定義します：

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {
      "include": ["./example.vue"]
    }
  }
}

    これらのパターンは翻訳するファイルを定義し、以下のいずれかの方法で指定できます：

    • 特定のファイルパスを指定する（例："some/dir/file.vue"）
    • ワイルドカードプレースホルダーとしてアスタリスクを使用する（例："some/dir/*.vue"）

    再帰的なグロブパターン（例：**/*.vue）はサポートされていません。

ステップ 6. LLMを設定する

Lingo.dev CLIは大規模言語モデル（LLM）を使用してAIでコンテンツを翻訳します。これらのモデルを使用するには、サポートされているプロバイダーからAPIキーが必要です。

可能な限り早く開始するには、Lingo.dev Engineの使用をお勧めします — これは当社が提供するホスト型プラットフォームで、毎月10,000トークンの無料使用枠があります：

  1. Lingo.devアカウントにサインアップする。

  2. 次のコマンドを実行します：

    npx lingo.dev@latest login

    これによりデフォルトのブラウザが開き、認証を求められます。

  3. 画面の指示に従ってください。

ステップ 7. 翻訳を生成する

i18n.jsonファイルを含むディレクトリで、次のコマンドを実行します：

npx lingo.dev@latest run

このコマンドは：

  1. i18n.jsonファイルを読み込みます。
  2. 翻訳が必要なファイルを見つけます。
  3. ファイルから翻訳可能なコンテンツを抽出します。
  4. 設定されたLLMを使用して抽出されたコンテンツを翻訳します。
  5. 翻訳されたコンテンツをファイルシステムに書き戻します。

翻訳が初めて生成されるとき、i18n.lockファイルが作成されます。このファイルは、どのコンテンツが翻訳されたかを追跡し、後続の実行で不要な再翻訳を防ぎます。

例

example.vue（翻訳前）

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  }
}
</i18n>

example.vue（翻訳後）

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  },
  "es": {
    "welcome": "¡Hola, mundo!",
    "description": "Una aplicación de demostración simple",
    "button": {
      "submit": "Enviar",
      "cancel": "Cancelar"
    }
  }
}
</i18n>

i18n.json

{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {
      "include": ["./example.vue"]
    }
  },
  "$schema": "https://lingo.dev/schema/i18n.json"
}

i18n.lock

version: 1
checksums:
  7142a39dd2be0c1e12089c922ab4fdb5:
    welcome: 1308168cca4fa5d8d7a0cf24e55e93fc
    description: 36349ca88e416a6f2d6ac8742f0a963c
    button/submit: dabdff794b5804b8f22ecab13f37fb7d
    button/cancel: efdc4af6863f1e503a7f9961be721eed
    messages/0: f77d23a0a4b7f8fc7f8fd458921b90dd
    messages/1: e841c4139402ded42079401299e4fa1e
  0378a0d09447bf0944e842f7e54d3ec2:
    welcome: 0468579ef2fbc83c9d520c2f2f1c5059
    description: 49f8864eb0e53903f04532bf33e1e4fa
    button/submit: 7c91ef5f747eea9f77a9c4f23e19fb2e
    button/cancel: 2e2a849c2223911717de8caa2c71bade
    messages/0: 97a8db12c3955a85c4f50e3951c91a40
    messages/1: 986a434e3895c8ee0b267df95cc40051