i18n & Locales

Multi language : i18n

留学生や海外からの来場者に対応するための翻訳文言の追加・編集、静的 JSON の多言語化、新しい言語の追加方法を解説します。

i18n アーキテクチャ

FesTime では i18next および react-i18next を採用し、ユーザーのブラウザ言語設定に応じて日本語 ja と英語 en を自動判定します。ヘッダーの言語切替ボタンから手動で切り替えることも可能です。

src/i18n/i18n.ts

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import enTranslation from "../../public/locales/en.json";
import jaTranslation from "../../public/locales/ja.json";

const resources = {
  en: {
    translation: enTranslation,
  },
  ja: {
    translation: jaTranslation,
  },
};

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: "en",
    interpolation: {
      escapeValue: false,
    },
    react: {
      useSuspense: true,
    },
  });

export default i18n;

翻訳ファイルの構成と文言の追加

すべての UI テキストは public/locales/ ディレクトリ下の JSON 辞書ファイルで管理されています :

public/locales/ja.json: 日本語辞書
public/locales/en.json: 英語辞書

文言の追加例 (JSON 形式)

新しいメッセージや機能を追加する場合は、ja.json と en.json の双方に同じキー構造でテキストを定義します :

public/locales/ja.json & en.json

// public/locales/ja.json
{
  "CardTitles": {
    "BOOTH": "模擬店",
    "BUS": "バス",
    "LOST_FOUND": "落とし物"
  },
  "Booth": {
    "Details": "タップして詳細",
    "Share": "共有する"
  },
  "Bus": {
    "InNMins": "あと {{count}} 分"
  }
}

// public/locales/en.json
{
  "CardTitles": {
    "BOOTH": "Food Stalls",
    "BUS": "Shuttle Bus",
    "LOST_FOUND": "Lost & Found"
  },
  "Booth": {
    "Details": "Tap for details",
    "Share": "Share"
  },
  "Bus": {
    "InNMins": "in {{count}} min"
  }
}

コンポーネント内での呼び出し

useTranslation フックを使用して辞書キーを指定します。変数の埋め込みも可能です :

import { useTranslation } from "react-i18next";

export function BoothCard() {
  const { t } = useTranslation();

  return (
    <div>
      <h3>{t("CardTitles.BOOTH")}</h3>
      <button>{t("Booth.Details")}</button>

            <span>{t("Bus.InNMins", { count: 5 })}</span>
    </div>
  );
}

静的 JSON データ内の多言語化 (バス停名など)

public/data/bus.json などのマスターデータ内にも、多言語化キー (辞書参照) を使用することができます :

public/data/bus.json

{
  "Outbound": {
    "route": ["Bus.Stops.キャンパス 発", "Bus.Stops.中央駅 着"],
    "time": [
      ["10:00", "10:30"],
      ["11:00", "11:30"]
    ]
  }
}

コンポーネント側で t(route[0]) を通すことで、日本語時は「キャンパス発」、英語時は「From Campus」と自動的に言語に応じた表示へ変換されます。

新しい言語 (中国語・韓国語など) の追加手順

public/locales/zh.json (または ko.json) を新規作成し、JSON形式で翻訳テキストを定義します。
src/i18n/i18n.ts でインポートし、resources オブジェクトに zh: { translation: zhTranslation } を登録します。
設定ダイアログ等の言語セレクタに新しい言語の選択肢 (例: { label: '中文', value: 'zh' }) を追加します。