よくある質問

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に参加してください。

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

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": "mistral-saba-24b",
    "en:it": "meta-llama/llama-4-maverick-17b-128e-instruct",
    "*:*": "mistral-saba-24b",
  },
};

lingoCompiler.next(compilerConfig)(nextConfig);

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

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

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

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  prompt:
    "あなたは技術文書を専門とするプロフェッショナルな翻訳者です。技術的な正確さを維持しながら{SOURCE_LOCALE}から{TARGET_LOCALE}に翻訳してください。",
};

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

他のLLMプロバイダーを使用できますか？

現在、Lingo.devコンパイラはGROQと統合していますが、近い将来より多くの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:
    "You are a professional translator. Use these terms consistently: 'Dashboard' should be 'Tableau de bord' in French, 'Settings' should be 'Configuración' in Spanish. Translate from {SOURCE_LOCALE} to {TARGET_LOCALE}.",
};

特定のコンテンツを翻訳から除外するにはどうすればよいですか？

data-lingo-skip属性を使用します：

<div data-lingo-skip>このコンテンツは翻訳されません</div>

コンテンツタイプに基づいた条件付きスキップ：

<code data-lingo-skip>
  // コードブロックは自動的にスキップされます const apiKey = "secret-key";
</code>

特定の翻訳を上書きできますか？

はい！ロケール固有の上書きにはdata-lingo-override-属性を使用します：

<button data-lingo-override-es="¡Hola!" data-lingo-override-fr="Bonjour!">
  Hello
</button>

これは以下の場合に役立ちます：

翻訳すべきでないブランド名
地域固有の用語
手動レビューが必要なマーケティングコピー

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

コンパイラは基本的な複数形パターンを自動的に処理しますが、複雑な複数形ルールについては、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
高度な機能: 設定オプション