React クイックスタート

概要

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

4つの簡単なステップをカバーします：

必要なライブラリのインストール

言語の選択

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

環境変数の追加

この全プロセスは5分以内で完了するはずです。

セットアップ

1. ライブラリをインストールする

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

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

2. 言語を選択する

<GTProvider> は gt-react の動作を設定するために使用されます。アプリの可能な限り上位、理想的にはルートに配置する必要があります。

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

App.js

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> コンポーネントの使用ガイドをご覧ください。

Example.js

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

翻訳されるべきでない JSX コンテンツを指定するには、<Var> コンポーネントを使用します。

Example.js

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

ヒント: 時間を節約するために、セットアップコマンドを実行してください。これにより、コードベースをスキャンして翻訳可能な JSX を探し、<T> タグを自動的に挿入します。

shell

npx gtx-cli setup

文字列の翻訳には、useGT() を使用できます。詳細については、このガイドをご覧ください。

Example.js

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

4. 環境変数を追加する

API キーとプロジェクト ID を環境変数に追加します。

ダッシュボードに移動します。

サイドバーのDeveloper Keysページに移動します。

Create Dev API Keyをクリックし、APIキーとプロジェクトIDをクリップボードにコピーします。

プロジェクトIDとAPIキーを環境変数に追加します。使用しているReactフレームワークによって、環境変数の形式が少し異なる場合があります。これらの手順は開発環境専用です。

VITE_GT_API_KEY="YOUR_GT_DEV_API_KEY"
VITE_GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

APIキーを保護してください！

Reactの環境変数は、ビルド時にアプリケーションにバンドルされ、クライアント側のコードで公開されることがよくあります。セキュリティ上の理由から、次のことを行うべきです：

ローカル開発中は開発用APIキーのみを使用する
デプロイメントにはCLIツールで本番用APIキーのみを使用する
本番環境で環境変数としてAPIキーを含めない

試してみましょう！

おめでとうございます！ 🥳 あなたのアプリは多言語対応になりました！実際に見てみましょう。

アプリを別の言語で見る

アプリに <LocaleSelector> コンポーネントを追加します。これにより、アプリの言語を選択できるようになります。

ヒント: ブラウザの設定で言語を変更することもできます。

開発モードでReactアプリを起動します。

npm run dev

お好みのブラウザでアプリを開きます（通常は http://localhost:3000）。

トラブルシューティング

本番環境へのデプロイ

本番環境へのデプロイについてのガイドをご覧ください。

次のステップ

<T>コンポーネントやその他の利用可能なコンポーネントに関する詳細情報については、React APIリファレンスをご覧ください。
Reactプラグインを使用して、アプリの承認済み言語のリストを作成します。

React クイックスタート

ブラウザの言語を変更したのに、アプリの言語が変わらない。

新しい言語の読み込みに時間がかかるのはなぜですか？

一部のものは翻訳されているのに、他のものは翻訳されていないのはなぜですか？

このページについて