フレームワーク統合とベストプラクティス

ts-intl は特定の UI フレームワークに依存しないため、各種フロントエンドおよびバックエンド環境に統合できます。

Astro での利用

静的サイト生成（SSG）や SSR において、ページ生成サイクル内で直接型安全な翻訳関数を取得できます：

---
// src/pages/[lang]/index.astro
import { getTranslations } from "@/i18n";

const { lang } = Astro.params;
const t = getTranslations(lang as any, "home");
---

<section>
  <h1>{t("hero.title")}</h1>
  <p>{t("hero.subtitle")}</p>
</section>

React / Next.js

import React from "react";
import { getTranslations } from "@/i18n";

export function Header({ locale }: { locale: "ja-JP" | "en-US" }) {
  const t = getTranslations(locale, "nav");
  return (
    <nav>
      <a href="/docs">{t("docs")}</a>
      <a href="/pricing">{t("pricing")}</a>
    </nav>
  );
}

Vue 3

<script setup lang="ts">
import { getTranslations } from "@/i18n";

const props = defineProps<{ locale: "ja-JP" | "en-US" }>();
const t = getTranslations(props.locale, "dashboard");
</script>

<template>
  <main>
    <h2>{{ t("title") }}</h2>
  </main>
</template>

Svelte 5

<script lang="ts">
  import { getTranslations } from "$lib/i18n";

  let { locale = "ja-JP" } = $props();
  const t = getTranslations(locale, "common");
</script>

<button>{t("saveChanges")}</button>

エラーハンドリングとフォールバック

開発中や本番運用時の未翻訳検知フック：

import { createI18n, I18nError, I18nErrorCode } from "@aaakul/ts-intl";

export const i18n = createI18n({
  defaultLanguage: "ja-JP",
  messages: { "ja-JP": {} },
  onError(error: I18nError) {
    if (error.code === I18nErrorCode.MISSING_MESSAGE) {
      console.warn(
        `[ts-intl] 翻訳キー "${error.key}" が言語 "${error.lang}" に存在しません`,
      );
    }
  },
  getMessageFallback({ key }) {
    return `[未翻訳: ${key}]`;
  },
});

API リファレンス一覧

createI18n の返り値

トランスレーターメソッド (t)