Intlayerを使ってFastifyバックエンドサイトを翻訳する | 国際化 (i18n)

fastify-intlayer は、Fastifyアプリケーション向けの強力な国際化（i18n）プラグインで、クライアントの設定に基づいてローカライズされたレスポンスを提供し、バックエンドサービスをグローバルに利用可能にすることを目的としています。

実用的なユースケース

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

fastify-intlayer は Fastify アプリケーション向けの強力な国際化 (i18n) プラグインで、クライアントの設定に基づいてローカライズされたレスポンスを返すことでバックエンドサービスをグローバルに利用可能にすることを目的としています。

実用的なユースケース

• ユーザーの言語でバックエンドエラーを表示する: エラー発生時にユーザーの母語でメッセージを表示することで理解が深まり、混乱や不満を軽減できます。これは、トーストやモーダルのようなフロントエンドコンポーネントで表示される動的なエラーメッセージに特に有用です。
• 多言語コンテンツの取得: データベースからコンテンツを取得するアプリケーションでは、国際化によりそのコンテンツを複数言語で配信できます。これは、商品説明や記事、その他のコンテンツをユーザーの希望する言語で表示する必要があるECサイトやコンテンツ管理システムのようなプラットフォームにとって重要です。
• 多言語コンテンツの取得: データベースからコンテンツを取得するアプリケーションでは、国際化によりそのコンテンツを複数の言語で配信できます。これは、商品説明、記事、その他のコンテンツをユーザーが好む言語で表示する必要があるeコマースサイトやコンテンツ管理システム（CMS）などのプラットフォームにとって重要です。
• 多言語メールの送信: 取引メール、マーケティングキャンペーン、通知など、受信者の言語でメールを送ることで、エンゲージメントや効果が大幅に向上します。
• 多言語プッシュ通知: モバイルアプリケーションでは、ユーザーの好む言語でプッシュ通知を送信することで、エンゲージメントとリテンションを向上させることができます。このパーソナルな配慮により、通知がより関連性が高く行動を促しやすく感じられます。
• その他のコミュニケーション: SMS メッセージ、システムアラート、ユーザーインターフェイスの更新など、バックエンドから送られるあらゆる形式のコミュニケーションは、ユーザーの言語で提供されることで明確さが増し、全体的なユーザー体験が向上します。

バックエンドを国際化することで、アプリケーションは文化的差異を尊重するだけでなく、グローバル市場のニーズにもより適合し、サービスを世界規模でスケールさせるための重要なステップとなります。

はじめに

インストール

fastify-intlayer の使用を開始するには、npm を使ってパッケージをインストールします：

npm install intlayer fastify-intlayernpx intlayer init

セットアップ

プロジェクトルートに 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;

コンテンツを宣言する

翻訳を保存するためのコンテンツ宣言を作成および管理します:

import { t, type Dictionary } from "intlayer";const indexContent = {  key: "index",  content: {    exampleOfContent: t({      ja: "英語で返されるコンテンツの例",      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)",    }),  },} satisfies Dictionary;export default indexContent;

コンテンツ宣言は、アプリケーション内の任意の場所に定義できます。ただし contentDir ディレクトリ（デフォルトは ./src）に含まれている必要があります。また、コンテンツ宣言ファイルの拡張子は（デフォルトで）.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx} に一致する必要があります。

詳細はコンテンツ宣言のドキュメントを参照してください。

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

Fastify アプリケーションを fastify-intlayer を使用するように設定します:

import Fastify from "fastify";import { intlayer, t, getDictionary, getIntlayer } from "fastify-intlayer";import dictionaryExample from "./index.content";const fastify = Fastify({ logger: true });javascript fileName="src/index.mjs" codeFormat="esm"// 国際化プラグインを読み込むawait fastify.register(intlayer);// ルートfastify.get("/t_example", async (_req, reply) => {  return t({    ja: "日本語で返されるコンテンツの例",    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)",  });});fastify.get("/getIntlayer_example", async (_req, reply) => {  return getIntlayer("index").exampleOfContent;});fastify.get("/getDictionary_example", async (_req, reply) => {  return getDictionary(dictionaryExample).exampleOfContent;});// サーバーを起動const start = async () => {  try {    await fastify.listen({ port: 3000 });  } catch (err) {    fastify.log.error(err);    process.exit(1);  }};start();

互換性

fastify-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;

デフォルトでは、fastify-intlayer はクライアントの優先言語を判定するために Accept-Language ヘッダーを解釈します。

設定や高度なトピックの詳細については、ドキュメントを参照してください。

TypeScript の設定

fastify-intlayer は TypeScript の強力な機能を活用して国際化プロセスを強化します。TypeScript の静的型付けにより、すべての翻訳キーが網羅されていることが保証され、翻訳漏れのリスクが低減され、保守性が向上します。

自動生成される型（デフォルトでは ./types/intlayer.d.ts）を tsconfig.json ファイルに含めていることを確認してください。

{  // ... 既存の TypeScript 設定  "include": [    // ... 既存の TypeScript 設定    ".intlayer/**/*.ts", // 自動生成された型を含める  ],}

VS Code 拡張機能

Intlayerでの開発体験を向上させるために、公式の Intlayer VS Code Extension をインストールできます。

VS Code Marketplace からインストール

この拡張機能は以下を提供します:

• 翻訳キーのオートコンプリート。
• 翻訳の欠落に対するリアルタイムエラー検出。
• 翻訳コンテンツのインラインプレビュー。
• 翻訳を簡単に作成・更新するためのクイックアクション。

拡張機能の使い方の詳細については、Intlayer VS Code Extension のドキュメントを参照してください。

Git 設定

Intlayerによって生成されるファイルは無視することを推奨します。これにより、それらをGitリポジトリにコミットするのを回避できます。

これを行うには、次の指示を .gitignore ファイルに追加できます:

# Intlayer によって生成されたファイルを無視する.intlayer