ホームページ  >  記事  >  ウェブフロントエンド  >  ローカリゼーションの簡素化

ローカリゼーションの簡素化

WBOY
WBOYオリジナル
2024-08-09 07:37:521089ブラウズ

ローカリゼーションは不可欠ですが、現代の Web 開発では面倒なことがよくあります。翻訳ファイルの管理、一貫性の確保、更新の統合は、特に大規模なコードベースでは膨大な作業になる可能性があります。従来の i18n ライブラリでは、開発者がこれらの複雑さを手動で処理する必要があり、非効率性や潜在的なエラーにつながります。

既存の i18n ライブラリの問題

既存の i18n ライブラリの多くは、開発者に次のことを要求します。

  • JSON ファイルを手動で作成して管理する: 開発者は翻訳用に JSON ファイルを作成して更新する必要がありますが、これはエラーが発生しやすく、時間がかかる可能性があります。
  • すべての翻訳を 1 つのファイルに保存します: これにより、大規模なアプリケーションの翻訳の管理が困難になる可能性があり、その結果、ファイルが肥大化して移動が困難になる可能性があります。
  • 任意のキーを使用します: 実際のテキストに対応しない単純なキーにより、コードベース内の特定の翻訳を検索することが困難になります。

これらの課題によりオーバーヘッドと複雑さが増大し、ローカリゼーションが恐ろしい作業となります。

私の対処法

私は、ローカリゼーションを簡単かつ手間のかからないように設計された機能でこれらの問題点に対処する、JS ライブラリとその周りのエコシステムを作成しました。

自動翻訳ファイル生成

統合された ESLint プラグインを使用して、localang-i18n-js はコード内のテキストに基づいて翻訳ファイルを自動的に生成します。これは、JSON ファイルを手動で作成または更新する必要がなくなることを意味します。このプラグインにより、翻訳ファイルが常に最新かつ正確であることが保証されます。

Simplify Localization

ローカライズされた翻訳ファイル

翻訳ファイルは、対応するコード ファイルのすぐ隣に配置されます。このローカライズされたアプローチにより、各コンポーネントまたはモジュールには独自の翻訳ファイルのセットがあるため、翻訳の管理が容易になります。

テキストベースのキー

localang-i18n-js は、任意のキーを使用する代わりに、実際のテキストをキーとして使用します。これにより、コードベース内で特定の翻訳を簡単に検索して見つけることができます。 UI にテキストの一部が表示された場合は、その正確なテキストを検索することで、コード内でそのテキストをすぐに見つけることができます。

たとえば、index.js ファイルに i18n('What is love?') と i18n('{count} left') を記述すると、その隣に次のような Index.i18n.js ファイルが作成されます。以下の内容:

import { makeI18n } from 'localang-i18n-js';
// or const { makeI18n } = require('localang-i18n-js');

const keyset = {
    'What is love?': {
        en: 'What is love?',
        ar: '',
    },
    '{count} left': {
        en: {
            zero: 'Nothing left',
            one: 'One left',
            two: 'Two left',
            few: 'A few left',
            many: 'Many left',
            other: '{count} left',
        },
        ar: {
            zero: '',
            one: '',
            two: '',
            few: '',
            many: '',
            other: ''
        },
    },
};

export const i18n = makeI18n(keyset);
// or module.exports = makeI18n(keyset);

SaaSの統合

localang-i18n-js は、翻訳を管理するための SaaS プラットフォームと統合されており、開発者以外でもコードベース内で直接翻訳を更新できるようになります。これは、ローカリゼーション チームが開発者の関与を必要とせずに更新を処理できることを意味し、プロセスを合理化し、エラーのリスクを軽減します。

自動化のための GitHub アクション

ローカリゼーション プロセスをさらに効率化するために、localang-i18n-js では翻訳ファイルの自動同期に GitHub Actions を使用できるようになりました。ワークフローを設定して、翻訳プラットフォームから最新の翻訳を取得したり、コードベースから直接新しい翻訳をプラットフォームにプッシュしたりできます。この自動化により、手動介入なしで翻訳が常に最新の状態になります。

以上がローカリゼーションの簡素化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。