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

Reactアプリケーションを新しい市場に展開したいとお考えですか？TacoTranslateは、Reactアプリのローカライズを非常に簡単にし、手間をかけずにグローバルなオーディエンスにリーチできるようにします。

ReactにTacoTranslateを選ぶ理由は？

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

仕組み

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などです。オリジンについてはこちらをお読みください。

.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!