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!