🌏
`express-intlayer` を使って Express バックエンドに国際化 (i18n) を導入する方法

2024/12/11に公開
JavaScript
 なぜバックエンドを国際化するのか？バックエンドを国際化することで、アプリケーションがグローバルなユーザー層と効果的にコミュニケーションできるようになります。ユーザーの好みの言語でコンテンツを提供することで、ユーザー体験を向上させ、アプリのアクセシビリティを高めることができます。以下は、バックエンドを国際化する実用的な理由の一部です：

ローカライズされたエラーメッセージ：ユーザーの母国語でエラーメッセージを表示し、混乱やストレスを軽減します。

多言語対応のコンテンツ取得：データベースから多言語対応のコンテンツを提供することで、ECサイトやコンテンツ管理システムに最適です。

ローカライズされたメールや通知：トランザクションメール、マーケティングキャンペーン、またはプッシュ通知をユーザーの好みの言語で送信し、エンゲージメントを高めます。

ユーザーとのコミュニケーション向上：SMSメッセージ、システムアラート、UI更新などをユーザーの言語で配信することで、明確さが増し、全体的な体験が向上します。
バックエンドの国際化は文化的な違いを尊重するだけでなく、アプリケーションをより広いユーザー層に届けることができ、グローバル展開を容易にします。

 express-intlayer の紹介express-intlayer は、Express アプリケーション向けのミドルウェアで、ローカライゼーションをバックエンドで簡単に実現できます。intlayer エコシステムとシームレスに統合され、以下のような特徴を持っています：

簡単なセットアップ：ユーザーのロケールに基づいてレスポンスを提供する設定が簡単。

TypeScript サポート：TypeScript の静的型付けを活用して翻訳キーを管理し、エラーを減少。

柔軟な設定：ヘッダーやクッキーなど、ロケールの検出方法をカスタマイズ可能。
詳細については、公式ドキュメント を参照してください。

 導入手順express-intlayer を Express アプリケーションで使用する手順を説明します。

 ステップ 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 ミドルウェアの統合express-intlayer を Express アプリケーションに統合します。以下は src/index.ts での設定例です：
import express, { type Express } from "express";
import { intlayer, t } from "express-intlayer";

const app: Express = express();

// intlayer ミドルウェアを使用
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.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`);
});
この設定では：

intlayer ミドルウェアが Accept-Language ヘッダーからユーザーのロケールを検出します。

t() 関数が検出されたロケールに基づいて適切な翻訳を返します。
リクエストされた言語が利用できない場合、デフォルトロケール（ここでは英語）にフォールバックします。

 ロケール検出のカスタマイズデフォルトでは、express-intlayer は Accept-Language ヘッダーを使用してユーザーの優先言語を決定します。ただし、intlayer.config.ts でこの動作をカスタマイズできます：
import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // その他の設定オプション
  middleware: {
    headerName: "my-locale-header",
    cookieName: "my-locale-cookie",
  },
};

export default config;
この柔軟性により、カスタムヘッダーやクッキーなどを使用してロケールを検出でき、さまざまな環境やクライアントタイプに適応できます。

 TypeScript を活用した堅牢な i18nexpress-intlayer は TypeScript で構築されており、国際化プロセスに強力な型付けを提供します。これにより以下のメリットがあります：

型安全性：コンパイル時に翻訳キーの不足を検出。

メンテナンス性向上：TypeScript のツールを活用して翻訳の管理と更新が容易。

生成された型：翻訳が正しく参照されていることを確認するため、生成された型（デフォルトでは ./types/intlayer.d.ts）を tsconfig.json に含めます。

 まとめexpress-intlayer を使用して Express バックエンドに国際化を追加することは、アプリケーションをよりアクセス可能でユーザーフレンドリーにする賢い選択です。その簡単なセットアップ、TypeScript サポート、および柔軟な設定オプションにより、ローカライズされたコンテンツや通信を提供するプロセスが簡素化されます。
バックエンドを多言語対応にしたいですか？ 今すぐ express-intlayer を使い始めて、世界中のユーザーにシームレスな体験を提供しましょう。
詳細な設定オプションや高度な使用パターンについては、公式ドキュメント をご覧いただくか、GitHub リポジトリ を訪問してソースコードを探索し、貢献してください。
`express-intlayer` を使って Express バックエンドに国際化 (i18n) を導入する方法

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

`express-intlayer` の紹介

導入手順

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

ステップ 2: 設定

ステップ 3: Express ミドルウェアの統合

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

TypeScript を活用した堅牢な i18n

まとめ

Discussion
