Reactアプリケーションの簡単なローカリゼーション

仕組み

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!