ホームページ > 記事 > ウェブフロントエンド > ローカリゼーションの簡素化
ローカリゼーションは不可欠ですが、現代の Web 開発では面倒なことがよくあります。翻訳ファイルの管理、一貫性の確保、更新の統合は、特に大規模なコードベースでは膨大な作業になる可能性があります。従来の i18n ライブラリでは、開発者がこれらの複雑さを手動で処理する必要があり、非効率性や潜在的なエラーにつながります。
既存の i18n ライブラリの多くは、開発者に次のことを要求します。
これらの課題によりオーバーヘッドと複雑さが増大し、ローカリゼーションが恐ろしい作業となります。
私は、ローカリゼーションを簡単かつ手間のかからないように設計された機能でこれらの問題点に対処する、JS ライブラリとその周りのエコシステムを作成しました。
統合された ESLint プラグインを使用して、localang-i18n-js はコード内のテキストに基づいて翻訳ファイルを自動的に生成します。これは、JSON ファイルを手動で作成または更新する必要がなくなることを意味します。このプラグインにより、翻訳ファイルが常に最新かつ正確であることが保証されます。
翻訳ファイルは、対応するコード ファイルのすぐ隣に配置されます。このローカライズされたアプローチにより、各コンポーネントまたはモジュールには独自の翻訳ファイルのセットがあるため、翻訳の管理が容易になります。
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);
localang-i18n-js は、翻訳を管理するための SaaS プラットフォームと統合されており、開発者以外でもコードベース内で直接翻訳を更新できるようになります。これは、ローカリゼーション チームが開発者の関与を必要とせずに更新を処理できることを意味し、プロセスを合理化し、エラーのリスクを軽減します。
ローカリゼーション プロセスをさらに効率化するために、localang-i18n-js では翻訳ファイルの自動同期に GitHub Actions を使用できるようになりました。ワークフローを設定して、翻訳プラットフォームから最新の翻訳を取得したり、コードベースから直接新しい翻訳をプラットフォームにプッシュしたりできます。この自動化により、手動介入なしで翻訳が常に最新の状態になります。
以上がローカリゼーションの簡素化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。