Intlayerを使用したExpressでのバックエンド国際化 (i18n)

皆さん、こんにちは！

最近、ExpressベースのAPIに多言語サポートを追加する必要がありました。ユーザーの希望する言語に応じて翻訳されたコンテンツでバックエンドが応答するようにしたい方のために、簡単なチュートリアルを共有したいと思います。

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

バックエンド国際化の実際的なユースケースをいくつか紹介します：

• ユーザーの言語でバックエンドエラーを表示: エラーメッセージをユーザーの母国語で表示することで、理解を深め、フラストレーションを軽減します。これにより、フロントエンドでマッピングすることなく、エラーを直接トーストで表示できます。

• 多言語対応のメール、プッシュ通知などを送信: 取引、マーケティング、通知のメールを受信者の言語で送信することで、エンゲージメントを高めます。プッシュ通知やSMSメッセージをローカライズして、明確さを確保し、ユーザーエクスペリエンスを向上させます。

• 多言語コンテンツの取得: データベースから複数の言語でコンテンツを提供します。

はじめに

インストール

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

npm install intlayer express-intlayer

設定

次に、プロジェクトのルートに intlayer.config.ts ファイルを作成して国際化設定を構成します：

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

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

export default config;

Expressアプリケーションのセットアップ

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

// src/index.ts
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({
      ja: "日本語で返されるコンテンツの例",
      ru: "Пример возвращаемого контента на русском языке",
      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);

互換性

express-intlayer は react-intlayer や next-intlayer とシームレスに動作しますが、さまざまな国際化ソリューションとも互換性があります。

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

デフォルトでは、express-intlayer は Accept-Language ヘッダーを使用してクライアントの希望する言語を決定します。この動作をカスタマイズして、ヘッダーやクッキーを通じてロケールを検出することができます：

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

const config: IntlayerConfig = {
  // 他の設定オプション
  middleware: {
    headerName: "xxx",
    cookieName: "xxx",
  },
};

詳細な構成や機能については、公式ドキュメントやソリューションの公式ウェブサイトをぜひご覧ください。