Zenn
🐕

React の多言語化 (i18n) 対応 - Format.JS vs react-i18next

2021/07/21に公開
React
tech

こんにちは！

最近のフロントエンド開発では、グローバル展開を意識した多言語対応が必要となる場合も多いかと思います。

本記事では、React の多言語対応で人気のあるライブラリ Format.JS と react-i18next を比較してみました。

概要

Format.JS

高機能な多言語対応の機能提供します。

基本的な利用方法としては、Formatted*** という名前のコンポーネントが用意されており、表示したいデータタイプ (文字列、日付、数値、通貨) 毎に、最適化されたコンポーネントを配置することで、多言語に対応します。

サンプルコード

<p>
  <FormattedMessage
     id="TopPage.Title"
     description="トップページで利用されているタイトルリソースです" />
</p>

結果

<p>
  トップページ
</p>

id プロパティには、メッセージを特定するためのキーを設定し、description には、補足情報を記載することが出来ます。

https://formatjs.io/docs/react-intl/components

react-i18next

非常にシンプルな多言語機能を提供するライブラリです。

シンプルながらも、必要最小限の機能は提供されており、また、利用方法も t('id') の形式で記載できるため、コード量も、非常にコンパクトに多言語化対応を実現することが出来ます。

https://github.com/i18next/react-i18next

サンプルコード

<p>
   t('TopPage.Title')
</p>

結果

<p>
  トップページ
</p>

Format.JS vs react-i18next

初期化方法、セットアップについて

Format.JS の場合

IntlProvider コンポーネントに設定します。

locale、messages などのプロパティに位置情報や、対応メッセージ情報を設定することで多言語対応のセットアップを行います。

<IntlProvider locale={locale} messages={messages}>
  <App importantDate={new Date(1459913574887)} />
</IntlProvider>

設定オプション

interface IntlConfig {
  locale: string
  formats: CustomFormats
  messages: Record<string, string> | Record<string, MessageFormatElement[]>
  defaultLocale: string
  defaultFormats: CustomFormats
  timeZone?: string
  textComponent?: React.ComponentType | keyof React.ReactHTML
  wrapRichTextChunksInFragment?: boolean
  defaultRichTextElements?: Record<string, FormatXMLElementFn<React.ReactNode>>
  onError(err: string): void
}

react-i18next の場合

react-i18next の init 関数にて、多言語化対応のセットアップを行います。

i18n.use(initReactI18next).init({
  debug: true,
  resources: {
    en: { translation: enJson },
    ja: { translation: jaJson },
  },
  lng: 'en'
});

各言語のフォーマット(日付、通貨)に対応しているか？

Format.JS は、フォーマット機能を提供しています。

react-i18next にはフォーマット機能はなく、自前で対応する必要があります。

Format.JS の場合

<b>日付</b>

<FormattedDate
  value={new Date(1459832991883)}
  year="numeric"
  month="long"
  day="2-digit"
/>

2016年4月05日

<b>通貨</b>

<FormattedNumber value={1000} style="currency" />

$1000

フォーマットを変更したい場合

例えば、2021年4月 ではなく 2021/04/20 をフォーマットとして定義したい場合、IntlProvider コンポーネントの formats プロパティに、カスタムフォーマットを定義することが出来ます。


interface IntlConfig {
  locale: string
  formats: CustomFormats
  messages: Record<string, string> | Record<string, MessageFormatElement[]>
  defaultLocale: string
  defaultFormats: CustomFormats
  timeZone?: string
  textComponent?: React.ComponentType | keyof React.ReactHTML
  wrapRichTextChunksInFragment?: boolean
  defaultRichTextElements?: Record<string, FormatXMLElementFn<React.ReactNode>>
  onError(err: string): void
}

多言語が適用される範囲について

Format.JS の場合

InitProvider コンポーネントを配置した、配下のコンポーネント内で、 Formattedxxx コンポーネントが利用ができます。

