Reactアプリケーションのローカライズを手間なく実現

仕組み

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 のセットアップ

アプリケーションを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!