Express-intlayer を使用して Express バックエンド API を変換する (i)

さまざまな国や言語のユーザーに対応するアプリケーションを作成すると、アプリのリーチとユーザー満足度が大幅に向上します。 Express-Interlayer を使用すると、Express バックエンドに国際化 (i18n) を追加するのが簡単かつ効率的になります。この投稿では、Express-intlayer を設定して Express アプリケーションを多言語にし、世界中のユーザーのエクスペリエンスを向上させる方法を説明します。

バックエンドを国際化する理由

バックエンドを国際化すると、アプリケーションが世界中のユーザーと効果的に通信できるようになります。ユーザーの好みの言語でコンテンツを提供することで、ユーザー エクスペリエンスを向上させ、アプリをよりアクセスしやすくすることができます。バックエンドの国際化を検討する実際的な理由をいくつか示します:

• ローカライズされたエラー メッセージ: 混乱やフラストレーションを軽減するために、ユーザーの母国語でエラー メッセージを表示します。
• 多言語コンテンツの取得: データベースからコンテンツを多言語で提供し、電子商取引サイトやコンテンツ管理システムに最適です。
• ローカライズされた電子メールと通知: トランザクション電子メール、マーケティング キャンペーン、またはプッシュ通知を受信者の優先言語で送信して、エンゲージメントを高めます。
• ユーザー コミュニケーションの強化: SMS メッセージ、システム アラート、UI アップデートのいずれであっても、それらをユーザーの言語で配信することで明確さが確保され、全体的なエクスペリエンスが向上します。

バックエンドを国際化すると、文化的な違いが尊重されるだけでなく、アプリケーションがより幅広いユーザーに開かれ、グローバルに拡張しやすくなります。

Express-Interlayer の紹介

express-intlayer は、Express アプリケーション用に設計されたミドルウェアで、バックエンドでのローカリゼーションを処理するために intlayer エコシステムとシームレスに統合します。これが素晴らしい選択である理由は次のとおりです:

• 簡単なセットアップ: ユーザーのロケール設定に基づいて応答を提供するように Express アプリをすばやく構成します。
• TypeScript のサポート: TypeScript の静的型付けを利用して、すべての翻訳キーが確実に考慮され、エラーが削減されます。
• 柔軟な構成: ヘッダー、Cookie、その他の方法を通じてロケールを検出する方法をカスタマイズします。

さらに詳しい情報については、完全なドキュメントを参照してください。

はじめる

Express アプリケーションで Express-intlayer を設定する手順を見てみましょう。

ステップ 1: インストール

まず、好みのパッケージ マネージャーを使用して、express-intlayer を intlayer とともにインストールします。

npm install intlayer express-intlayer

pnpm add intlayer express-intlayer

yarn add intlayer express-intlayer

ステップ 2: 構成

次に、プロジェクトのルートに intlayer.config.ts ファイルを作成します。このファイルは、サポートされているロケールとアプリケーションのデフォルト言語を定義します:

// intlayer.config.ts
import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH_MEXICO,
      Locales.SPANISH_SPAIN,
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

この例では、英語、フランス語、スペイン語 (メキシコ)、およびスペイン語 (スペイン) をサポートしており、英語がデフォルト言語として設定されています。

ステップ 3: 高速ミドルウェア統合

次に、express-intlayer を Express アプリケーションに統合します。 src/index.ts で設定する方法は次のとおりです:

import express, { type Express } from "express";
import { intlayer, t } from "express-intlayer";

const app: Express = express();

// Use intlayer middleware
app.use(intlayer());

// Sample route: Serving localized content
app.get("/", (_req, res) => {
  res.send(
    t({
      en: "Example of returned content in English",
      fr: "Exemple de contenu renvoyé en français",
      "es-ES": "Ejemplo de contenido devuelto en español (España)",
      "es-MX": "Ejemplo de contenido devuelto en español (México)",
    })
  );
});

// Sample error route: Serving localized errors
app.get("/error", (_req, res) => {
  res.status(500).send(
    t({
      en: "Example of returned error content in English",
      fr: "Exemple de contenu d'erreur renvoyé en français",
      "es-ES": "Ejemplo de contenido de error devuelto en español (España)",
      "es-MX": "Ejemplo de contenido de error devuelto en español (México)",
    })
  );
});

app.listen(3000, () => {
  console.info(`Listening on port 3000`);
});

この設定では:

• 内層ミドルウェアは、通常は Accept-Language ヘッダーからユーザーのロケールを検出します。
• t() 関数は、検出されたロケールに基づいて適切な翻訳を返します。
• 要求された言語が利用できない場合は、デフォルトのロケール (この場合は英語) に戻ります。

ロケール検出のカスタマイズ

デフォルトでは、express-intlayer は Accept-Language ヘッダーを使用してユーザーの優先言語を決定します。ただし、この動作は intlayer.config.ts:
でカスタマイズできます。

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // Other configuration options
  middleware: {
    headerName: "my-locale-header",
    cookieName: "my-locale-cookie",
  },
};

export default config;

この柔軟性により、カスタム ヘッダー、Cookie、またはその他のメカニズムを通じてロケールを検出できるため、さまざまな環境やクライアント タイプに適応できます。

他のフレームワークとの互換性

express-intlayer は、次のような intlayer エコシステムの他の部分とうまく連携します。

• React アプリケーション用の react-intlayer
• next-intlayer Next.js アプリケーション

この統合により、バックエンドからフロントエンドまでスタック全体にわたって一貫した国際化戦略が保証されます。

TypeScript を活用して堅牢な i18n を実現する

TypeScript で構築された Express-intlayer は、国際化プロセスに強力な型指定を提供します。これは次のことを意味します:

• タイプ セーフティ: コンパイル時に不足している変換キーをキャッチします。
• 保守性の向上: TypeScript のツールを使用して翻訳の管理と更新が簡単になりました。
• 生成された型: 生成された型 (デフォルトでは ./types/intlayer.d.ts) を tsconfig.json に含めることで、翻訳が正しく参照されるようにします。

まとめ

express-intlayer を使用して Express バックエンドに国際化を追加することは、世界中のユーザーにとってアプリケーションをよりアクセスしやすく、使いやすいものにするための賢明な手段です。 Express-intlayer は、簡単なセットアップ、TypeScript サポート、柔軟な構成オプションにより、ローカライズされたコンテンツと通信の配信プロセスを簡素化します。

バックエンドを多言語にする準備はできていますか? 今すぐ Express アプリケーションで Express-intlayer の使用を開始し、世界中のユーザーにシームレスなエクスペリエンスを提供してください。

詳細、構成オプション、高度な使用パターンについては、公式の完全なドキュメントを確認するか、GitHub リポジトリにアクセスしてソース コードを調べて貢献してください。

以上がExpress-intlayer を使用して Express バックエンド API を変換する (i)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。