React クイックスタート

概要

このガイドでは、既存のReactプロジェクトを国際化する方法について説明します。

4つの簡単なステップを解説します：

1. セットアップウィザードの実行

セットアップウィザードは、プロジェクトの国際化プロセスを順を追って案内します。

npx gtx-cli@latest init

プロジェクトを手動でセットアップする場合は、手動セットアップガイドに従ってください。

セットアップウィザードは以下を行います：

1. 必要なライブラリをインストールします。
2. プロジェクトでサポートするロケールを設定します。
3. プロジェクトのJSXコンポーネントを<T>コンポーネントでラップします。
4. プロジェクト用の本番APIキーとプロジェクトIDを生成します。

詳細はセットアップウィザードのドキュメントをご覧ください。

2. GTProviderの追加

アプリに<GTProvider>コンポーネントを追加します。 config JSONオブジェクトをconfigプロップにスプレッドしてください。

import { GTProvider } from "gt-react";
import MyApp from "./MyApp";
import config from "./gt.config.json";
 
export default function App() {
  return (
    <GTProvider config={...config}> 
      <MyApp />
    </GTProvider> 
  );
}

3. 環境変数の追加

セットアップウィザードは、プロジェクトのルートに.env.localファイルを作成し、本番APIキーとプロジェクトIDを含めます。

ただし、gt-reactを開発モードで使用するには、本番用ではなく開発用APIキーを追加する必要があります。

VITE_GT_API_KEY="YOUR_GT_DEV_API_KEY"
VITE_GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

4. 文字列のクリーンアップ

セットアップウィザードは、あなたのプロジェクト内のすべてのJSXコンポーネントを <T> コンポーネントでラップします。 しかし、文字列には影響がないことに気付くかもしれません。

たとえば、次のような文字列定数がある場合：

export default function Example() {
  const greeting = "Hello, world!";
  return <p>{greeting}</p>;
}

セットアップウィザードはこの文字列には手を加えません。

これを修正するには、useGT() フックを使って文字列を翻訳できます。

import { useGT } from "gt-react";
export default function Example() {
  const t = useGT();
  return <p>{t("Hello, world!")}</p>;
}

試してみましょう！

おめでとうございます！ 🥳 あなたのアプリはマルチリンガルになりました！実際に動かしてみましょう。

アプリを別の言語で表示する

npm run dev 

トラブルシューティング

次のステップ

• <T>コンポーネントや他の利用可能なコンポーネントの詳細については、React APIリファレンスをご覧ください。

手動セットアップ

手動でセットアップを行いたい場合は、以下の手順に従ってください。

1. ライブラリのインストール

gt-react と gtx-cli ライブラリをインストールします。

npm i gt-react
npm i gtx-cli --save-dev

2. 言語の選択

<GTProvider> は、gt-react の動作を設定するために使用します。
アプリのできるだけ上位、理想的にはルートに配置してください。

ロケールコード のリストを渡すだけで、アプリに追加できます。

import { GTProvider } from "gt-react";
import MyApp from "./MyApp";
 
export default function App() {
  return (
    // フランス語と中国語のサポート
    <GTProvider locales={['fr', 'zh']}> 
      <MyApp />
    </GTProvider> 
  );
}

<GTProvider> の全てのプロップスや詳細なドキュメントについては、APIリファレンス を参照してください。

3. <T> コンポーネントの追加

ネストされたJSXコンテンツを <T> コンポーネント でラップして、翻訳可能にします。
詳細については、<T> コンポーネントの使い方ガイド をご覧ください。

import { T } from "gt-react";
 
export default function Example() {
  return (
    <T>
      <p>
        これは翻訳されます。
      </p>
    </T>  
  );
}

翻訳したくないJSXコンテンツには、<Var> コンポーネント を使用してください。

import { T, Var } from "gt-react";
 
export default function Example() {
  return (
    <T>
      <p>
        これは翻訳されます。 <Var>これは翻訳されません。</Var>
      </p>
    </T>  
  );
}

文字列の場合は、useGT() を使って翻訳できます。

import { useGT } from "gt-react";
 
export default function Example() {
  const t = useGT(); 
  return (
    <p>
      {t("This gets translated.")}
    </p>
  );
}

4. 環境変数の追加

APIキーとプロジェクトIDを環境変数に追加してください。

VITE_GT_API_KEY="YOUR_GT_DEV_API_KEY"
VITE_GT_PROJECT_ID="YOUR_GT_PROJECT_ID"