Vite 統合

Lingo.dev コンパイラーは Vite と直接統合し、React アプリケーションのビルド時ローカリゼーションを提供します。

以下の手順に従って、Vite + React アプリケーションに多言語サポートを追加してください。

前提条件

  • Vite 4+
  • React 18+
  • Node.js 18 以上

ステップ 1. パッケージのインストール

lingo.dev パッケージをインストールします：

npm install lingo.dev

ステップ 2. Vite の設定

コンパイラーを vite.config.ts にインポートして設定します：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  plugins: [react()],
  // 既存の Vite 設定
};

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
  })(viteConfig),
);

ステップ 3. 認証の設定

Lingo.dev CompilerはコンテンツをAI翻訳エンジンにローカライゼーション用に送信するため、最初に認証が必要です。

オプション1. Lingo.devエンジン

Lingo.dev CompilerはAI翻訳エンジンとしてLingo.devエンジンを使用できます。動的モデル選択、自動ルーティング、翻訳メモリ、用語集サポートを提供します。無料版と有料版があります。

認証するには、次のコマンドを実行します：

npx lingo.dev@latest login

ブラウザフローに問題がある場合は、.envファイルにLINGODOTDEV_API_KEYを手動で追加できます：


# .env

LINGODOTDEV_API_KEY=...

トークンはLingo.devエンジンのプロジェクト設定で確認できます。

オプション2. 代替LLMプロバイダー

または、サポートされているLLMプロバイダーからモデルを使用することもできます：

APIキーを.envファイルに追加してください：


# .env

GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...
MISTRAL_API_KEY=...

注意： Compilerで使用する前に、LLMプロバイダーでアカウントを有効化し、利用規約に同意していることを確認してください。

ステップ4. プロバイダーの追加

メインエントリーファイル（src/main.tsx）にプロバイダーをインポートします：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { LingoProviderWrapper, loadDictionary } from "lingo.dev/react/client";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <LingoProviderWrapper loadDictionary={(locale) => loadDictionary(locale)}>
      <App />
    </LingoProviderWrapper>
  </React.StrictMode>,
);

ステップ5. オプション：ロケールスイッチャーの追加

AppまたはHeaderに言語切り替えコンポーネントを作成します：

import { LocaleSwitcher } from "lingo.dev/react/client";

function App() {
  return (
    <div className="App">
      <header>
        <LocaleSwitcher locales={["en", "es", "fr", "de"]} />
      </header>
      <main>
        <h1>Welcome to our app</h1>
        <p>This content is automatically translated</p>
      </main>
    </div>
  );
}

export default App;

ステップ6. ビルドとテスト

開発サーバーを起動します：

npm run dev

コンパイラーは自動的に以下を実行します：

  1. React コンポーネントから翻訳可能なコンテンツをスキャン
  2. 翻訳キーを抽出
  3. AI駆動の翻訳を生成
  4. lingo/ ディレクトリに最適化された翻訳ファイルを作成

http://localhost:5173 にアクセスして、多言語アプリケーションの動作を確認してください。

設定オプション

コンパイラーの動作をカスタマイズできます：

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    sourceLocale: "en",
    targetLocales: ["es", "fr", "de", "ja"],
    lingoDir: "lingo",
    debug: false,
  })(viteConfig),
);

開発機能

ホットモジュールリプレイスメント

コンパイラーはViteのHMRを翻訳更新に対応しています：

// src/components/Welcome.tsx
export function Welcome() {
  return (
    <div>
      <h1>Welcome to our app</h1>
      <p>Edit this text and see translations update automatically</p>
    </div>
  );
}

ビルド最適化

Viteのビルド最適化はコンパイラーとシームレスに連携します：

  • コード分割は翻訳バンドルを含みます
  • アセット最適化は翻訳ファイルを効率的に処理します
  • ツリーシェイキングは未使用の翻訳を削除します

プロジェクト構造例

my-vite-app/
├── src/
│   ├── components/
│   │   └── Welcome.tsx
│   ├── App.tsx
│   ├── main.tsx
│   └── lingo/           # 生成された翻訳ファイル
│       ├── meta.json
│       └── dictionary.js
├── vite.config.ts
├── package.json
└── .env

本番環境へのデプロイ

  1. アプリケーションをビルドする：

    npm run build

  2. 翻訳ファイルをコミットする：

    git add src/lingo/
git commit -m "Add translations"

  3. お好みのプラットフォーム（Vercel、Netlifyなど）を使用してデプロイする

Viteアプリはユーザー設定に基づいて自動的にローカライズされたコンテンツを提供します。

トラブルシューティング

一般的な問題

翻訳が生成されない：.envファイルにGROQ_API_KEYが正しく設定されていることを確認してください。

ビルドエラー：lingo/ディレクトリがバージョン管理に含まれていることを確認してください。

HMRが機能しない：新しい翻訳可能なコンテンツを追加した後、開発サーバーを再起動してください。

次のステップ