⚓️ 👨🏿‍🔬 🕰️ Reactでのアプリケーションの国際化（だけでなく） 🦊 🚆 🕍

最近、Formsy-Reactコンポーネントを使用してReactでフォームを便利に検証する方法に関する記事を書きました。今日は、開発したアプリケーションを国際化するために使用したアプローチについてお話したいと思います。おまけとして、使用するライブラリは複数化の可能性を追加します。これは、多言語アプリケーションを開発するときに非常に便利な機能です。興味があれば、カットをお願いします！

私はこの目的に適したライブラリを探すのに多くの時間を費やしました。そして、私がまだそれを見つけたとき、開発者は通常のドキュメントを書くのが面倒だったので、私は長い間それを正しく使用する方法を理解できませんでした。ライブラリ自体はi18nextです。それは多くの可能性を提供しますが、この記事ではそのうちの2つを検討します。

1.国際化。 i18nextを使用すると、特定の言語ごとに単語の辞書を作成し、テキストの代わりにアプリケーション内でこれらの辞書の変数を作成できます。コンポーネントが初期化されると、言語が選択され、必要な辞書の単語が変数に自動的に置き換えられます。以下に、完全なソースコードが記載されたリポジトリへのリンクを示します。テストアプリケーションの小さな断片を示します。

英語とロシア語の2つの言語を使用します。それらはそれぞれファイルen.jsonとru.jsonに保存されます。辞書は次のようになります。

en.json

{ "en": { "translation": { "test_message": "This is a test message" } } }

ru.json

 { "ru": { "translation": { "test_message": "  " } } }

テキストのキーの名前（この場合はtest_message）は、すべての辞書で一致する必要があることに注意してください。この例では、コンポーネント内で使用できるキーが1つあります。これを行うには、コンポーネント（componentWillMount（）関数内）を初期化する前に、デフォルトの言語（英語など）を設定します

 componentWillMount() { this.setLanguage('en'); }

setLanguage（）関数は次のようになります。

 setLanguage(language) { i18next.init({ lng: language, resources: require(`json!./${language}.json`) }); this.props.actions.changeLanguage(i18next); }

パラメータでは、言語の名前を渡し、それを使用してライブラリを初期化します。重要な点は、初期化関数内で、lngキーの値は辞書内の言語の名前に対応している必要があります（この場合、en.jsonファイル内の最初のオブジェクトのように、lng == en）。リソースには、辞書ファイルへのパスを渡す必要があります。 json-loaderを使用したため、関数は次のようになります。また、コンポーネントの状態を更新することを忘れないでください。そうしないと、言語が変更され、レンダリングが呼び出されず、テキストも変更されません。

基本的な準備が完了しました。これで、コンポーネント内で国際化の使用を開始できます。

 render() { return ( <div> <div> <Button bsStyle="primary" onClick={this.setLanguage.bind(this, 'en')}>English</Button> <Button bsStyle="primary" onClick={this.setLanguage.bind(this, 'ru')}></Button> </div> <div>{i18next.t('test_message')}</div> </div> ) }

上部には言語ごとに2つのボタンがあり、クリックすると言語が変更されます。バインドを使用することが重要です。そうしないと、setLanguage関数が無限に呼び出され、ループが発生します。レンダリング後、奇妙な構造i18next.t（ 'test_message'）の代わりに、インストールされた言語に応じて、ユーザーに正しい翻訳、つまり、これはテストメッセージまたはこれはテストメッセージになります。

これが本質的にすべてです。これが、i18nextライブラリを使用したアプリケーションの国際化が簡単に機能する方法です。さて、約束されたように、別の便利なライブラリ機能-複数形を考えてください。

2.複数化。つまり、この用語は、量的な属性に応じて単語の終わりが変わることを意味します。たとえば、英語では、最後にs（1台の車-> 5台の車）が単語に追加されます。しかし、ロシア語では状況が少し悪くなります。これは、単語ごとに3つの異なる終了オプションがあるためです。たとえば、1バナナ、2バナナ、5バナナです。もちろん、アプリケーション内では「Number of bananas：2」などの操作を実行できますが、それほど印象的ではありません。 i18nextを使用すると、この状況を非常に簡単に修正できます！

図書館のウェブサイトには、各言語の異なるエンディングがいくつあるかを示すpluraformsプレートがあります。ロシア語には3つあります。

この関数を使用するには、辞書に次のキーを追加する必要があります。

en.json

  "amount_of_bananas": "{{count}} banana", "amount_of_bananas_plural": "{{count}} bananas"

コンポーネントをレンダリングするとき、カウントに応じて送信される数字に応じてオプションが選択されます。つまりコンポーネント内に1を渡すと、最初のオプションが選択され、それ以外の場合は2番目のオプションが選択されます。ライブラリはどのオプションを選択するかをどのように理解していますか？ 2番目のキーは_pluralで終わります。これは、ライブラリが選択するのに役立ちます。各言語には語尾があります。これらの表は、私が上に残したリンクの表で見つけることができます。たとえば、ロシア語の場合、辞書は次のようになります。

  "amount_of_bananas_0": "{{count}} ", "amount_of_bananas_1": "{{count}} ", "amount_of_bananas_2": "{{count}} "

つまりコンポーネントでは、1を転送すると「1バナナ」が、2-「2バナナ」を転送すると5-「5バナナ」が転送されます。単語の翻訳を1つまたは別の量に設定することは非常に便利です。

その結果、コンポーネントに戻ると、次のようになります。

 <div>{i18next.t('amount_of_bananas', {count: 5})}</div>

、出口で「5バナン」または「5バナナ」を受け取る場所

そのため、非常に簡単に、アプリケーションをサポートする必要のある言語に翻訳できます。辞書についても言うべきです。この場合、2つの単語しかありませんが、大規模なアプリケーションではさらに多くの単語があります。言語編成の選択はあなた次第です。これは、コンポーネントへのブレークダウン、または何らかの理由で繰り返しを避けるために（たとえば、ボタン、フォームなど）のいずれかです。

ご覧いただきありがとうございます！

例付きのリポジトリへのリンク-https://github.com/theWaR13/i18next-example

Reactでのアプリケーションの国際化（だけでなく）

More articles: