Reactアプリケーションのローカライズを簡単に

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!