著者:
    Aymeric PINEAU
    作成:2026-03-31最終更新:2026-08-30

    Intlayerを使用したVanilla JSウェブサイトの翻訳 | 国際化 (i18n)

    ide.intlayer.org
    intlayer-vanilla-template.vercel.app

    目次

    代替手段ではなく Interlayer を使用する理由

    「i18next」や「i18n.js」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。

    Intlayer は、フレームワークに依存しないコンテンツ管理、TypeScript サポート、および国際化 (i18n) の拡張に必要なすべての機能を提供することにより、Vanilla JavaScript と完全に連携するように最適化されています。

    大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、バンドルとページのサイズを最大 50% 削減するのに役立ちます。

    アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの メンテナンスが容易になります。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は完全に型指定されており、コンテンツの正確性を保証します。

    コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって 必要なコンテキストが削減されます。 Intlayer には、翻訳の欠落をテストする CLI、LSP、MCP などのツール スイートも付属しています。および agent skills により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。

    AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する コンパイラー と、バックグラウンドでの翻訳を支援する Web プラットフォーム も提供します。

    大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。

    Intlayer は単なる i18n ソリューションではなく、自己ホスト型 ビジュアル エディター と 完全な CMS を提供します。 リアルタイムで多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。

    Vanilla JSアプリケーションでIntlayerをセットアップするためのステップバイステップガイド

    1. 依存関係のインストール

      npmを使用して必要なパッケージをインストールします：

      bash
      # intlayerとvanilla-intlayerのスタンドアロンバンドルを生成
# このファイルはHTMLファイルにインポートされます
npx intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js

# 設定ファイルを使用してintlayerを初期化
npx intlayer init --no-gitignore

# ディクショナリをビルド
npx intlayer build

      • intlayer 設定管理、翻訳、コンテンツ宣言、トランスパイル、CLIコマンドのための国際化ツールを提供するコアパッケージです。

      • vanilla-intlayer Intlayerを純粋なJavaScript / TypeScriptアプリケーションと統合するパッケージです。パブ/サブシングルトン (IntlayerClient) とコールバックベースのヘルパー (useIntlayer、useLocaleなど) を提供し、UIフレームワークに依存することなく、アプリのあらゆる部分がロケールの変更に反応できるようにします。

      intlayer standalone CLIによるバンドリングエクスポートは、設定に特化した未使用のパッケージ、ロケール、および非本質的なロジック（リダイレクトやプレフィックスなど）をツリーシェイキング（不要なコードの削除）することで、最適化されたビルドを生成します。

    2. プロジェクトの設定

      アーキテクチャ

      このアーキテクチャでは、コア intlayer が JavaScript API を提供し、フロントエンドフレームワークのない標準的な JavaScript または TypeScript 環境で辞書を宣言および利用できるようにします。

      bash
      .
├── src
│   ├── app.content.mjs
│   └── main.js
├── index.html
├── intlayer.config.mjs
└── package.json

      設定

      アプリケーションの言語を設定するための設定ファイルを作成します：

      intlayer.config.ts
      import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // その他のロケール
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;
      この設定ファイルを通じて、ローカライズされたURL、ミドルウェアのリダイレクト、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、設定ドキュメントを参照してください。

    3. HTMLへのバンドルのインポート

      intlayer.js バンドルを生成したら、それをHTMLファイルにインポートできます：

      index.html
      <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />

    <!-- バンドルのインポート -->
    <script src="./intlayer.js" defer></script>
    <!-- メインスクリプトのインポート -->
    <script src="./src/main.js" defer></script>
  </head>
  <body>
    <h1 id="title"></h1>
    <p class="read-the-docs"></p>
  </body>
</html>

      バンドルは、window 上にグローバルオブジェクトとして Intlayer と VanillaIntlayer を公開します。

    4. エントリポイントでのIntlayerのブートストラップ

      src/main.js で、コンテンツがレンダリングされる前に installIntlayer() を呼び出し、グローバルロケールシングルトンの準備を整えます。

      src/main.js
      const { installIntlayer } = window.VanillaIntlayer;

// i18nコンテンツをレンダリングする前に呼び出す必要があります。
installIntlayer();

      Markdownレンダラーも使用したい場合は、installIntlayerMarkdown() を呼び出します：

      src/main.js
      const { installIntlayer, installIntlayerMarkdown } = window.VanillaIntlayer;

