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

Reactアプリを新しい市場に展開したいとお考えですか？TacoTranslate を使えば、Reactアプリのローカライズが非常に簡単になり、手間をかけずに世界中のユーザーにリーチできます。

ReactにTacoTranslateを選ぶ理由は？

シームレスな統合：Reactアプリケーション向けに特化して設計されており、TacoTranslateは既存のワークフローに容易に組み込めます。
文字列の自動収集：JSONファイルを手動で管理する必要はもうありません。TacoTranslateはコードベースから文字列を自動的に収集します。
AIによる翻訳：AIの力を活用して、アプリケーションのトーンに合った文脈的に正確な翻訳を提供します。
即時の言語サポート：クリック一つで新しい言語を追加でき、アプリケーションをグローバルに利用可能にします。

仕組み

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など。オリジンについて詳しくはこちら。

.env

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!