ドキュメント：TacoTranslateの使用方法

TacoTranslate の使い方

Japanese

文字列の翻訳

現在、文字列を翻訳する方法は3つあります: Translate コンポーネント、useTranslation フック、または translateEntries ユーティリティです。

Translate コンポーネントの使用。
翻訳を span 要素内に出力し、HTML のレンダリングをサポートします。

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

例えば、コンポーネントで as="p" を使うことで、要素の種類を変更できます。

useTranslation フックの使用。
翻訳をプレーンテキストの文字列として返します。例えば、 meta タグなどで便利です。

import {useEffect} from 'react';
import {useTranslation} from 'tacotranslate/react';

function Page() {
	const helloWorld = useTranslation('Hello, world!');

	useEffect(() => {
		alert(helloWorld);
	}, [helloWorld]);

	return (
		<title>{useTranslation('My page title')}</title>
	);
}

translateEntries ユーティリティの使用。
サーバーサイドで文字列を翻訳します。あなたの OpenGraph 画像を強化しましょう。

import {createEntry, translateEntries} from 'tacotranslate';

async function generateMetadata(locale = 'es') {
	const title = createEntry({string: 'Hello, world!'});
	const description = createEntry({string: 'TacoTranslate on the server'});

	const translations = await translateEntries(
		tacoTranslate,
		{origin: 'opengraph', locale},
		[title, description]
	);

	return {
		title: translations(title),
		description: translations(description)
	};
}

文字列がどのように翻訳されるか

文字列が当社のサーバーに到達すると、まず検証と保存を行い、その後すぐに機械翻訳を返します。機械翻訳は通常、当社のAI翻訳と比べて品質が低いですが、迅速な初期応答を提供します。

同時に、非同期の翻訳ジョブを開始し、お客様の文字列に対して高品質で最先端のAI翻訳を生成します。AI翻訳が準備でき次第、機械翻訳に取って代わり、文字列の翻訳をリクエストするたびに送信されます。

もし文字列を手動で翻訳している場合、それらの翻訳が優先され、代わりに返されます。

オリジンの利用

TacoTranslateプロジェクトにはoriginsと呼ばれるものが含まれています。これは文字列や翻訳のエントリーポイント、フォルダー、またはグループのようなものと考えてください。

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

Originsは文字列を意味のあるコンテナに分けることを可能にします。 例えば、ドキュメント用のoriginとマーケティングページ用のoriginを別々に持つことができます。

より細かな制御を行いたい場合は、コンポーネントレベルでオリジンを設定することができます。

これを実現するには、プロジェクト内で複数の TacoTranslate プロバイダーを使用することを検討してください。

同じ文字列でも、異なるオリジンでは異なる翻訳がされる場合があることにご注意ください。

最終的に、文字列をどのようにオリジンに分けるかはあなたとあなたのニーズ次第です。ただし、1つのオリジン内に多くの文字列があると読み込み時間が長くなる可能性があることに注意してください。

変数の扱い

ユーザー名、日付、メールアドレスなどの動的コンテンツには、常に変数を使用する必要があります。

文字列内の変数は、{{variable}} のように二重の中括弧を使って宣言します。

import {Translate} from 'tacotranslate/react';

function Greeting() {
	const name = 'Juan';
	return <Translate string="Hello, {{name}}!" variables={{name}} />;
}

import {useTranslation} from 'tacotranslate/react';

function useGreeting() {
	const name = 'Juan';
	return useTranslation('Hello, {{name}}!', {variables: {name}});
}

HTML コンテンツの管理

デフォルトでは、Translate コンポーネントはHTMLコンテンツをサポートし、レンダリングします。ただし、useDangerouslySetInnerHTML を false に設定することで、この動作を無効にすることができます。

ユーザー生成コンテンツなどの信頼できないコンテンツを翻訳する際は、HTMLレンダリングを無効にすることを強く推奨します。

すべての出力は、表示される前に常に sanitize-html でサニタイズされます。

import {Translate} from 'tacotranslate/react';

function Page() {
	return (
		<Translate
			string={`
				Welcome to <strong>my</strong> website.
				I’m using <a href="{{url}}">TacoTranslate</a> to translate text.
			`}
			variables={{url: 'https://tacotranslate.com'}}
			useDangerouslySetInnerHTML={false}
		/>
	);
}

上記の例はプレーンテキストとしてレンダリングされます。

サーバーサイドレンダリング