[React] react-intlを使ってReactアプリを多言語化(国際化)する(Internationalize React apps)

Reactアプリを多言語化する 定番？ライブラリ react-intlの使い方を紹介します。

定番の理由：

• あの有名なYahoo!社が開発
• 現時点星数6088（同類Componentの中では最多）
• 使いやすい
• ライセンス: BSD-3-Clause

インストール

• 環境：MacBook Air OS X EI Capitan

$ npm install react-intl -save

Safariと IE11以前 のブラウザーの場合は、
intlのインストールも必要です。

npm install intl --save

言語ファイルを作る

ここでは、英語と日本語言語ファイルを作ることにします。

ja_JP.js

const ja_JP = {
            hello: "こんにちは，wang!",
            hello_name: "こんにちは，{ my_name } !"
        }
export default ja_JP;    

en_US.js

const en_US = {
            hello: "Hello, wang!",
            hello_name: "Hello, { my_name } !"
        }    
export default en_US;

注： { my_name }のようにすることで、値をパラメータとして動的に渡すことが可能です。

Coding

(1) インポートと設定

import React from 'react';
import { render } from 'react-dom';
// 言語ファイルをインポート
import zh_CN from './ja_JP';
import en_US from './en_US';
import intl from 'intl';
addLocaleDate([...en,...zh]);

...
...

render(    
        <IntlProvider 
            locale={'en'} 
            messages={en_US}
        >
            <App />
        </IntlProvider>,    
        document.getElementById('container')
);

• 解説

<IntlProvider />で多言語化したいところ(ここでは <App />)を囲めば、
<App />中にある全てのComponentsが言語ファイル設定内容にアクセスすることができなるようになります。

(2) 使ってみる

<FormattedMessage
    id='hello_name'
    description='say hello to wang.'
    defaultMessage='Hello, { my_name }'
    values={
        my_name:this.props.name,
    }
    />

その他

react-intlは 米Yahoo!が Webアプリケーションの多言語対応に向けたJavaScriptライブラリFormatJSの一部です。

FormatJSを利用することで、 Webアプリケーションの国際化を行うことができる。
150以上の言語に対応し、セパレータを使った 数字 や 日時の表現などが可能となります。

たとえば数字「1000.55」は、
英語では「1,000.55」ですが、フランス語では「1000,55」のような場合に活用できます。

参考にしたリンク

http://aifan.jp/react-react-intlを使ってreactアプリを多言語化国際化するinternationalize-reac/
http://www.cnblogs.com/lonelyGentleman/p/6893907.html
http://www.cnblogs.com/videring/articles/7452078.html