React (react-intl / FormatJS) でのICUメッセージ

ReactでのICU MessageFormat使用

react-intl（FormatJSスイートの一部）は、Reactアプリケーション向けの最も人気のある国際化ライブラリです。メッセージ構文としてICU MessageFormatを使用します。

セットアップ

import { IntlProvider, FormattedMessage } from 'react-intl';

const messages = {
  en: {
    greeting: 'Hello, {name}!',
    itemCount: '{count, plural, one {# item} other {# items}} in cart',
  },
  ja: {
    greeting: 'こんにちは、{name}！',
    itemCount: 'カートに{count, plural, other {#個の商品}}',
  },
};

FormattedMessageコンポーネント

<FormattedMessage
  id="greeting"
  defaultMessage="Hello, {name}!"
  values={{ name: userName }}
/>

useIntlフック

プログラマティックなフォーマット（ツールチップ、aria-labelsなど）：

import { useIntl } from 'react-intl';

function MyComponent() {
  const intl = useIntl();
  const label = intl.formatMessage(
    { id: 'itemCount' },
    { count: items.length }
  );
  return <span aria-label={label}>...</span>;
}

React要素によるリッチテキスト

react-intlは変数値としてReact要素をサポート：

<FormattedMessage
  id="tos"
  defaultMessage="I agree to the <link>Terms of Service</link>"
  values={{
    link: (chunks) => <a href="/tos">{chunks}</a>,
  }}
/>

ベストプラクティス

1. 常にdefaultMessageを提供 -- 英語ソースおよびフォールバック
2. page.section.messageKeyのようなメッセージIDを使用
3. メッセージをインラインではなく別のJSONファイルに抽出
4. 疑似ローカリゼーションでテストして切り詰めとレイアウトの問題を検出
5. 非JSXコンテキスト（タイトル、ARIAラベル）にはintl.formatMessageフックを使用