著者:
    作成:2026-06-14最終更新:2026-06-14

    Intlayer v9の新機能

    Intlayer v9へようこそ！このメジャーリリースは、主要なi18nライブラリ（react-i18next、next-intl、vue-i18nなど）向けの互換アダプターパッケージにより、Intlayerへの移行パスを簡素化し、コレクション、バリアント、動的レコードといったリッチなコンテンツ構造のサポートを追加することで、大きな節目となります。

    目次

    互換アダプターパッケージ

    人気のi18nライブラリからIntlayerへの移行がこれまで以上に簡単になりました。標準のi18nライブラリとまったく同じ公開APIを公開しつつ、すべての翻訳作業をIntlayerにランタイムで委譲する5つの互換パッケージを作成しました。

    厳密な型付けで同じ公開APIを公開

    インポートを置き換えるだけで、最小限のコード変更でIntlayerのすべての利点（実際の辞書に対するコンパイル時の型安全性を含む）を得ることができます。

    • @intlayer/i18next
    • @intlayer/react-i18next
    • @intlayer/next-intl
    • @intlayer/next-i18next
    • @intlayer/vue-i18n

    例えば、次のように変更するだけです。

    ts
    import { useTranslation } from "react-i18next";

    を次のように変更します。

    ts
    import { useTranslation } from "@intlayer/react-i18next";

    これにより、キーはIntlayer辞書に対して厳密に型付けされ、IDEで完全なドットパスのオートコンプリートが提供されます！

    バンドラーエイリアスプラグイン (Vite, Next.js, Turbopack)

    すべてのインポートステートメントを手動で書き換えることなく移行できるように、各互換アダプターパッケージには、/pluginサブパスの下にカスタムバンドラープラグイン（ViteまたはNext.js）が含まれています。

    これらのプラグインは、ビルド時に既存のインポート（例：react-i18nextやnext-intl）を自動的に@intlayer/*の同等物に書き換えます。

    Next.js (Webpack / Turbopack) の例

    withIntlayerの代わりに、互換プラグインでNext.jsの設定をラップします。

    next.config.ts
    import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";import type { NextConfig } from "next";const withIntlayer = createNextI18nPlugin();const nextConfig: NextConfig = {};export default withIntlayer(nextConfig);

    Vite (React, Vue, Solid, Svelte) の例

    vite.config.ts
    import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";export default defineConfig({  plugins: [vueI18nVitePlugin()],});

    共通化されたランタイムリゾルバー

    すべての互換アダプターは、単一の高度に最適化されたランタイムパーサーである@intlayer/core/messageFormatを介して翻訳解決をルーティングするようになりました。

    • メッセージ補間: 標準の{{var}}（空白とドットパス）、ICU形式の引数（{v, number, percent}など）、および裸の{var}テンプレートを解決します。
    • メッセージノードリゾルバー: ネストされたノードを解決します：insert()、plural()（CLDR複数形ルール）、enu()（列挙）、gender()、HTMLタグ、配列、および呼び出し可能な関数ノード。
    • トークン化されたタグパーサー: インラインXML/HTMLタグと番号付きタグ（例：<1>children</1>)をサポートし、リッチテキストレンダリングをすぐに利用できるようにします。

    機能仕様：コレクション、バリアント、動的レコード

    Intlayer v9は、静的なキーと値のオブジェクトを超えて拡張され、辞書がエンドツーエンドで完全に型付けされた動的なレイアウト構造を宣言できるようになりました。

    1. コレクション

    CMSで管理される順序付きアイテムのリスト（例：FAQ、製品、ブログリスト）を定義します。

    faq.content.ts
    import { t, type Dictionary } from "intlayer";export default {  key: "faq",  content: [    {      question: t({        ja: "Intlayerとは何ですか？",        en: "What is Intlayer?",        fr: "Qu'est-ce qu'Intlayer ?",      }),      answer: t({        ja: "i18nツールキットです。",        en: "An i18n toolkit.",        fr: "Une boîte àツール i18n.",      }),    },  ],} satisfies Dictionary;

    使用法：

    ts
    // Fetch all itemsconst allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[]// Fetch single item by indexconst faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: string }

    2. バリアント

    A/Bテスト、季節限定ヘッダー、機能フラグ、またはカスタムランディングページを提供します。

    hero.content.ts
    import { t, type Dictionary } from "intlayer";export default {  key: "hero-banner",  variant: "default",  content: {    control: t({ ja: "ようこそ", en: "Welcome", fr: "Bienvenue" }),    black_friday: t({      ja: "今すぐ購入",      en: "Shop now",      fr: "Acheter maintenant",    }),  },} satisfies Dictionary;

    使用法：

    ts
    const banner = useIntlayer("hero-banner", { variant: "black_friday" });

    3. 動的レコード

    クエリIDを介してランタイムで動的にエントリがロードされる辞書を定義します。

    product.content.ts
    import { t, type Dictionary } from "intlayer";export default {  key: "product-copy",  meta: {    id: "prod_123",    category: "books",  },  content: {    title: t({ ja: "クリーンコード", en: "Clean Code", fr: "Code Propre" }),  },} satisfies Dictionary;

    使用法：

    ts
    // Fetches only the requested item dynamically (requires Suspense)const product = useIntlayer("product-copy", {  id: "prod_123",  category: "books",});

    動的ロードとバンドルサイズの最適化

    バンドルを極めて小さく保つため、Intlayer v9は動的な遅延ロードをサポートしています。

    設定で、importModeを'dynamic'または'fetch'に設定します。

    intlayer.config.ts
    export default {  dictionary: {    importMode: "dynamic", // "static" | "dynamic" | "fetch"  },};

    ビルド時、@intlayer/swcと@intlayer/babelはファイルをスキャンし、useIntlayer / getIntlayerの呼び出しをツリーシェイク可能なラッパー（useDictionary / useDictionaryDynamic）に置き換えます。選択されたコレクションアイテム、バリアント、またはロケールに必要なコンテンツのみがロードされ、本番バンドルに未使用の翻訳が含まれるのを防ぎます。

    v8からの移行に関する注意点

    v8からアップグレードする場合、v9には破壊的変更は含まれていません。ただし、主な変更点は次のとおりです。

    • ロケールと方言: 外部i18n依存関係を使用している場合、設定またはバンドラーセットアップにそれぞれの互換アダプタープラグインを追加して、インポートを自動的に書き換えるようにします。
    • カスタムセレクター: useIntlayerを呼び出す際、2番目のパラメーターは{ locale, item, variant, id }を含むオプションオブジェクトのために予約されるようになりました。以前にロケール文字列を直接渡していた場合でも引き続き可能ですが、高度な選択にはオプションオブジェクトの使用が推奨されます。

    役立つリンク

    Language Server Protocol
    v8