express-intlayer: Express.jsアプリケーションを国際化(i18n)するためのJavaScriptパッケージ
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は以下と完全に互換性があります:
また、ブラウザや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パッケージが提供する関数
このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンク