---
title: "Vite 統合"
---

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

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

## 前提条件

- **Vite 4+**
- **React 18+**
- Node.js 18 以上

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

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

```bash
npm install lingo.dev
```

## ステップ 2. Vite の設定

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

```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エンジン**を使用できます。動的モデル選択、自動ルーティング、翻訳メモリ、用語集サポートを提供します。無料版と有料版があります。

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

```bash
npx lingo.dev@latest login
```

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

```bash

# .env

LINGODOTDEV_API_KEY=...
```

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

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

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

- [GROQ](https://groq.com/)
- [Google AI](https://aistudio.google.com/)
- [OpenRouter](https://openrouter.ai/)
- [Ollama](https://ollama.com/)
- [Mistral](http://mistral.ai)

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

```bash

# .env

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

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

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

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

```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に言語切り替えコンポーネントを作成します：

```tsx
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. ビルドとテスト

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

```bash
npm run dev
```

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

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

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

## 設定オプション

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

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

## 開発機能

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

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

```tsx
// 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. **アプリケーションをビルドする**：

   ```bash
   npm run build
   ```

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

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

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

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

## トラブルシューティング

### 一般的な問題

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

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

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

## 次のステップ

- **高度な設定**: [カスタマイズオプション](/compiler/configuration/advanced)
- **よくある質問**: [一般的な質問とトラブルシューティング](/compiler/guides/faq)
- **仕組み**: [ビルドプロセスの理解](/compiler/how-it-works)
