VuePress - Lingo.dev CLI

VuePressとは？

VuePressはVueを活用した静的サイトジェネレーターで、ドキュメンテーションサイトの作成に特化しています。技術文書に最適化されたテーマとVueコンポーネントの統合機能を提供します。

Lingo.dev CLIとは？

Lingo.devはAI駆動の翻訳プラットフォームです。Lingo.dev CLIはソースファイルを読み込み、翻訳可能なコンテンツを大規模言語モデルに送信し、翻訳されたファイルをプロジェクトに書き戻します。

このガイドについて

このガイドではVuePressドキュメンテーションサイトでLingo.dev CLIをセットアップする方法を説明します。VuePressでプロジェクトを構築し、翻訳パイプラインを設定し、結果を確認する方法を学びます。

ステップ1. VuePressプロジェクトのセットアップ

新しいVuePressプロジェクトを作成します：
```
npm create vuepress@latest my-docs
```
プロジェクトディレクトリに移動します：
```
cd my-docs
```
依存関係をインストールします：
```
npm install
```

ステップ2. ソースコンテンツの作成

ソースロケールのドキュメントを保存するディレクトリを作成します：
```
mkdir docs/en
```

ドキュメントコンテンツを含むファイルを作成します（例：docs/en/README.md）：

---
home: true
title: Home
heroText: VuePress Documentation
tagline: Documentation powered by VuePress
---

## はじめに

このドキュメントはLingo.devによって自動翻訳されています。

## 機能

当社の製品には、最新の開発のための強力な機能が含まれています。

ステップ3. シンボリックリンクの設定

VuePressはソースロケールのコンテンツをルートのdocsディレクトリに、ターゲットロケールのコンテンツをサブディレクトリに配置することを想定していますが、Lingo.dev CLIはこの組み合わせをサポートしていません。

回避策として、以下を推奨します：

ソースコンテンツファイルをロケールディレクトリ（例：docs/en/）に保存する
シンボリックリンクを生成して、ファイルがルートのdocsディレクトリにも表示されるようにする

このプロセスを効率化するために：

シンボリックリンクを生成するスクリプトを作成します（例：scripts/symlinks.sh）：
```
for file in docs/en/*; do ln -sf "en/$(basename "$file")" "docs/$(basename "$file")"; done
```
スクリプトを実行可能にします：
```
chmod +x scripts/symlinks.sh
```
スクリプトを実行します：
```
./scripts/symlinks.sh
```

docs/en/ディレクトリにファイルを追加するたびに、このスクリプトを再実行する必要があります。

ステップ 4. CLIを設定する

プロジェクトのルートにi18n.jsonファイルを作成します：

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

このファイルは以下を定義します：

Lingo.dev CLIが翻訳すべきファイル
翻訳する言語の組み合わせ

この場合、設定は英語からスペイン語へのマークダウンファイルの翻訳を指定しています。

重要な点として：

[locale]は実行時に置き換えられるプレースホルダーです。これにより、コンテンツが一つの場所（例：docs/en/README.md）から読み込まれ、別の場所（例：docs/es/README.md）に書き込まれることを保証します。
Lingo.dev CLIは再帰的なグロブパターン（例：**/*.md）をサポートしていません。ネストされたディレクトリ内のファイルを翻訳するには、追加のincludeパターンを作成する必要があります。

詳細については、i18n.json設定を参照してください。

ステップ 5. コンテンツを翻訳する

Lingo.devアカウントにサインアップします。
CLIを通じてLingo.devにログインします：
```
npx lingo.dev@latest login
```
翻訳パイプラインを実行します：
```
npx lingo.dev@latest run
```
CLIは翻訳されたコンテンツを保存するためのdocs/es/ディレクトリと、翻訳済みの内容を追跡するためのi18n.lockファイル（不要な再翻訳を防ぐため）を作成します。

ステップ 6. 翻訳を使用する

docs/.vuepress/config.jsファイルで：

テーマ設定にlocalesプロパティを追加します：

theme: defaultTheme({
  locales: {
    "/": {
      selectLanguageName: "English",
    },
    "/es/": {
      selectLanguageName: "Español",
    },
  },
}),

各ロケールの言語設定を定義するために、ルートレベルのlocalesプロパティを追加します：

{
  locales: {
    "/": {
      lang: "en",
      title: "VuePress",
    },
    "/es/": {
      lang: "es",
      title: "VuePress",
    },
  },
}

開発サーバーを起動します：
```
npm run docs:dev
```
http://localhost:8080 にアクセスします。言語を切り替えるためのドロップダウンが表示されるはずです。