i18next

i18next プロジェクトを自動翻訳(5分以内)

概要

このチュートリアルでは、i18next を利用している場合に、プロジェクトの翻訳ファイルを自動管理する方法を説明します。

以下の4ステップで進めます:

環境変数を追加する

gtx-cli をインストールする

gt.config.json ファイルを作成する

gtx-cli translate を実行する

ヒント: 翻訳ファイル運用の手間を避けたい場合は、<T> コンポーネントの利用をご検討ください。


ステップ 1: 環境変数を追加する

本番用のAPIキーとプロジェクトIDを環境変数に追加します。 これは gtx-cli ツールを使用するために必要です。 これらは General Translation のダッシュボード から取得できます。

.env
GT_API_KEY=<your-api-key>
GT_PROJECT_ID=<your-project-id>

ステップ 2: gtx-cli のインストール

プロジェクトに gtx-cli ツールをインストールします。

npm i gtx-cli
yarn add --dev gtx-cli
bun add --dev gtx-cli
pnpm add --save-dev gtx-cli

ステップ3: gt.config.json ファイルを作成する

プロジェクトのルートに gt.config.json ファイルを作成します。

gt.config.json
{
  "defaultLocale": "en",
  "locales": ["zh", "es", "ja"],
  "files": {
    "json": {
      "include": ["messages/[locale]/*.json"]
    },
  },
}

必要に応じて gt.config.json ファイルをカスタマイズしてください。詳しくは configuration ドキュメントをご覧ください。

json のファイル形式を調整し、include のパスがプロジェクトの構成に合致するようにしてください。

翻訳では元の文字列のシンタックスが保持されます。

ステップ 4: ビルドプロセスに gtx-cli translate コマンドを追加する

ビルドコマンドの実行前に、ビルドまたは CI プロセスへ gtx-cli translate コマンドを組み込み、翻訳を自動的にプロジェクトへ取り込みます。

package.json
{
  "scripts": {
    "translate": "npx gtx-cli translate",
    "build": "npm run translate && <your build command>"
  }
}

これにより、対応ロケールすべての翻訳が生成され、プロジェクトに保存されます。 これらの files をリポジトリにコミットする場合は、コミット前に代わりにこのコマンドを実行してください。

完了です!これで、プロジェクトに変更があるたびに、翻訳用の JSON ファイルが自動的にすべて更新されます。


注意事項

  • gtx-cli translate コマンドを使うと、翻訳をプロジェクトに自動追加できます。
  • 翻訳ファイルをコミットする場合は、コミット前に gtx-cli translate コマンドを実行してください。
  • 翻訳の出力先パスを設定するには、設定 ドキュメントを参照してください。

次のステップ

このガイドはどうでしたか?

i18next