翻訳キーなしでi18nに反応する

ほとんどのReact i18nライブラリは翻訳キーで動作する。アプリ内の各テキストをキーに置き換え、各言語の翻訳ファイルを用意して、実行時に正しいテキストを検索する。Magic Translate では、自分の言語でテキストを書いて、ページが表示されたときにAIが翻訳する。

翻訳キー付きのi18nの仕組み

キーベースのライブラリでは、シンプルなボタンは次のようになる：

// en.json
{ "checkout.button": "Continue to payment" }

// de.json
{ "checkout.button": "Weiter zur Zahlung" }

// Checkout.tsx
<button>{t('checkout.button')}</button>

新しいテキストにはそれぞれ、キーとすべての言語ファイルの翻訳が必要だ。英語のテキストを変更しても、誰かが翻訳を更新するまで、他の言語は古くなる。

キーのない同じボタン

Magic Translate を使うと、テキストはそのまま残る:

import { T } from '@magic-translate/react';

<button>
  <T>Continue to payment</T>
</button>

管理すべき言語ファイルはない。テキストを変更すると、新しいバージョンは次に表示されるときに翻訳され、それ以降は翻訳がキャッシュされる。

はじめに

Magic Translate にサインアップして、APIキーを入手して。無料プランには1か月あたり5,000文字が含まれる。
Reactガイドのように、クライアントをインストールし、アプリを MagicTranslateProvider で囲む。
テキストを <T> で囲んで。props と属性には useT hook を使う。

import { MagicTranslateProvider, T, Language } from '@magic-translate/react';

const App = () => (
  <MagicTranslateProvider apiKey="<your-api-key>" language={Language.FR}>
    <h1>
      <T>Welcome to our shop</T>
    </h1>
  </MagicTranslateProvider>
);

サーバー上でレンダリングする場合は、代わりにReact SSRを使うと、検索エンジンとユーザーは完全に翻訳されたHTMLを受け取れる。

翻訳キーがまだ良い選択なら

AI翻訳は良いが、人がレビューしてくれない。法律や医療関連のテキストなど、アプリのすべての単語を翻訳者の承認が必要な場合、人間が翻訳したキーベースのライブラリで管理できる。多くのアプリは、ほとんどのインターフェースの Magic Translate と、重要な箇所ではレビュー済みのテキストの両方を組み合わせている。

よく寄せられる質問

翻訳は十分速いかい？

最初の翻訳には数秒かかる。その後、キャッシュされ、100〜300ミリ秒かかる。React SSRでは、翻訳はサーバー上で行われるので、ユーザーは翻訳済みのページを受け取る。

いくらかかる？

使用量は月ごとの翻訳文字数でカウントされ、すでに翻訳されたテキストは再びカウントされない。使用量の計算方法と料金を確認して。

どの言語がサポートされている？

70歳以上だ。サポートされている言語の全リストを見る。