InitProvider コンポーネントは、個々のコンポーネント毎に配置することも出来ますし、例えば、App コンポーネントなどの上位階層に配置することでアプリケーション全体に適応することもできます。

<IntlProvider 
    locale={'en'} 
>
    <App />
</IntlProvider>

react-i18next の場合

各コンポーネントにて、useTranslation で利用できます。

const [t, i18n] = useTranslation();

return (
  <p>
     t('Title')
  </p>
);

言語リソースの追加、削除、変更が簡単にできるか？

いずれも JSON 形式でデータを管理できますので、リソースファイルを外出し、既存のソースコードに影響を与えることなく、言語リソースの管理を行えます。

リアルタイムに言語の切り替えができるか？

どちらもリアルタイムで切り替えることができます。

Format.JS の場合

IntlProvider の locale プロパティを変更する事により、切り替えることが出来ます。

<IntlProvider 
    locale={'en'} 
>
    <App />
</IntlProvider>
react-i18next の場合

changeLanguage 関数を呼び出して言語の切り替えを行う事が出来ます。

i18n.changeLanguage('en');

まとめ

それぞれの特徴をまとめると、

・Format.JS は、多言語化に必要な機能を全て詰め込んだライブラリ。

・react-i18next は、多言語化対応に必要最小限なリソースの管理を行い、フォーマット等は、デベロッパーに任せる。など、カスタマイズ性が高い。

初めて多言語化対応を行う場合は Format.JS がおすすめです。

フォーマット機能が強力であることや、オプションを設定により、大まかな動作変更も対応しているため、殆どのアプリケーションで活躍できるかと思います。

または、既に多言語対応のアプリケーションの開発経験があり、細かいカスタマイズする必要がある場合には、 react-i18next の採用が良いかもしれませんね。

Ignite UI for React トライアル版を利用するには

Ignite UI for React はトライアル板での試用が可能です。
トライアルのダウンロードはこちら

また、こちらのページ よりアカウントの作成を行っていただければ、実際にサブスクリプションをお持ちの場合と同じ内容のテクニカルサポートをご利用いただくことが出来ますのでぜひご利用ください。（初回利用より30日間）

また、製品をご購入をご検討のお客様は こちらのページ よりお気軽にお問い合わせください。そのほか、製品デモ や、弊社製品そのものに関するご相談だけでなく、システム開発における様々なご相談も実施可能な無料相談会も随時受け付けています。

開発全般に関するご相談はお任せください！

インフラジスティックス・ジャパンでは、各開発プラットフォームの技術トレーニング、コンサルテーションの提供、開発全般のご支援を行っています。

https://jp.infragistics.com/service-and-support/professional-service

「古い技術やサポート終了のプラットフォームから脱却する必要があるが、その移行先のプラットフォームやフレームワークの検討が進まない、知見がない。」

「新しい開発テクノロジーを採用したいが、自社内にエキスパートがいない。日本語リソースも少ないし、開発を進められるか不安。」

「自社のメンバーで開発を進めたいが、これまで開発フェーズを外部ベンダーに頼ってきたため、ツールや技術に対する理解が乏しい。」

「UIを刷新したい。UIデザインやUI/UXに関する検討の進め方が分からない。外部のデザイン会社に頼むと、開発が難しくなるのではないか、危惧している。」

といったご相談を承っています。

お問い合せはこちらからお気軽にご相談ください。

技術サポート・無料オンライン相談会をご利用ください

インフラジスティックスのUI製品は多くの機能を備えているためドキュメントの情報量も多く、なかなかお探しの情報に辿り着けない場合もあります。そういった際はお気軽に技術サポートや、製品導入支援担当との無料オンライン相談会をご予約いただくことで検証時間を節約可能ですので、ぜひご活用ください。

技術サポートへの問い合わせ方法を確認する

無料オンライン相談会を予約する

Discussion