express-intlayer: JavaScriptパッケージでExpress.jsアプリケーションを国際化する (i18n)

Intlayerは、JavaScript開発者のために特別に設計されたパッケージのスイートです。React、Next.js、Express.jsなどのフレームワークと互換性があります。

express-intlayerパッケージを使用すると、Express.jsアプリケーションの国際化が可能になります。これは、ユーザーの好ましいロケールを検出し、ユーザーに適切な辞書を返すミドルウェアを提供します。

なぜバックエンドを国際化するのか？

バックエンドの国際化は、効果的にグローバルなオーディエンスにサービスを提供するために不可欠です。これにより、アプリケーションは各ユーザーの好ましい言語でコンテンツやメッセージを提供できます。この機能は、ユーザーエクスペリエンスを向上させ、異なる言語的背景を持つ人々にとって、アプリケーションのリーチを広げます。

実用的なユースケース

• ユーザーの言語でバックエンドエラーを表示する: エラーが発生した場合、ユーザーの母国語でメッセージを表示することで理解が深まり、フラストレーションが軽減されます。これは、トーストやモーダルなどのフロントエンドコンポーネントで表示される可能性のある動的エラーメッセージに特に有用です。

• 多言語コンテンツの取得: データベースからコンテンツを取得するアプリケーションの場合、国際化によりこのコンテンツを複数の言語で提供できます。これは、ユーザーが好む言語で製品の説明、記事、その他のコンテンツを表示する必要がある、eコマースサイトやコンテンツ管理システムなどのプラットフォームにとって重要です。

• 多言語のメールを送信する: 取引メール、マーケティングキャンペーン、通知など、受取人の言語でメールを送信することで、エンゲージメントと効果が大幅に向上します。

• 多言語のプッシュ通知: モバイルアプリケーションにおいて、ユーザーの好ましい言語でプッシュ通知を送信することで、インタラクションと保持を強化できます。この個人的なタッチは、通知をより関連性が高く、行動を促すものに感じさせることができます。

• その他のコミュニケーション: SMSメッセージ、システムアラート、ユーザーインターフェースの更新など、バックエンドからのあらゆる形式のコミュニケーションは、ユーザーの言語で行うことで明瞭さが確保され、全体のユーザーエクスペリエンスが向上します。

バックエンドを国際化することで、アプリケーションは文化的な違いを尊重し、グローバルな市場ニーズにより適合するようになり、サービスを世界中に拡大するための重要なステップとなります。

Intlayerを統合する理由

• 型安全な環境: TypeScriptを活用して、すべてのコンテンツ定義が正確でエラーのないことを保証します。

インストール

好みのパッケージマネージャーを使用して必要なパッケージをインストールします。

npm install express-intlayer

yarn add express-intlayer

pnpm add express-intlayer

Intlayerの設定

Intlayerはプロジェクトを設定するための構成ファイルを提供します。このファイルをプロジェクトのルートに配置します。

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

利用可能なパラメータの完全なリストについては、構成ドキュメントを参照してください。

使用例

express-intlayerを使用するようにExpressアプリケーションを設定します：

import express, { type Express } from "express";import { intlayer, t } from "express-intlayer";const app: Express = express();// 国際化リクエストハンドラをロードapp.use(intlayer());// ルート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)",    })  );});// サーバーを開始app.listen(3000, () => console.log(`Listening on port 3000`));

互換性

express-intlayerは以下と完全に互換性があります：

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

また、さまざまな環境（ブラウザやAPIリクエスト）で動作する任意の国際化ソリューションとシームレスに連携します。ミドルウェアをカスタマイズして、ヘッダーやクッキーを通じてロケールを検出できます：

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  // ... 他の設定オプション  middleware: {    headerName: "my-locale-header",    cookieName: "my-locale-cookie",  },};export default config;

デフォルトでは、express-intlayerはAccept-Languageヘッダーを解釈して、クライアントの好ましい言語を決定します。

express-intlayerパッケージが提供する関数

• t()