"use i18n";

"use i18n" ディレクティブは、既存のコードをリファクタリングすることなく、Reactコンポーネントのファイルごとのローカライゼーションを可能にします。"use client"や"use server"と同様に、ファイルの先頭に追加するだけで、そのコンポーネント内のすべての翻訳可能なコンテンツを自動的にローカライズします。

このアプローチは、最小限のリスクと最大限の柔軟性で、大規模なコードベースに多言語サポートを段階的に追加するのに最適です。

仕組み

"use i18n"をReactファイルの先頭に追加すると、Lingo.dev Compilerは自動的に以下を実行します：

  1. ファイル全体をスキャンして翻訳可能なコンテンツを検出
  2. JSXテキストと翻訳可能な属性を抽出
  3. 設定されたAIモデルを使用して翻訳を生成
  4. ビルド時にローカライズされたバージョンを注入
  5. シームレスな開発のためにホットモジュールリプレースメントを維持

このディレクティブはファイルレベルで機能し、アプリの残りの部分は変更せずに、そのコンポーネントの境界内のすべてを処理します。

ディレクティブの有効化

"use i18n" ディレクティブを使用するには、コンパイラ設定で有効にしてください：

{
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  useDirective: true, // "use i18n" ディレクティブを有効化
  models: "lingo.dev", // オプション1: Lingo.devエンジン
  // models: {
  //   "*:*": "groq:mistral-saba-24b", // オプション2: GROQ
  // }
}

注意: useDirective が false（デフォルト設定）の場合、Lingo.dev Compiler はすべてのファイルを先頭に "use i18n" があるかのように処理します。useDirective: true に設定すると、ファイルごとにローカライズを細かく制御できます。

モデル設定: Lingo.devエンジンを簡略化された構文（models: "lingo.dev"）で使用するか、GROQモデルを特定のモデルマッピング（models: { "*:*": "groq:mistral-saba-24b" }）で使用できます。エンジンは各言語ペアに最適なモデルを自動的に選択します。

基本的な使用方法

任意のReactコンポーネントファイルの先頭にディレクティブを追加します：

"use i18n";

import React from "react";

export function WelcomeCard() {
  return (
    <div className="card">
      <h2>Welcome to our app!</h2>
      <p>
        Get started by exploring our features and discovering what makes our
        platform special.
      </p>
      <button>Get Started</button>
    </div>
  );
}

これだけです！コンポーネントはコードを変更することなく、ユーザーが選択した言語で自動的にレンダリングされるようになります。

既存のディレクティブと連携

「"use i18n"」ディレクティブは、すでに使用している他のReactディレクティブと自然に連携します：

"use client";
"use i18n";

export function InteractiveComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>クリックカウンター</h1>
      <p>{count}回クリックしました</p>
      <button onClick={() => setCount(count + 1)}>クリックしてください！</button>
    </div>
  );
}

"use server";
"use i18n";

export async function ServerComponent() {
  const data = await fetchData();

  return (
    <div>
      <h1>サーバーレンダリングコンテンツ</h1>
      <p>このコンテンツはサーバー上でレンダリングされ、ビルド時にローカライズされます</p>
    </div>
  );
}

コンパイラはすべてのディレクティブを一緒に処理し、コンポーネントの意図された動作を維持しながらローカライゼーション機能を追加します。

開発ワークフロー

1. 段階的な移行

個々のコンポーネントにディレクティブを追加することから始めます：

// 変更前：英語のみのコンポーネント
export function Header() {
  return <h1>My Application</h1>;
}

// 変更後：1行追加で多言語対応コンポーネント
("use i18n");

export function Header() {
  return <h1>My Application</h1>;
}

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

このディレクティブはHMRとシームレスに連携します。"use i18n"を使用したコンポーネント内のテキストを変更すると、翻訳がブラウザ上で即座に更新されます：

"use i18n";

export function StatusMessage() {
  return (
    <div>
      {/* このテキストを変更すると、すべての言語で即座に更新されます */}
      <p>変更が正常に保存されました！</p>
    </div>
  );
}

3. ファイルごとのアプローチ

段階的にローカライズしたい大規模なコードベースに最適です：

src/
├── components/
│   ├── Header.tsx          // ✅ "use i18n" - ローカライズ済み
│   ├── Navigation.tsx      // ✅ "use i18n" - ローカライズ済み
│   ├── ProductCard.tsx     // ✅ "use i18n" - ローカライズ済み
│   ├── Footer.tsx          // ⏳ まだローカライズされていません
│   └── Sidebar.tsx         // ⏳ まだローカライズされていません

メリット

"use i18n" ディレクティブにより、Reactコンポーネントに1行追加するだけでローカリゼーションが簡単になります。これは段階的なローカリゼーションを必要とする成熟したプロジェクト向けに設計されています。

次のステップ