Magic Translate vs. i18next

i18next は、Reactバインディングのある react-i18next で、JavaScript用の最も人気のあるオープンソースのi18nライブラリだ。翻訳キーと言語ファイルを中心に構築されている。Magic Translate は、キーやファイルなしで、コンポーネント内のテキストを直接翻訳する。このページでは、アプリに適したツールを選択できるように、違いを説明している。

一目で

コードの違い

react-i18next では、各言語の言語ファイルを保存して、テキストをキーで参照する。

// locales/en/translation.json
{ "cart": { "title": "Your shopping cart" } }

// Cart.tsx
import { useTranslation } from 'react-i18next';

const Cart = () => {
  const { t } = useTranslation();
  return <h2>{t('cart.title')}</h2>;
};

Magic Translate を使用すると、テキストはコンポーネントに残る:

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

const Cart = () => (
  <h2>
    <T>Your shopping cart</T>
  </h2>
);

Magic Translate を選ぶタイミング

• 言語ファイルを管理せずに、アプリを多くの言語に対応させたい。
• 翻訳者がいない、または新しいバージョンをリリースする前に翻訳者を待ちたくない。
• テキストは頻繁に変わるし、すべての言語を最新の状態に保ちたい。
• Reactサーバーコンポーネントや Next.js を使っていて、検索エンジン用に完全に翻訳されたHTMLを使いたい。

i18next を選ぶタイミング

• すべてのテキストは、人が翻訳またはレビューする必要がある。
• 各言語の複数形、日付、数字を正確に管理する必要がある。
• 外部サービスのない、無料のオープンソースの図書館が欲しい。

i18next から Magic Translate に移動する

一度に1つのコンポーネントを切り替えることができる。t('key') をあなたの言語ファイルにある英語のテキストに <T> で囲んで置き換えるか、props と属性には useT hook を使う。移行中は、両方のライブラリを並行して実行できる。

試す準備はできた？入門ガイドに従って、最初のコンポーネントを5分で翻訳する。