よくある質問 - Lingo.dev Compiler

Lingo.dev Compilerに関するよくある質問と回答。

文字列リテラルを翻訳できますか？

Lingo.dev Compilerは、JSX内のすべてがローカライズ可能であるという規則に従っています。JSXコンポーネント外の文字列リテラルは設計上ローカライズされません。

現在の動作：

// これは翻訳されません
const message = "Hello world";
const errorText = "Something went wrong";

// これは翻訳されます
function Component() {
  return <h1>Hello world</h1>;
}

リテラルをローカライズ可能にする方法：

JSXフラグメントでラップすることで、文字列リテラルをローカライズ可能にできます：

// 変更前：ローカライズ不可
const message = "Hello world";

// 変更後：フラグメントを使用してローカライズ可能
const message = <>Hello world</>;

// コンポーネントでの使用例
function Component() {
  return <div>{message}</div>;
}

代替アプローチ：

// 動的メッセージの場合
function getLocalizedMessage() {
  return <>Something went wrong</>;
}

// 条件付きテキストの場合
const statusText = isError ? <>Error occurred</> : <>Success</>;

この規則により、ローカライズ可能なコンテンツとローカライズ不可能なコンテンツの間に明確な境界を維持しながら、一貫したローカライズ動作を確保します。

将来的にはより多くのユースケースをサポートするための方法を検討しています。サポートしてほしい特定のパターンについて議論するには、Discordに参加してください。

コレクションベースのコンポーネントが翻訳されないのはなぜですか？

現在、コンパイラには、子要素としてコレクションを期待するAdobe React-Aria/React-Statelyベースのコンポーネントに制限があります。コレクションアイテム内の直接のテキストコンテンツは自動的にローカライズされません。

これは、HeroUI、NextUIなどのライブラリや他のReact-Aria実装からのSelect、Listbox、Menuなどのコレクションベースのコンポーネントに影響します。

現在の動作：

import { Select, SelectItem } from "@heroui/react";

export default function SelectExample() {
  return (
    <Select label="Select an animal">
      {/* このテキストは翻訳されません */}
      <SelectItem key="cat" textValue="Cat">
        Cat
      </SelectItem>
      <SelectItem key="dog" textValue="Dog">
        Dog
      </SelectItem>
    </Select>
  );
}

回避策：

テキストコンテンツをJSXフラグメントでラップしてローカライズ可能にします：

import { Select, SelectItem } from "@heroui/react";

export default function SelectWithWorkaround() {
  return (
    <Select label="Select an animal">
      {/* このテキストは翻訳されます */}
      <SelectItem key="cat" textValue="Cat">
        <>Cat</>
      </SelectItem>
      <SelectItem key="dog" textValue="Dog">
        <>Dog</>
      </SelectItem>
    </Select>
  );
}

この制限は、テキストコンテンツがコレクションアイテムに直接子要素として渡されるReact-Ariaのコレクションパターンを使用するあらゆるコンポーネントに影響します。これらのケースに対するコンパイラのサポート向上に取り組んでいます。

どのフレームワークがサポートされていますか？

Lingo.dev Compilerは現在、以下のReactフレームワークをサポートしています：

Next.js（App Routerのみ）
React Router v6+
Remix（最新バージョン）
Vite + React

他のプラットフォーム向けのコンパイラサポートの実装に興味のある貢献者を歓迎します。実装戦略について議論するにはDiscordに参加してください。

言語を追加できますか？

はい！コンパイラ設定でカスタムモデルを直接設定することで、言語サポートを拡張できます：

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de", "pt", "it"],
  models: {
    "*:pt": "qwen/qwen3-32b",
    "en:it": "meta-llama/llama-4-maverick-17b-128e-instruct",
    "*:*": "qwen/qwen3-32b",
  },
};

lingoCompiler.next(compilerConfig)(nextConfig);

詳細については高度な設定をご覧ください。

カスタムプロンプトを使用できますか？

はい！コンパイラ設定で翻訳プロンプトをカスタマイズできます：

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  prompt:
    "You are a professional translator specializing in technical documentation. Translate from {SOURCE_LOCALE} to {TARGET_LOCALE} while maintaining technical accuracy.",
};

カスタム用語集については、プロンプトに用語定義を含めてください。ベストプラクティスについてはデフォルトプロンプトを参照してください。

