Magic Translate vs. react-intl

react-intl は FormatJS の一部だ。メッセージ、日付、数字を ICU メッセージ構文でフォーマットし、各言語の翻訳を指定する。Magic Translate はコンポーネント内のテキストを直接翻訳するので、翻訳を書いたり管理したりする必要はない。

一目で

コードの違い

react-intl では、各メッセージに ID が付き、翻訳は別々のファイルに保存される。

import { FormattedMessage } from 'react-intl';

const Welcome = () => (
  <FormattedMessage id="home.welcome" defaultMessage="Welcome back!" />
);

// Then extract the messages, translate them for every language
// and load the right file when the app starts.

Magic Translate では、メッセージを一度書く:

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

const Welcome = () => <T>Welcome back!</T>;

Magic Translate を選ぶタイミング

• 翻訳ワークフローなしで多くの言語でアプリを作りたい。
• テキストは頻繁に変わるし、すべての言語を最新の状態に保ちたい。
• 翻訳者にお金を払ったり待ったりせずに、新しい言語が欲しい。

react-intl を選ぶタイミング

• 複雑な複数形と性別には ICU メッセージ構文が必要だ。
• 翻訳は人が書いたり、レビューしたりしなければならない。
• 外部サービスのない、無料のオープンソースの図書館が欲しい。

両方を使う

この2つはうまく連携している。react-intl または Intl APIを使って日付、数字、通貨をフォーマットし、Magic Translate を使ってその周りのテキストを翻訳する。

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