MDX - Lingo.dev CLI

MDXとは何か？

MDXはMarkdownとJSXを組み合わせたフォーマットで、Markdownコンテンツ内で直接Reactコンポーネントを使用することができます。ドキュメンテーションサイトやコンテンツが豊富なウェブアプリケーションでよく使用されています。

例えば：


---

title: "レストランレビュー：ベラ・ビスタ"
description: "ダウンタウンの新しいイタリアンレストランでの食事体験"
author: "not-localized-author"

---

# ベラ・ビスタでの夕食

先月メインストリートにオープンした新しいイタリアンレストランをついに試してみました。

## 雰囲気

このレストランは温かく招き入れるような雰囲気があります：

- **薄暗い照明**が親密な空間を作り出しています
- *ソフトジャズミュージック*がバックグラウンドで流れています

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"）
再帰的なグロブパターン（例：**/*.mdx）はサポートされていません。

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

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

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

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

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

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

npx lingo.dev@latest run

このコマンドは以下を実行します：

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

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

例

en/example.mdx


---

title: "レストランレビュー：ベラ・ビスタ"
description: "ダウンタウンの新しいイタリアンレストランでの食事体験"
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"

---

# ベラ・ビスタでの夕食

先月メインストリートにオープンした新しいイタリアンレストランをついに試してみました。こちらが私たちの正直なレビューです。

## 雰囲気

レストランは温かく招き入れるような雰囲気で以下の特徴があります：

- **照明を落とした** 親密な空間を作り出す環境
- *柔らかいジャズミュージック* がバックグラウンドで流れている
- 各テーブルに生花が飾られている

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