より多くのLLMプロバイダーを使用できますか？

現在、Lingo.dev CompilerはLingo.dev Engineおよび複数の他のLLMプロバイダーと統合されています。

近い将来、より多くのLLMプロバイダーをサポートしたいと考えています - 私たちに相談するか、プルリクエストを送信してください！

CI/CDでGROQ APIキーが必要ですか？

通常は不要です。アプリをローカルでビルドすると、すべての翻訳はlingo/ディレクトリに保存されます。CI/CDビルドでは、文字列を翻訳するためにLLMを呼び出す必要はありません。

代替として、CI/CDにGROQ_API_KEY変数を追加してビルド時にすべての翻訳を行うこともできますが、最終的な翻訳をより制御するために、このアプローチはお勧めしません。

翻訳を編集できますか？

はい！lingo/dictionary.jsファイルを手動で編集できます。このファイルはすべてのファイルとエントリの翻訳を含むオブジェクトをエクスポートします。各ロケールのテキストはcontentプロパティで編集できます。Reactコンポーネント内のソーステキストが更新されるまで、編集内容は保持されます。

JavaScriptオブジェクトの編集が好きではありませんか？ 編集体験を向上させるエディターをまもなくリリースする予定です。興味がある方はぜひお知らせください！

アプリ全体、特定のファイル、または言語を再翻訳するにはどうすればよいですか？

アプリ全体を再翻訳するには、lingo/ディレクトリからdictionary.jsファイルを削除してください。

特定のファイルのみを再翻訳するには、dictionary.jsからそのキー（ファイル名）を削除できます。

特定のロケールを再翻訳したい場合は、そのロケールのすべてのレコードを削除する必要があります。

なぜローカルでアプリをビルドする必要があるのですか？

ローカルビルドはlingo/翻訳ファイルを以下の方法で正規化します：

未使用の翻訳キーの削除
コンテンツフィンガープリントの更新
一貫したファイル形式の確保
本番デプロイメントの最適化

常にnpm run buildを実行してから変更をコミットし、翻訳ファイルをクリーンに保ちましょう。

翻訳が不足しています！

翻訳が不足している場合：

ローカルでビルドしてlingo/ファイルを正規化します：
```
npm run build
```

APIキーが正しく設定されているか確認します：

# .envファイルに以下が含まれているか確認
GROQ_API_KEY=gsk_...

更新されたファイルをコミットします：
```
git add lingo/
git commit -m "Update translations"
```
変更後に開発サーバーを再起動します。

カスタム用語集を設定できますか？

はい！コンパイラ設定で直接カスタムプロンプトを使用して、用語と用語集を定義できます：

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  prompt:
    "あなたはプロフェッショナルな翻訳者です。以下の用語を一貫して使用してください：'Dashboard'はフランス語で'Tableau de bord'、'Settings'はスペイン語で'Configuración'としてください。{SOURCE_LOCALE}から{TARGET_LOCALE}へ翻訳してください。",
};

コンパイラはどのように複数形を処理しますか？

コンパイラは基本的な複数形パターンを自動的に処理しますが、複雑な複数形ルールの場合は、JSXを適切に構造化する必要があるかもしれません：

// コンパイラはこれを適切に処理します
<p>{count === 1 ? <>1 item</> : <>{count} items</>}</p>

本番環境でのパフォーマンスはどうですか？

Lingo.devコンパイラは本番環境向けに最適化されています：

ランタイムコストゼロ - 翻訳は事前コンパイルされます
バンドル分割 - アクティブなロケールのみが読み込まれます
ツリーシェイキング - 未使用の翻訳は削除されます
CDNフレンドリー - 静的翻訳ファイルが効率的にキャッシュされます

TypeScriptで使用できますか？

はい！コンパイラはTypeScriptプロジェクトとシームレスに連携します。提供されるすべてのReactコンポーネントは完全に型付けされています：

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

// TypeScriptの完全サポート
const locales: string[] = ["en", "es", "fr"];
<LocaleSwitcher locales={locales} />;

バグの報告や機能リクエストはどのように行いますか？

GitHub Issues: 問題を開く
Discordコミュニティ: Discordに参加する
機能リクエスト: 機能提案にはGitHubディスカッションを使用してください

次のステップ

はじめる: クイックスタートガイド
フレームワーク統合: Next.js, React Router, Vite
高度な機能: 設定オプション