installIntlayer();
installIntlayerMarkdown();

    5. コンテンツの宣言

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

      src/app.content.ts
      import { insert, t, type Dictionary } from "intlayer";

const appContent = {
  key: "app",
  content: {
    title: "Vite + Vanilla",

    viteLogoLabel: t({
      en: "Vite Logo",
      fr: "Logo Vite",
      es: "Logo Vite",
    }),

    count: insert(
      t({
        en: "count is {{count}}",
        fr: "le compte est {{count}}",
        es: "el recuento es {{count}}",
      })
    ),

    readTheDocs: t({
      en: "Click on the Vite logo to learn more",
      fr: "Cliquez sur le logo Vite pour en savoir plus",
      es: "Haga clic en el logotipo de Vite para obtener más información",
    }),
  },
} satisfies Dictionary;

export default appContent;

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

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

    6. JavaScriptでIntlayerを使用する

      window.VanillaIntlayer オブジェクトは API ヘルパーを提供します：useIntlayer(key, locale?) は、指定されたキーに対応する翻訳済みコンテンツを返します。

      src/main.js
      const { installIntlayer, useIntlayer } = window.VanillaIntlayer;

installIntlayer();

// 現在のロケールの初期コンテンツを取得。
// .onChange() をチェーンして、ロケールが変更されるたびに通知を受け取るようにします。
const content = useIntlayer("app").onChange((newContent) => {
  // 影響を受ける DOM ノードのみを再レンダリングまたはパッチ
  document.querySelector("h1").textContent = String(newContent.title);
  document.querySelector(".read-the-docs").textContent = String(
    newContent.readTheDocs
  );
});

// 初期レンダリング
document.querySelector("h1").textContent = String(content.title);
document.querySelector(".read-the-docs").textContent = String(
  content.readTheDocs
);

      リーフ値を文字列として取得するには、それらを String() でラップします。これにより、ノードの toString() メソッドが呼び出され、翻訳されたテキストが返されます。

      ネイティブ HTML 属性（alt、aria-label など）の値が必要な場合は、直接 .value を使用します：

      javascript
      img.alt = content.viteLogoLabel.value;

    7. コンテンツの言語を変更する

      コンテンツの言語を変更するには、useLocale によって公開される setLocale 関数を使用します。

      src/locale-switcher.js
      const { getLocaleName } = window.Intlayer;
const { useLocale } = window.VanillaIntlayer;

export function setupLocaleSwitcher(container) {
  const { locale, availableLocales, setLocale, subscribe } = useLocale();

  const select = document.createElement("select");
  select.setAttribute("aria-label", "言語");

  const render = (currentLocale) => {
    select.innerHTML = availableLocales
      .map(
        (loc) =>
          `<option value="${loc}"${loc === currentLocale ? " selected" : ""}>
            ${getLocaleName(loc)}
          </option>`
      )
      .join("");
  };

  render(locale);
  container.appendChild(select);

  select.addEventListener("change", () => setLocale(select.value));

  // 別の場所からロケールが変更されたときにドロップダウンを同期させる
  return subscribe((newLocale) => render(newLocale));
}

    8. HTMLの言語および方向属性の切り替え

      アクセシビリティとSEOのために、<html> タグの lang および dir 属性を現在のロケールに合わせて更新します。

      src/main.js
      const { getHTMLTextDir } = window.Intlayer;
const { installIntlayer, useLocale } = window.VanillaIntlayer;

installIntlayer();

useLocale({
  onLocaleChange: (locale) => {
    document.documentElement.lang = locale;
    document.documentElement.dir = getHTMLTextDir(locale);
  },
});

    9. ロケールごとのディクショナリの遅延読み込み

      ロケールごとにディクショナリを遅延読み込みしたい場合は、useDictionaryDynamic を使用できます。これは、初期の intlayer.js ファイルにすべての翻訳をバンドルしたくない場合に便利です。

      src/app.js
      const { installIntlayer, useDictionaryDynamic } = window.VanillaIntlayer;

installIntlayer();

