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. 認証の設定

groq.com で無料アカウントを作成し、API キーを追加します：


# .env

GROQ_API_KEY=gsk_...

ステップ 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 またはヘッダーに言語切り替えコンポーネントを作成します：

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

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

翻訳可能なコンテンツについて React コンポーネントをスキャン
翻訳キーの抽出
AI を活用した翻訳の生成
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

本番環境へのデプロイ

アプリケーションをビルドする：
```
npm run build
```

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

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

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

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

トラブルシューティング

一般的な問題

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

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

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