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"）

    再帰的なglobパターン（例：**/*.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