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の設定

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!