Reactアプリの国際化（i18n）に最適なソリューション

仕組み

npm を使って TacoTranslate パッケージをインストールします:

npm install tacotranslate

モジュールをインストールしたら、TacoTranslateのアカウント、翻訳プロジェクト、そして関連するAPIキーを作成する必要があります。こちらでアカウントを作成してください。 無料で、クレジットカードの登録は不要です。

TacoTranslate アプリの UI 内でプロジェクトを作成し、API キーのタブに移動します。read キーを 1 つと read/write キーを 1 つ作成してください。これらは環境変数として保存します。read キーは私たちが public と呼んでいるもので、read/write キーは secret です。例えば、プロジェクトのルートにある .env ファイルに追加することができます。

さらに、次の2つの環境変数も追加する必要があります: TACOTRANSLATE_DEFAULT_LOCALE と TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: デフォルトのフォールバックロケールコードです。この例では英語用に en を設定します。
• TACOTRANSLATE_ORIGIN: 文字列が保存される「フォルダ」（例：ウェブサイトのURL）。 オリジンについて詳しくはこちら。

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

秘密の read/write APIキーをクライアント側の本番環境に決して漏らさないでください。

TacoTranslate の設定

TacoTranslate のコンテキストプロバイダーでアプリケーションをラップして、React アプリケーションで TacoTranslate を初期化します:

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

これで、アプリケーション内のどこでも Translate コンポーネントを使用して翻訳されたテキストを表示できるようになりました！詳細や環境別の実装ガイドについては、ドキュメント をぜひご覧ください。

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

TacoTranslateを使用する利点

• 時間の節約：ローカリゼーションと文字列収集という面倒な作業を自動化し、貴重な時間を節約します。
• コスト効率が良い：手動翻訳の必要性を減らし、ローカリゼーションのコストを下げます。
• 精度の向上：AIによる翻訳が、文脈に合った正確で高品質な結果を確保します。
• スケーラブルなソリューション：アプリケーションや顧客基盤の拡大に合わせて、新しい言語のサポートを簡単に追加できます。

今すぐ始めましょう！

あなたのReactアプリケーションは、Translateコンポーネントに文字列を追加すると自動的に翻訳されます。APIキーに対してread/write権限を持つ環境のみが、新しい翻訳対象の文字列を作成できる点にご注意ください。

本番公開前に、クローズドで安全なステージング環境を用意して本番アプリをテストし、先に新しい文字列を追加することを推奨します。これにより、あなたのシークレットAPIキーが第三者に盗まれることや、不正な文字列の追加によって翻訳プロジェクトが肥大化するのを防げます。

Be sure to check out the complete examples over at our GitHub profile. If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Translate for free!