const unsubscribe = useDictionaryDynamic(
  {
    en: () => import("../.intlayer/dictionaries/en/app.mjs"),
    fr: () => import("../.intlayer/dictionaries/fr/app.mjs"),
    es: () => import("../.intlayer/dictionaries/es/app.mjs"),
  },
  "app"
).onChange((content) => {
  document.querySelector("h1").textContent = String(content.title);
});
      注意: useDictionaryDynamic には、ディクショナリが個別の ESM ファイルとして利用可能である必要があります。このアプローチは通常、ディクショナリを配信するウェブサーバーがある場合に使用されます。

    TypeScriptの設定

    TypeScriptの設定に自動生成された型が含まれていることを確認してください。

    tsconfig.json
    {
  "compilerOptions": {
    // ...
  },
  "include": ["src", ".intlayer/**/*.ts"],
}

    VS Code拡張機能

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

    VS Code Marketplaceからインストール

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

    • 翻訳キーの 自動補完。
    • 欠落している翻訳に対する リアルタイムのエラー検出。
    • 翻訳済みコンテンツの インラインプレビュー。
    • 翻訳を簡単に作成および更新するための クイックアクション。

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

    さらに詳しく

    さらに詳しく知るには、ビジュアルエディターを実装したり、CMSを使用してコンテンツを外部化したりできます。

    よくある質問

    はい。このガイドではそれをカバーしています。ステップ 3 に示すように、vanilla-intlayer バンドルを HTML に直接インポートし、エントリーポイントでブートストラップして、useIntlayer でコンテンツを読み込みます。Vite、webpack、ビルドパイプラインは必要ありません。

    ランタイムカタログよりもはるかに少なくなります。ページはレンダリングしない言語をダウンロードしないためです。コンテンツは事前にコンパイルされた辞書から解決され、ロケールごとの遅延読み込みにより、訪問者が言語を切り替えるまで他の言語は初期ペイロードから除外されます。通常の代替案と比較すると、Intlayer は bundle とページサイズを最大 50% 削減します。bundle 最適化、動的辞書、およびベンチマークを参照してください。

    ほぼ可能です。i18next 移行ガイドに従ってコンテンツを移動してください。段階的に移行することもできます。sync JSON plugin は既存の JSON カタログを信頼できるソースとして保持し、それらから Intlayer 辞書を生成するため、両方のレイヤーは同期を保ったまま、スクリプトを一度に 1 つずつ移動できます。

    はい。sync JSON plugin は /messages/{locale}/{namespace}.json ファイルを信頼できるソースとして保持し、双方向で Intlayer 辞書を生成します。sync PO plugin は gettext カタログに対して同じことを行い、ロケールごとのファイルではコンテンツを言語ごとに分割できます。

    いいえ。npx intlayer extract を実行すると、Intlayer はソースファイルを読み込み、ユーザーに見える文字列を抽出して、各ファイルの隣に .content ファイルを書き込むため、カタログに文字列を 1 つずつコピーする代わりに diff を確認できます。extract コマンドを参照してください。

    完全に自動化されたパイプラインの場合、Intlayer Compiler はビルド時に JSX、TSX、Vue、Svelte ソースに対して同じことを行い、変更のたびに辞書を生成するため、手動でキーを保持する必要がありません。静的分析によって動作するため、ランタイムにのみ存在する文字列は到達不可能なままであり、ユーザーに見えるテキストをアプリケーションロジックから区別するために、いくつかのアノテーションが必要です。

    5 つあり、すべてオプションです：

    • VS Code 拡張機能: useIntlayer キーからそれを宣言するコンテンツファイルにジャンプし、コンポーネントからコンテンツを抽出し、コマンドパレットまたは専用の Intlayer タブからビルド、fill、テスト、push、pull を実行します。
    • LSP サーバー: LSP に対応した任意のエディターで同じ認識を提供し、定義へのジャンプ、すべての参照を検索、翻訳値のホバープレビュー、キーとフィールドのオートコンプリート、キーが宣言されていない場合の警告があります。また、i18next、react-i18next、next-intl、use-intl の呼び出しも解決し、移行中に役立ちます。
    • MCP サーバー: Intlayer ドキュメントと CLI を Cursor、VS Code、Claude Desktop、Claude Code、ChatGPT に公開し、アシスタントが推測する代わりに現在のドキュメントから回答でき、intlayer fill などのコマンドを自分で実行できます。
    • エージェントスキル: intlayer-config、intlayer-cli、intlayer-content などの焦点を絞ったスキル、およびフレームワークごとに 1 つ、エージェントにルーティング設定とコンテンツノードタイプを教えます。
    • ESLint plugin: no-raw-text はハードコードされた文字列にフラグを立て、静的辞書キーと未使用コンテンツの追加ルールがあります。
    ViteおよびVanilla JSViteおよびLit