React Apps での国際化の設計: スケーラブルなローカリゼーションの包括的なガイド-jsチュートリアル-php.cn

React Apps での国際化の設計: スケーラブルなローカリゼーションの包括的なガイド

Susan Sarandon

リリース： 2024-12-31 02:48:13

オリジナル

699 人が閲覧しました

Architecting Internationalization In React Apps: Comprehensive Guide to Scalable Localization

導入

過去 3 か月間、私は Mega SaaS のアイデアに一人で取り組んできました。これはエキサイティングな旅ではありましたが、課題は膨大でした。ここ 2 週間が近づくにつれ、品質を維持しながら優先度の高いユースケースを提供することが私の最優先事項になりました。

私が直面した重要な決断の 1 つは、複数の言語をサポートするために国際化 (i18n) を統合するかどうかでした。当初、私は英語のみのバージョンで立ち上げ、将来的には翻訳に LLM を活用することに傾きました。しかし、私は 1 人のチームとして、今のところ収益性の高い 1 つの市場に集中することにしました。

私のプロジェクトではオプションですが、法的および規制上の要件により、専門的な設定では国際化が不可欠です。このブログでは、スケーラブルで効率的な i18n アーキテクチャを設計する方法を検討し、複雑さの高さや構造の貧弱さなどの落とし穴を回避し、個人の開発者とチームの両方に利益をもたらす洞察を提供します。

私は自分のプロジェクトに i18n を実装しないことに決めたので、他の人 (そして将来の私!) を助けるためにこのガイドを共有します。

目標

優れた国際化システムは次のことを行う必要があります:

スケーラビリティ: 翻訳と言語更新のためのチーム間のシームレスなコラボレーションをサポートします。
モジュール性: オーバーヘッドなしで簡単に拡張できるシンプルな構造を維持します。
予測可能性: ローカリゼーションのための一貫した強制可能なパターンに従います。
初心者向け: さまざまなスキルレベルの開発者がアクセスできます。

利用可能なツール

JavaScript での国際化については、いくつかの一般的なツールを次に示します。

i18next: スケーラブルなプロレベルのローカリゼーションに最適な、成熟した機能豊富なライブラリです。
代替案: FormatJS、Polyglot.js、LinguiJS、GlobalizeJS、Mozilla の Fluent。

各ツールには長所と短所があります。わかりやすくするために、このガイドでは i18next に焦点を当てます。

アーキテクチャの設計

国際化のためのフォルダー構造

アーキテクチャは、3 つの主要コンポーネントを含む i18n フォルダーを中心にしています。

翻訳フォルダー: 各言語の JSON ファイル (en.json、ar.json、ch.json など) と新しい言語の Base.json テンプレートを保存します。
index.js: i18n ライブラリ (i18next など) を構成および初期化し、フォールバック言語やその他のオプションを設定します。
keys.js: 一貫性を確保し重複を回避する、変換キーを定義する集中構造。

フォルダー構造の例:

src/
├── i18n/
│   ├── translations/
│   │   ├── en.json       # English translations
│   │   ├── ar.json       # Arabic translations
│   │   ├── ch.json       # Chinese translations
│   │   └── base.json     # Template for new languages
│   ├── index.js          # i18n configuration
│   └── keys.js           # Centralized keys for consistency

ログイン後にコピー

中央ハブとしてのkeys.js

keys.js ファイルはプロジェクトの構造を反映し、機能またはモジュールごとにキーをグループ化します。この構造により、キーの管理が直感的かつ拡張可能になります。

key.js の例:

const keys = {
  components: {
    featureA: {
      buttonText: "components.featureA.buttonText",
      label: "components.featureA.label",
    },
    featureB: {
      header: "components.featureB.header",
    },
  },
};

export default keys;

ログイン後にコピー

翻訳ファイル

翻訳 JSON ファイルは、keys.js の構造と一致し、一貫性が確保されます。

en.json の例:

{
  "components": {
    "featureA": {
      "buttonText": "Submit",
      "label": "Enter your name"
    },
    "featureB": {
      "header": "Welcome to Feature B"
    }
  }
}

ログイン後にコピー

ar.json の例:

{
  "components": {
    "featureA": {
      "buttonText": "إرسال",
      "label": "أدخل اسمك"
    },
    "featureB": {
      "header": "مرحبًا بكم في الميزة ب"
    }
  }
}

ログイン後にコピー

i18next のセットアップ

i18next とその React 統合をインストールします:

npm install i18next react-i18next

ログイン後にコピー

i18n/index.js:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "./translations/en.json";
import ar from "./translations/ar.json";

i18n.use(initReactI18next).init({
  resources: { en: { translation: en }, ar: { translation: ar } },
  lng: "en", // Default language
  fallbackLng: "en",
  interpolation: { escapeValue: false }, // React handles escaping
});

export default i18n;

ログイン後にコピー

i18n をコンポーネントに統合する

コンポーネントの例 (機能 A):

import React from "react";
import { useTranslation } from "react-i18next";
import keys from "../../i18n/keys";

const FeatureA = () => {
  const { t } = useTranslation();

  return (
    <div>
      <h2>Feature A</h2>
      <button>{t(keys.components.featureA.buttonText)}</button>
      <label>{t(keys.components.featureA.label)}</label>
    </div>
  );
};

export default FeatureA;

ログイン後にコピー

言語スイッチャーの追加

言語スイッチャーを使用すると、ユーザーは言語を切り替えることができます。

LanguageSwitcher.jsx:

import React from "react";
import { useTranslation } from "react-i18next";

const LanguageSwitcher = () => {
  const { i18n } = useTranslation();

  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang);
  };

  return (
    <div>
      <button onClick={() => changeLanguage("en")}>English</button>
      <button onClick={() => changeLanguage("ar")}>العربية</button>
    </div>
  );
};

export default LanguageSwitcher;

ログイン後にコピー

最終的なフォルダー構造

src/
├── components/
│   ├── featureA/
│   │   ├── index.jsx
│   │   └── featureAStyles.css
│   └── shared/
│       └── LanguageSwitcher.jsx
├── i18n/
│   ├── translations/
│   │   ├── en.json
│   │   ├── ar.json
│   │   └── base.json
│   ├── keys.js
│   └── index.js
├── App.jsx
├── index.js

ログイン後にコピー

超えていく

翻訳に AI を活用: 迅速な翻訳には LLM を使用します。たとえば、プロンプト:

「次の JSON を中国語に翻訳します: {en.json の内容}。」
バックエンド主導の翻訳: バックエンドで翻訳を一元化し、コードをデプロイせずに動的な更新を可能にします。オプションには、GitOps または専用のバックエンドサービスが含まれます。