手動オーバーライド - Lingo.dev Compiler

data-lingo-override属性を使用して、特定のテキストのAI生成翻訳をオーバーライドします。

基本的な使い方

<h1 data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev" }}>
  Lingo.dev
</h1>

コンパイラは、AIで生成する代わりに、指定された翻訳を使用します。

構文

data-lingo-override属性は、ロケールコードをキーとするオブジェクトを受け取ります。

data-lingo-override={{
  [locale]: "translation",
  ...
}}

ロケールコードは、設定されたtargetLocalesと一致する必要があります。この属性は最終的なHTML出力から削除されます。

使用例

ブランド名

すべてのロケールでブランド名を保持します。

<h1 data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev", fr: "Lingo.dev" }}>
  Lingo.dev
</h1>

技術用語

一貫した技術用語を確保します。

<p data-lingo-override={{ es: "API REST", de: "REST-API", ja: "REST API" }}>
  REST API
</p>

法的テキスト

法的コンテンツには認定翻訳を使用します。

<p data-lingo-override={{
  es: "Todos los derechos reservados. Consulte nuestros términos legales.",
  de: "Alle Rechte vorbehalten. Siehe unsere rechtlichen Bedingungen."
}}>
  All rights reserved. See our legal terms.
</p>

マーケティングコピー

マーケティングメッセージを微調整します。

<h2 data-lingo-override={{
  es: "Traduce tu app en minutos",
  de: "Übersetze deine App in Minuten",
  fr: "Traduisez votre app en quelques minutes"
}}>
  Translate your app in minutes
</h2>

部分的なオーバーライド

特定のロケールのみをオーバーライドし、他のロケールはAI翻訳を使用します。

<p data-lingo-override={{ de: "Professionelle Übersetzung" }}>
  Professional translation
</p>

スペイン語、フランス語、その他のロケールはAI翻訳を使用します。ドイツ語のみがあなたのオーバーライドを使用します。

リッチテキストと補間

コンパイラはネストされた要素を含むリッチテキストを処理します:

<p data-lingo-override={{
  es: "Bienvenido <strong0>{name}</strong0>",
  de: "Willkommen <strong0>{name}</strong0>"
}}>
  Welcome <strong>{name}</strong>
</p>

プレースホルダー構文:

<tagname0>...</tagname0> タグの最初のインスタンス用
<tagname1>...</tagname1> 2番目のインスタンス用
{variableName} 補間用

コンパイラは自動的に <strong0> を出力の <strong> にマッピングします。

複数のネストされた要素

<div data-lingo-override={{
  es: "Tu pedido: <span0>{count}</span0> artículos por <em0>${price}</em0>",
  de: "Deine Bestellung: <span0>{count}</span0> Artikel für <em0>${price}</em0>"
}}>
  Your order: <span>{count}</span> items for <em>${price}</em>
</div>

複雑な例

ネストされたコンポーネント

<section>
  <h1 data-lingo-override={{ es: "Características", de: "Funktionen" }}>
    Features
  </h1>
  <p data-lingo-override={{
    es: "Traduce automáticamente tus componentes React sin cambios de código",
    de: "Übersetze deine React-Komponenten automatisch ohne Code-Änderungen"
  }}>
    Automatically translate your React components without code changes
  </p>
</section>

属性

文字列属性でも動作します:

<img
  src="/logo.png"
  alt="Company Logo"
  data-lingo-override={{
    es: "Logo de la Empresa",
    de: "Firmenlogo"
  }}
/>

オーバーライドは alt 属性に適用されます。

ロケール地域コード

ロケール地域コード(例: en-US、en-GB)をサポートします:

<p data-lingo-override={{
  "en-US": "color",
  "en-GB": "colour",
  "es-ES": "color",
  "es-MX": "color"
}}>
  color
</p>

ハイフンを含むロケールコードには引用符を使用してください。

TypeScriptサポート

TypeScriptを使用する場合、属性は完全に型付けされます:

interface OverrideProps {
  "data-lingo-override"?: Record<string, string>;
}

TypeScriptは、ロケールコードが設定された targetLocales と一致することを検証します。

ベストプラクティス

控えめに使用する—ほとんどの翻訳はAIに任せましょう。必要な場合のみオーバーライドしてください:

翻訳すべきでないブランド名
特定の翻訳が必要な技術用語
認証が必要な法的文書
人間によるレビューが必要なマーケティングコピー

一貫性を維持する—アプリ全体で同じ用語にオーバーライドを使用します。

// Good - consistent brand name
<h1 data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev" }}>Lingo.dev</h1>
<p>Welcome to <span data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev" }}>Lingo.dev</span></p>

// Bad - inconsistent
<h1 data-lingo-override={{ es: "Lingo.dev" }}>Lingo.dev</h1>
<p>Welcome to Lingo.dev</p> // Missing override

バージョン管理—オーバーライド文字列はソースコードに含まれるため、レビューやバージョン管理が容易です。

よくある質問

クライアントコンポーネントでも動作しますか？ はい。オーバーライドはサーバーコンポーネントとクライアントコンポーネントの両方で動作します。

aria-labelなどの属性をオーバーライドできますか？ はい。オーバーライドは、要素のコンテンツであっても属性であっても、翻訳可能なテキストに適用されます。

1つのロケールのみをオーバーライドした場合はどうなりますか？ 他のロケールはAI翻訳を使用します。オーバーライドはロケールごとに適用されるため、すべてのロケールを指定する必要はありません。

オーバーライドで変数を使用できますか？ はい。補間には{variableName}構文を使用します。コンパイラは変数プレースホルダーを保持します。

オーバーライドによってバンドルサイズは増加しますか？ わずかに増加します。各オーバーライドはバンドルに数バイトを追加します。適度な使用であれば影響は無視できる程度です。

開発環境でのみオーバーライドできますか？ いいえ。オーバーライドはソースコードであるため、すべての環境で適用されます。一時的なテストには開発ウィジェットを使用してください。

次のステップ

カスタムロケールリゾルバー — ロケール検出をカスタマイズする
開発ツール — 開発ウィジェットを使用して翻訳をテストする
ベストプラクティス — オーバーライドを使用するタイミング