Handlebars - Lingo.dev CLI

Handlebarsとは?

Handlebarsは、セマンティックなテンプレートを効果的に構築するために必要な機能を提供する人気のテンプレートエンジンです。クリーンな構文を使用し、テンプレートをJavaScript関数にコンパイルするため、クライアントサイドとサーバーサイドの両方のアプリケーションでHTMLを生成する際に広く使用されています。

Lingo.dev CLIとは?

Lingo.dev CLIは、AIを使用してアプリやコンテンツを翻訳するための無料のオープンソースCLIです。従来の翻訳管理ソフトウェアを置き換えながら、既存のパイプラインと統合できるように設計されています。

詳細については、概要を参照してください。

このガイドについて

このガイドでは、Lingo.dev CLIを使用してHandlebarsテンプレートをローカライズする方法を説明します。

以下の内容を学習します:

Handlebarsプロジェクト用の翻訳ファイルの構造化
翻訳パイプラインの設定
AIによる翻訳の生成

前提条件

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

❯ node -v
v22.17.0

Handlebarsローカライゼーションのアプローチ

Handlebarsテンプレートは、ハードコードされたテキストを含めるのではなく、JSONファイルから翻訳可能なコンテンツを参照する必要があります。このアプローチには以下の利点があります:

明確な分離: テンプレート構造と翻訳可能なコンテンツの分離
バージョン管理: JSONファイルで翻訳を追跡
曖昧さの排除: 翻訳可能な内容を明示的に定義

テンプレートで翻訳にアクセスするには、翻訳ヘルパー関数が必要です。一般的なオプションには以下があります:

シンプルなカスタムヘルパー:

{{t "product.title"}}
{{t "greeting" name="John"}}

handlebars-i18n - フォーマット機能を備えた多機能版:

{{__ "product.title"}}
{{_date releaseDate}}
{{_price amount "USD"}}

npm | GitHub

handlebars-i18next - i18nextの代替統合:

{{t "product.title"}}

npm | GitHub

このガイドでは例として{{t}}を使用していますが、ワークフローはどのヘルパーを選択しても適用できます。

ステップ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. ソースコンテンツを作成する

翻訳可能なコンテンツを含むJSONファイルを作成します。これらのファイルは、ソースロケールコードを含むディレクトリ構造で整理する必要があります：

project/
├── locales/
│   └── en/
│       ├── common.json
│       └── store.json
├── templates/
│   └── product.handlebars
└── i18n.json

es/ディレクトリと翻訳されたファイルは、ステップ8で翻訳を生成する際にLingo.dev CLIによって自動的に作成されます。

JSONファイルの例

locales/en/common.json:

{
  "navigation": {
    "home": "Home",
    "products": "Products",
    "about": "About",
    "contact": "Contact"
  },
  "footer": {
    "copyright": "All rights reserved",
    "privacy": "Privacy Policy",
    "terms": "Terms of Service"
  }
}

locales/en/store.json:

{
  "product": {
    "title": "Wireless Headphones",
    "description": "Premium sound quality with active noise cancellation",
    "price": "Price",
    "inStock": "In Stock",
    "outOfStock": "Out of Stock"
  },
  "cart": {
    "add": "Add to Cart"
  },
  "actions": {
    "buyNow": "Buy Now"
  }
}

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

i18n.jsonファイルで、bucketsオブジェクトに"json"オブジェクトを追加します：

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

"json"オブジェクトで、1つ以上のincludeパターンの配列を定義します：
```
{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "json": {
      "include": ["./locales/[locale]/*.json"]
    }
  }
}
```
これらのパターンは、翻訳するファイルを定義します。

