<T> コンポーネント
<T> コンポーネントで JSX コンポーネントを国際化する方法
<T> コンポーネント は、React アプリで JSX コンテンツを国際化するための主要な手段です。JSX 要素を包み、ユーザーの locale に応じて自動で翻訳を行います。
クイックスタート
任意の静的な JSX コンテンツを <T> で包んで変換します：
import { T } from 'gt-react';
// 変更前
function Greeting() {
return <p>Hello, world!</p>;
}
// 変更後
function Greeting() {
return <T><p>Hello, world!</p></T>;
}動的コンテンツには、<T> 内で Variable Components と Branching Components を使用します。
基本的な使い方
<T> コンポーネント は、children に任意の JSX コンテンツを受け取れます。
// シンプルなテキスト
<T>私たちのアプリへようこそ</T>
// HTML要素
<T><h1>ページタイトル</h1></T>
// 複雑にネストされた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 のガイドをご参照ください。
例
シンプルなエレメント
// 基本的なテキスト
<T>こんにちは、世界！</T>
// テキスト付きボタン
<T><Button>フォームを送信</Button></T>
// スタイル付きヘッディング
<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 Components ガイドをご覧ください。
本番環境のセットアップ
ビルドプロセス
ビルドパイプラインに翻訳を追加する:
{
"scripts": {
"build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
}
}開発環境と本番環境の動作
- 開発: 開発用のAPIキーがある場合、コンポーネントのレンダー時にオンデマンドで翻訳が実行されます。開発中はリアルタイムで翻訳が反映されます。
- 本番: すべての翻訳はビルド時に事前生成され、アプリケーションが公開されると表示されます。
開発中のライブ翻訳を有効にするには、環境に開発用の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 /><T> コンポーネントのネスト
// ❌ <T> コンポーネントをネストしないでください
<T>
<T>Hello world</T> {/* これはしないでください */}
</T>動的コンテンツのエラー
CLI は <T> 内の動的コンテンツでエラーを返します。動的な値は Variable コンポーネントで包んでください。
// ❌ 間違い - 動的コンテンツが壊れる
<T><p>Hello {username}</p></T>
// ✅ 正しい - Variableコンポーネントを使用
<T><p>Hello <Var>{username}</Var></p></T>動的値の扱いはVariable Components Guide、条件分岐するコンテンツはBranching Components Guideを参照してください。
次のステップ
- Variable コンポーネントガイド - JSX 内の翻訳で動的コンテンツを扱う
- Branching コンポーネントガイド - 翻訳に条件分岐ロジックを追加する
このガイドはどうでしたか？