MDX - Lingo.dev CLI

MDXとは？

MDXは、MarkdownとJSXを組み合わせた形式で、Markdownコンテンツ内でReactコンポーネントを直接使用できます。ドキュメントサイトやコンテンツリッチなWebアプリケーションで一般的に使用されています。

例：

---
title: "Restaurant Review: Bella Vista"
description: "Our dining experience at the new Italian restaurant downtown"
author: "not-localized-author"
---

# Dinner at Bella Vista

We finally tried the new Italian restaurant that opened last month on Main Street.

## The Atmosphere

The restaurant has a warm, inviting atmosphere with:

- **Dim lighting** that creates an intimate setting
- *Soft jazz music* playing in the background

Lingo.dev CLIとは？

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

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

このガイドについて

このガイドでは、Lingo.dev CLIを使用してMDXファイルを翻訳する方法を説明します。

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

プロジェクトをゼロから作成する
翻訳パイプラインを設定する
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つ以上のMDXファイルを作成します。これらのファイルは、パスのどこかにソースロケールを含むパスに配置する必要があります(例: en/のようなディレクトリ名、またはmessages.en.mdxのようなファイル名の一部として)。

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

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

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

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

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

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

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

できるだけ早く使い始めるために、Lingo.dev Engineの使用をお勧めします。これは、毎月10,000トークンの無料利用を提供する当社独自のホスト型プラットフォームです:

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

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

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

npx lingo.dev@latest run

このコマンドは：

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

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

例

en/example.mdx

---
title: "Restaurant Review: Bella Vista"
description: "Our dining experience at the new Italian restaurant downtown"
author: "not-localized-author"
published: "2024-03-15"
rating: 4.5
locked_key_1: "This value should remain unchanged in all locales"
ignored_key_1: "This field should not appear in target locales"
---

# Dinner at Bella Vista

We finally tried the new Italian restaurant that opened last month on Main Street. Here's our honest review.

## The Atmosphere

The restaurant has a warm, inviting atmosphere with:

- **Dim lighting** that creates an intimate setting
- *Soft jazz music* playing in the background
- Fresh flowers on every table

es/example.mdx

---
title: "Reseña de Restaurante: Bella Vista"
description: "Nuestra experiencia gastronómica en el nuevo restaurante italiano del centro"
author: "not-localized-author"
published: "2024-03-15"
rating: 4.5
locked_key_1: "This value should remain unchanged in all locales"
---

# Cena en Bella Vista

Finalmente probamos el nuevo restaurante italiano que abrió el mes pasado en Main Street. Esta es nuestra reseña honesta.

## El Ambiente

El restaurante tiene un ambiente cálido y acogedor con:

- **Iluminación tenue** que crea un ambiente íntimo
- *Música de jazz suave* sonando de fondo
- Flores frescas en cada mesa

i18n.json

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

i18n.lock

version: 1
checksums:
  0d5b5aa6d2b9937d47fd63868ef9e9f6:
    meta/title: a4bdd0dee24f8318f3300dcae130a353
    meta/description: 609213841f122e494f62262618ee4761
    meta/author: f3f7164b5963b4da6cd31a2ec0251630
    content/0: 8a8520492d23503da5691602e60bd22a
    content/1: 1fc859854cda505b2a94a04c8b09ab43
    content/2: 8add667f2a1d5d791a64b50bde54fa59
    content/3: e6e34c4c92eda512ec209266abe8e074
    content/4: 07f1896ad050b9606d7674f70d847818
    content/5: bd4d40a4f0cc92ac8a880c8d9ce8b43d
    content/6: 3036a07a887121ea080427d84fc80912
    content/7: f555318416c5c5388c1d961ef02f5955
    content/8: 90e02688ab103de60e42c70ece7efc4d
    content/9: 8c5be3cd002a3a194c991821e0182e08
    content/10: 3495801a7461ac5ea8d78369873a5409
    content/11: d444739ce3d48afb7976067c67149a9e
    content/12: 5f02c0a3b6385f80bdd08cf7e2d8c04d
    content/13: 0a15fd446b87d907f58c303aece0882b
    content/14: 778ed0aa1f81768280a23afe559c55f7
    content/15: fa244af2d8e558d6c3644ff8c1a64562
    content/16: 14f593e7cf3b3df84a21e17db318912e
    content/17: 5f42d26a42aa29be063019eea27ad07c
    content/18: 48bb7e89e72d68d6de12f5cdac64fc18
    content/19: 1639b9ef57bf363e04293e27d1c13952
    content/20: bb1c8d22064f7af4879c69d444e6e769
    content/21: 52f9d6beaa85591f77811e1162d756c4