パターン自体は：
- 設定されたロケールのプレースホルダーとして[locale]を含む必要があります
- ファイルパスを指定できます（例："locales/[locale]/common.json"）
- ワイルドカードプレースホルダーとしてアスタリスクを使用できます（例："locales/[locale]/*.json"）
再帰的なglobパターン（例：**/*.json）はサポートされていません。

ステップ6. テンプレートで翻訳を使用する

選択したヘルパーを使用して、Handlebarsテンプレートで翻訳キーを参照します：

templates/product.handlebars:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>{{t "product.title"}}</title>
</head>
<body>
  <nav>
    <a href="/">{{t "navigation.home"}}</a>
    <a href="/products">{{t "navigation.products"}}</a>
    <a href="/about">{{t "navigation.about"}}</a>
    <a href="/contact">{{t "navigation.contact"}}</a>
  </nav>

  <main>
    <article>
      <h1>{{t "product.title"}}</h1>
      <p>{{t "product.description"}}</p>

      <div class="price">
        <span>{{t "product.price"}}:</span>
        <span>$299.99</span>
      </div>

      <div class="stock">
        {{#if inStock}}
          <span class="available">{{t "product.inStock"}}</span>
        {{else}}
          <span class="unavailable">{{t "product.outOfStock"}}</span>
        {{/if}}
      </div>

      <div class="actions">
        <button class="primary">{{t "cart.add"}}</button>
        <button class="secondary">{{t "actions.buyNow"}}</button>
      </div>
    </article>
  </main>

  <footer>
    <p>{{t "footer.copyright"}}</p>
    <a href="/privacy">{{t "footer.privacy"}}</a>
    <a href="/terms">{{t "footer.terms"}}</a>
  </footer>
</body>
</html>

これらの翻訳を読み込み、テンプレートをコンパイルする方法は、ビルド設定と選択したヘルパーライブラリによって異なります。

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

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

できるだけ早く開始するには、Lingo.dev Engineの使用をお勧めします：

Lingo.devアカウントにサインアップします。
次のコマンドを実行します：
```
npx lingo.dev@latest login
```
これにより、デフォルトのブラウザが開き、認証を求められます。
プロンプトに従います。

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

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

npx lingo.dev@latest run

このコマンドは：

i18n.jsonファイルを読み込みます。
翻訳が必要なJSONファイルを検索します。
ファイルから翻訳可能なコンテンツを抽出します。
設定されたLLMを使用して、抽出されたコンテンツを翻訳します。
翻訳されたコンテンツをファイルシステムに書き戻します。

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

例

プロジェクト構造

handlebars-localization/
├── locales/
│   ├── en/
│   │   ├── common.json
│   │   └── store.json
│   └── es/
│       ├── common.json
│       └── store.json
├── templates/
│   └── product.handlebars
└── i18n.json

locales/en/common.json

{
  "navigation": {
    "home": "Home",
    "products": "Products",
    "about": "About",
    "contact": "Contact"
  },
  "footer": {
    "copyright": "All rights reserved",
    "privacy": "Privacy Policy",
    "terms": "Terms of Service"
  }
}

locales/en/store.json

{
  "product": {
    "title": "Wireless Headphones",
    "description": "Premium sound quality with active noise cancellation",
    "price": "Price",
    "inStock": "In Stock",
    "outOfStock": "Out of Stock"
  },
  "cart": {
    "add": "Add to Cart"
  },
  "actions": {
    "buyNow": "Buy Now"
  }
}

locales/es/common.json

{
  "navigation": {
    "home": "Inicio",
    "products": "Productos",
    "about": "Acerca de",
    "contact": "Contacto"
  },
  "footer": {
    "copyright": "Todos los derechos reservados",
    "privacy": "Política de privacidad",
    "terms": "Términos de servicio"
  }
}

locales/es/store.json

{
  "product": {
    "title": "Auriculares inalámbricos",
    "description": "Calidad de sonido premium con cancelación activa de ruido",
    "price": "Precio",
    "inStock": "En stock",
    "outOfStock": "Agotado"
  },
  "cart": {
    "add": "Añadir al carrito"
  },
  "actions": {
    "buyNow": "Comprar ahora"
  }
}

templates/product.handlebars

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>{{t "product.title"}}</title>
</head>
<body>
  <nav>
    <a href="/">{{t "navigation.home"}}</a>
    <a href="/products">{{t "navigation.products"}}</a>
    <a href="/about">{{t "navigation.about"}}</a>
    <a href="/contact">{{t "navigation.contact"}}</a>
  </nav>

  <main>
    <article>
      <h1>{{t "product.title"}}</h1>
      <p>{{t "product.description"}}</p>

      <div class="price">
        <span>{{t "product.price"}}:</span>
        <span>$299.99</span>
      </div>

      <div class="stock">
        {{#if inStock}}
          <span class="available">{{t "product.inStock"}}</span>
        {{else}}
          <span class="unavailable">{{t "product.outOfStock"}}</span>
        {{/if}}
      </div>

      <div class="actions">
        <button class="primary">{{t "cart.add"}}</button>
        <button class="secondary">{{t "actions.buyNow"}}</button>
      </div>
    </article>
  </main>

  <footer>
    <p>{{t "footer.copyright"}}</p>
    <a href="/privacy">{{t "footer.privacy"}}</a>
    <a href="/terms">{{t "footer.terms"}}</a>
  </footer>
</body>
</html>

i18n.json

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

i18n.lock

version: 1
checksums:
  8a4f2c9e1d6b3a7f5e8c2d1b9a3f6e4c:
    navigation.home: 7b2e4f9a1c8d3b6f5e2a9d1c8b4f7e3a
    navigation.products: 3f8e2a9d1c6b4f7e5a2c9d1b8f4e7a3b
    navigation.about: 9d1c8b4f7e3a2f9e1d6b3a7f5e8c2d1b
    navigation.contact: 4f7e3a2c9d1b8f6e5a3f2d9c1b7e4a8f
    footer.copyright: 2c9d1b8f4e7a3b6f5e2a9d1c8b4f7e3a
    footer.privacy: 8b4f7e3a2c9d1b6f5e2a9d1c8f4e7a3b
    footer.terms: 6f5e2a9d1c8b4f7e3a2c9d1b8f4e7a3b
  3b6f5e2a9d1c8b4f7e3a2c9d1b8f4e7a:
    product.title: 1c8b4f7e3a2c9d1b6f5e2a9d1c8f4e7a
    product.description: 7e3a2c9d1b6f5e2a9d1c8b4f7e3a2c9d
    product.price: 9d1b6f5e2a9d1c8b4f7e3a2c9d1b8f4e
    product.inStock: 4f7e3a2c9d1b6f5e2a9d1c8b4f7e3a2c
    product.outOfStock: 2c9d1b6f5e2a9d1c8b4f7e3a2c9d1b8f
    cart.add: 8b4f7e3a2c9d1b6f5e2a9d1c8b4f7e3a
    actions.buyNow: 7e3a2c9d1b6f5e2a9d1c8b4f7e3a2c9d