React 国際化 ベストプラクティス

React国際化はi18nextに基づいた機能で、アプリを翻訳する際のフォーマットや言語変更の基本を超えたサポートを提供するように設計されています。

「一度学べば、どこでも翻訳できる」をスローガンに掲げており、幅広いプラットフォームで展開しています。 React国際化は、Reactライブラリを使用して作成されたアプリケーションの翻訳に焦点を当てています。  

多くの人気アプリがReactを使用しており、Netflix、Facebook、Instagramなどがあります。 それは、JavaScriptで堅牢なユーザーインターフェースを作成するための比較的シンプルだがパワフルな方法と考えられているため、人気があります。 Reactで設計されたアプリを国際化したい場合は、React国際化を実装する必要があります。

React国際化の基本

React国際化の詳細に入る前に、これともう一つの一般的に議論される翻訳戦略であるローカライゼーションとの違いを理解することが重要です。

国際化

国際化は、特定の市場ではなく、あらゆる市場に向けて製品を準備するプロセスです。 包括的な戦略と考えられています。 たとえば、モバイルアプリを考えるとき、国際化には、外国の通貨、文字、および地域によって異なるその他の情報をサポートするためのフレームワークを確立することが含まれます。

ローカライゼーション

ローカライゼーションは、特定の言語を対象とした技術戦略です。 アプリを翻訳するために必要なすべてのステップが含まれています。例えば、翻訳用の文字列のインポートとエクスポート、翻訳が完了した際のアプリの再構築などです。Reactはユーザーインターフェース開発の非常に人気のあるオプションであるため、特定の国際化とローカリゼーションのサポートが必要です。 それはFacebookのチームによって開発されましたが、ほぼ誰でも使用することができます。 その国際化コンポーネントは別のフレームワークであるi18nextに基づいています。 モバイルアプリの場合、React国際化は3つの特定のコンポーネントに役立ちます。

• 位置検出: プログラムは、ユーザーの位置を理解し、その特定の領域に基づいて表示されるアプリを調整できます。
• フォーマット： これには、タイトル、記号、アイコン、色など、ユーザーインターフェイスに特に関連するコンポーネントの翻訳が含まれます。
• 場所特有のコンテンツ: 地域によって変わるコンテンツ、例えば通貨、時間、日付、さらにはキーボード形式などについては、このセグメントで取り上げられています。

これらの3つの分野に対するサポートがあることは、海外市場で強力なプログラムを展開するために大いに役立ちます。 Reactの国際化はパワフルなフレームワークですが、制限がないわけではありません。 複数の複数形を持つ言語をサポートすることは難しい場合があり、双方向テキストを管理することも同様です。 また、画像にテキストが含まれている場合も問題が発生しやすいため、翻訳前にグラフィックからテキストを削除する方が賢明かもしれません。 それ以外は、ベストプラクティスは、どのアプリ翻訳戦略でも同じコンポーネントを中心に据えます。

React国際化のベストプラクティス

React国際化は単なるフレームワークであり、コーディングの問題を修正したり、翻訳の問題を解決したりするものではありません。 その結果、以下のベストプラクティスの多くは、モバイルアプリの国際化プロジェクトで活用されるものに由来しています。

• コードを標準化します。 多くの開発者は自分の作業方法を持っていますが、アプリを国際化する際には、コードが一貫している必要があるため、それが成功に結びつくわけではありません。 これは、変数の扱いと全体的なライティング基準を標準化することを意味します。 出発点を明確にすることで、後でローカライゼーションフェーズに移行する際の多くの問題を回避できます。
• 言語オプションを慎重に確認してください。 Reactの国際化は幅広い言語をサポートできますが、アプリを配布する可能性が高いApp StoreやGoogle Playのようなプラットフォームでは、同じオプションがないかもしれません。 大きな計画を立てる前に、これらの人気のあるチャネルで利用可能な選択肢を確認することが非常に重要です。
• バッファーを構築します。 言語は、翻訳されると縮小および拡張することがあり、場合によっては非常に広範囲に及ぶことがあります。 ドイツ語の「Streichholzschächtelchen」を考えてみましょう。 この24文字の巨獣は、英語で「マッチ箱」を意味します。 通常、それほど長い単語に備える必要はありませんが、テキストの拡張と膨張に対応するために30％のバッファを追加するのは賢明です。
• テストと再テスト: 強力な品質保証（QA）プロセスと、ユーザーや開発者からのフィードバックを受け取るためのチャネルが必要です。 ターゲット市場のベータテストは、ユーザーインターフェースについての彼らの考えや改善方法についての良いアイデアを提供してくれます。
• 継続的なローカライゼーションアプローチを確立する: アプリは多くの更新を見ます。 すべての言語でそれらを最新の状態に保つことは、特に手動プロセスを使用する場合、簡単な作業ではありません。 戦略を策定し、案件の自動トリガーとコンテンツのインポートおよびエクスポートを可能にすることで、ここでの取り組みが効率化されます。  

React国際化は、製品を新しい市場に翻訳する際にサポートしてくれるライブラリに過ぎず、すべての作業を行うわけではありません。 ただし、ベースラインレベルのベストプラクティスに従って、アプリを新しい市場向けに準備する必要があります。 これが、技術先進的でコード戦略の指導も可能な翻訳会社と協力することが賢明である理由です。  

‍