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

仕組み

npm を使用して TacoTranslate パッケージをインストールしてください:

npm install tacotranslate

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

TacoTranslate アプリケーションの UI 内でプロジェクトを作成し、API キーのタブに移動します。1つの read キーと1つの read/write キーを作成します。これらを環境変数として保存します。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の設定

React アプリケーションで TacoTranslate を初期化するには、アプリケーションを 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!