TypeScript

Lingo.dev CLIによるTypeScriptローカリゼーションファイルのAI翻訳

TypeScriptのローカライゼーションとは?

TypeScriptローカライゼーションファイルは、TypeScript/JavaScriptオブジェクト構文を使用して翻訳文字列を保存します。これらは、型安全な国際化のために現代のWebアプリケーションで一般的に使用されています。

例えば:

const messages = {
  navigation: {
    home: "ホーム",
    about: "会社概要",
    contact: "お問い合わせ"
  },

  forms: {
    title: "お問い合わせフォーム",
    nameLabel: "お名前",
    submitButton: "メッセージを送信"
  },
};

export default messages;

Lingo.dev CLIとは?

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

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

このガイドについて

このガイドでは、Lingo.dev CLIを使用してTypeScriptローカライゼーションファイルを翻訳する方法を説明します。

以下の方法を学びます:

  • ゼロからプロジェクトを作成する
  • 翻訳パイプラインを設定する
  • 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. ソースコンテンツの作成

まだ作成していない場合は、翻訳するコンテンツを含む1つ以上のTypeScriptローカリゼーションファイルを作成します。これらのファイルは、パスのどこかにソースロケールを含む場所に配置する必要があります(例:ディレクトリ名としてen/や、ファイル名の一部としてmessages.en.tsなど)。

ステップ 5. バケットの作成

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

    {
      "$schema": "https://lingo.dev/schema/i18n.json",
      "version": "1.10",
      "locale": {
        "source": "en",
        "targets": ["es"]
      },
      "buckets": {
        "typescript": {}
      }
    }
    
  2. "typescript"オブジェクト内で、1つ以上のincludeパターンの配列を定義します:

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

    これらのパターンは、翻訳するファイルを定義します。

    パターン自体は:

    • 設定されたロケールのプレースホルダーとして[locale]を含む必要があります
    • ファイルパスを指定できます(例:"[locale]/messages.ts"
    • ワイルドカードプレースホルダーとしてアスタリスクを使用できます(例:"[locale]/*.ts"

    再帰的なグロブパターン(例:**/*.ts)はサポートされていません。

ステップ 6. LLMの設定

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

可能な限り早く始めるには、毎月10,000トークンの無料使用量を提供する当社独自のホスト型プラットフォームLingo.dev Engineの使用をお勧めします:

  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ファイルが作成されます。このファイルは、どのコンテンツが翻訳されたかを追跡し、後続の実行で不要な再翻訳を防ぎます。

en/example.ts

const messages = {
  navigation: {
    home: "Home",
    about: "About Us",
    contact: "Contact Us",
    services: "Our Services"
  },

  forms: {
    title: "Contact Form",
    nameLabel: "Your Name",
    emailLabel: "Email Address",
    messageLabel: "Your Message",
    submitButton: "Send Message",
    successMessage: "Thank you for your message!",
    locked_key_1: "This value is locked and should not be changed",
    ignored_key_1: "This value is ignored and should not be processed"
  },
};

export default messages;

es/example.ts

const messages = {
  navigation: {
    home: "Inicio",
    about: "Sobre Nosotros",
    contact: "Contáctanos",
    services: "Nuestros Servicios"
  },

  forms: {
    title: "Formulario de Contacto",
    nameLabel: "Tu Nombre",
    emailLabel: "Dirección de Correo Electrónico",
    messageLabel: "Tu Mensaje",
    submitButton: "Enviar Mensaje",
    successMessage: "¡Gracias por tu mensaje!",
    locked_key_1: "This value is locked and should not be changed",
  },
};

export default messages;

i18n.json

{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "typescript": {
      "include": ["./[locale]/example.ts"],
      "lockedKeys": ["locked_key_1"],
      "ignoredKeys": ["ignored_key_1"]
    }
  },
  "$schema": "https://lingo.dev/schema/i18n.json"
}

i18n.lock

version: 1
checksums:
  0cdc4f3ba34edc7f3ba4d996158306ad:
    navigation/home: 104a3db3b671c04e167eafbe21e57881
    navigation/about: 8f89131a66d4659be07cd5af2c7ea898
    navigation/contact: 2a75337dc9603915c4ec1d1905afb7b9
    navigation/services: 999f32026e64978cb3ec794a496b0bb8
    forms/title: ac85dea7c7f0bf1cd7d48cc1b4da3acc
    forms/nameLabel: 03c6ae7996d5841f743cd406b4eff72d
    forms/emailLabel: 0ee22bbbe989a0c61a18023407d12dc2
    forms/messageLabel: 1e460d0909502d0e94b9be562643af0d
    forms/submitButton: 487177489aafc9c0243c57ef3850a2d9
    forms/successMessage: a0a7aa980dffa31d4d194af718a917b3
    forms/locked_key_1: 73fc105de1aefc3f0a97d187a80cf0a4
    forms/ignored_key_1: d88a7aa6c5661ca901ee0f4cb51e3a0d