<T> コンポーネント

<T> コンポーネントは、React アプリで JSX コンテンツを国際化するための主要なツールです。JSX 要素を包み、ユーザーの locale に応じて自動的に翻訳します。

クイックスタート

任意の静的な JSX コンテンツを<T>で包んで変換します:

import { T } from 'gt-react';

// 変更前
function Greeting() {
  return <p>こんにちは、世界！</p>;
}

// 変更後
function Greeting() {
  return <T><p>Hello, world!</p></T>;
}

<T> 内の動的コンテンツには、Variable Components と Branching Components を使用します。

基本的な使い方

<T> コンポーネントは、children に任意の JSX コンテンツを受け取れます。

// Simple text
<T>アプリへようこそ</T>

// HTML elements
<T><h1>ページタイトル</h1></T>

// Complex nested JSX
<T>
  <div className="alert">
    <span>重要:</span>よくお読みください。
  </div>
</T>

設定オプション

コンテキストの追加

あいまいな用語のために翻訳コンテキストを提供します:

<T context="notification popup, not bread">
  トーストをクリックして閉じる
</T>

翻訳IDの設定

翻訳の一貫性を保つため、明示的なidを使用してください:

<T id="welcome-message">
  おかえりなさい、ユーザー!
</T>

`<T>` を使うタイミング

<T> は静的コンテンツのみに使用してください:

// ✅ 静的コンテンツは正常に動作します
<T><button>ここをクリック</button></T>
<T><h1>サイトへようこそ</h1></T>

// ❌ 動的コンテンツは動作しません
<T><p>こんにちは {username}</p></T>
<T><p>今日は {new Date()}</p></T>

// ✅ 動的コンテンツにはVariableコンポーネントを使用してください
<T>
  <p>こんにちは<Var>{username}</Var></p>
</T>

Variable と Branching コンポーネントは、動的コンテンツ向けに <T> 内で動作するよう設計されています。詳細は Variable Components および Branching Components の各ガイドをご覧ください。

例

シンプルな要素

// Basic text
<T>こんにちは、世界！</T>

// Button with text
<T><Button>フォームを送信</Button></T>

// Heading with styling
<T><h1 className="text-2xl font-bold">ようこそ</h1></T>

複雑なコンポーネント

// ナビゲーションメニュー
<T>
  <nav className="navbar">
    <a href="/about">会社情報</a>
    <a href="/contact">お問い合わせ</a>
  </nav>
</T>

// アラートメッセージ
<T>
  <div className="alert alert-warning">
    <AlertIcon className="w-5 h-5" />
    <span>セッションは5分後に期限切れになります</span>
  </div>
</T>

Variables を使用する場合

// 静的テキストと動的値の組み合わせ
<T>
  <p>お帰りなさい、<Var>{user.name}</Var>！</p>
</T>

// 静的と動的が混在するフォーム
<T>
  <label>
    メールアドレス：<input type="email" placeholder="メールアドレスを入力してください" />
  </label>
</T>

<Var> コンポーネントの詳細は、Variable コンポーネントガイドをご覧ください。

本番環境のセットアップ

ビルドプロセス

ビルドパイプラインに翻訳を追加します：

package.json

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

開発環境と本番環境での挙動

開発環境: Dev API key を使用すると、コンポーネントのレンダー時にオンデマンドで翻訳が実行されます。開発中はリアルタイムで翻訳が反映されます。
本番環境: すべての翻訳はビルド時に事前生成され、アプリケーションが本番公開されると表示されます。

開発中のライブ翻訳を有効にするには、環境変数に開発用のAPIキーを設定してください。Dashboard の API Keys から作成できます。

プライバシーに関する考慮事項

<T> コンポーネント内のコンテンツは、翻訳のために GT API に送信されます。機微なデータについては、Variable Components を使用して、機密情報をローカルにとどめてください。

// 安全 — 機密データはローカルに留まります
<T>
  おかえりなさい、<Var>{username}</Var>さん
</T>

よくある問題

コンポーネントの境界

<T> は直下の children のみを翻訳し、他のコンポーネント内の内容は翻訳しません。

// ❌ 誤り - コンポーネント内のコンテンツは翻訳されません
function MyComponent() {
  return <p>これは翻訳されません</p>;
}

<T>
  <h1>これは翻訳されます</h1>
  <MyComponent /> {/* 内部のコンテンツは翻訳されません */}
</T>

// ✅ 正解 - 各コンポーネントを個別にラップします
function MyComponent() {
  return <T><p>これは翻訳されます</p></T>;
}

<T><h1>これは翻訳されます</h1></T>
<MyComponent />