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

hono-intlayer は、Hono アプリケーション向けの強力な国際化 (i18n) ミドルウェアです。クライアントの好みに基づいてローカライズされたレスポンスを提供することで、バックエンド サービスをグローバルにアクセス可能にするように設計されています。

実用的なユースケース

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

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

• 多言語メールの送信: トランザクション メール、マーケティング キャンペーン、通知のいずれであっても、受信者の言語でメールを送信することで、エンゲージメントと効果を大幅に高めることができます。

• 多言語プッシュ通知: モバイル アプリケーションの場合、ユーザーの優先言語でプッシュ通知を送信することで、インタラクションと継続率を向上させることができます。この個人的なタッチにより、通知がより関連性が高く、行動を促すものに感じられます。

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

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

はじめに

See Application Template on GitHub.

インストール

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

npx intlayer init --interactive

--interactive フラグはオプションです。AI エージェントの場合は intlayer-cli init を使用してください。

このコマンドは環境を検出し、必要なパッケージをインストールします。例えば：

npm install intlayer hono-intlayer

設定

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

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

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

export default config;

コンテンツの宣言

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

コンテンツ宣言は、contentDir ディレクトリ (デフォルトは ./src) に含まれている限り、アプリケーションのどこでも定義できます。また、コンテンツ宣言ファイルの拡張子 (デフォルトは .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}) に一致させる必要があります。

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

Hono アプリケーションの設定

hono-intlayer を使用するように Hono アプリケーションを設定します。

import { Hono } from "hono";
import { intlayer, t, getDictionary, getIntlayer } from "hono-intlayer";
import dictionaryExample from "./index.content";

const app = new Hono();

// 国際化リクエスト ハンドラをロード
app.use("*", intlayer());

// ルート
app.get("/t_example", (c) => {
  return c.text(
    t({
      en: "Example of returned content in English",
      fr: "Exemple de contenu renvoyé en français",
      ja: "日本語で返されるコンテンツの例",
    })
  );
});

app.get("/getIntlayer_example", (c) => {
  return c.json(getIntlayer("index").exampleOfContent);
});

app.get("/getDictionary_example", (c) => {
  return c.json(getDictionary(dictionaryExample).exampleOfContent);
});

export default app;

互換性

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

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

また、ブラウザや API リクエストを含むさまざまな環境のあらゆる国際化ソリューションとシームレスに連携します。ヘッダーやクッキーを介してロケールを検出するようにミドルウェアをカスタマイズできます。

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

const config: IntlayerConfig = {
  // ... その他の構成オプション
  routing: {
    storage: [
      { type: "header", name: "my-locale-header" },
      { type: "cookie", name: "my-locale-cookie" },
    ],
  },
};

export default config;

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

構成や高度なトピックの詳細については、ドキュメントをご覧ください。

TypeScript の設定

hono-intlayer は TypeScript の堅牢な機能を活用して、国際化プロセスを強化します。TypeScript の静的型付けにより、すべての翻訳キーが考慮され、翻訳漏れのリスクが軽減され、保守性が向上します。

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

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

VS Code 拡張機能

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

VS Code Marketplace からインストール

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

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

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

Git の設定

Intlayer によって生成されたファイルを無視することをお勧めします。これにより、それらを Git リポジトリにコミットすることを避けることができます。

これを行うには、.gitignore ファイルに次の手順を追加します。

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

よくある質問