\n \n \n \n \n

\n

\n \n\n```\n\nバンドルは、`window` 上にグローバルオブジェクトとして `Intlayer` と `VanillaIntlayer` を公開します。\n\n\n\n\n\n`src/main.js` で、コンテンツがレンダリングされる**前**に `installIntlayer()` を呼び出し、グローバルロケールシングルトンの準備を整えます。\n\n```javascript fileName=\"src/main.js\"\nconst { installIntlayer } = window.VanillaIntlayer;\n\n// i18nコンテンツをレンダリングする前に呼び出す必要があります。\ninstallIntlayer();\n```\n\nMarkdownレンダラーも使用したい場合は、`installIntlayerMarkdown()` を呼び出します：\n\n```javascript fileName=\"src/main.js\"\nconst { installIntlayer, installIntlayerMarkdown } = window.VanillaIntlayer;\n\ninstallIntlayer();\ninstallIntlayerMarkdown();\n```\n\n\n\n\n\n翻訳を保存するためのコンテンツ宣言を作成および管理します：\n\n```typescript fileName=\"src/app.content.ts\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { insert, t, type Dictionary } from \"intlayer\";\n\nconst appContent = {\n key: \"app\",\n content: {\n title: \"Vite + Vanilla\",\n\n viteLogoLabel: t({\n en: \"Vite Logo\",\n fr: \"Logo Vite\",\n es: \"Logo Vite\",\n }),\n\n count: insert(\n t({\n en: \"count is {{count}}\",\n fr: \"le compte est {{count}}\",\n es: \"el recuento es {{count}}\",\n })\n ),\n\n readTheDocs: t({\n en: \"Click on the Vite logo to learn more\",\n fr: \"Cliquez sur le logo Vite pour en savoir plus\",\n es: \"Haga clic en el logotipo de Vite para obtener más información\",\n }),\n },\n} satisfies Dictionary;\n\nexport default appContent;\n```\n\n```json fileName=\"src/app.content.json\" contentDeclarationFormat=\"json\"\n{\n \"$schema\": \"https://intlayer.org/schema.json\",\n \"key\": \"app\",\n \"content\": {\n \"title\": \"Vite + Vanilla\",\n \"viteLogoLabel\": {\n \"nodeType\": \"translation\",\n \"translation\": {\n \"en\": \"Vite Logo\",\n \"fr\": \"Logo Vite\",\n \"es\": \"Logo Vite\"\n }\n },\n \"count\": {\n \"nodeType\": \"insertion\",\n \"insertion\": {\n \"nodeType\": \"translation\",\n \"translation\": {\n \"en\": \"count is {{count}}\",\n \"fr\": \"le compte est {{count}}\",\n \"es\": \"el recuento es {{count}}\"\n }\n }\n },\n \"readTheDocs\": {\n \"nodeType\": \"translation\",\n \"translation\": {\n \"en\": \"Click on the Vite logo to learn more\",\n \"fr\": \"Cliquez sur le logo Vite pour en savoir plus\",\n \"es\": \"Haga clic en el logotipo de Vite para obtener más información\"\n }\n }\n }\n}\n```\n\n> コンテンツ宣言は、`contentDir` ディレクトリ（デフォルトは `./src`）に含まれ、コンテンツ宣言のファイル拡張子（デフォルトは `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`）に一致していれば、アプリケーションのどこにでも定義できます。\n>\n> 詳細については、[コンテンツ宣言のドキュメント](/ja/doc/concept/content)を参照してください。\n\n\n\n\n\n`window.VanillaIntlayer` オブジェクトは API ヘルパーを提供します：`useIntlayer(key, locale?)` は、指定されたキーに対応する翻訳済みコンテンツを返します。\n\n```javascript fileName=\"src/main.js\"\nconst { installIntlayer, useIntlayer } = window.VanillaIntlayer;\n\ninstallIntlayer();\n\n// 現在のロケールの初期コンテンツを取得。\n// .onChange() をチェーンして、ロケールが変更されるたびに通知を受け取るようにします。\nconst content = useIntlayer(\"app\").onChange((newContent) => {\n // 影響を受ける DOM ノードのみを再レンダリングまたはパッチ\n document.querySelector(\"h1\").textContent = String(newContent.title);\n document.querySelector(\".read-the-docs\").textContent = String(\n newContent.readTheDocs\n );\n});\n\n// 初期レンダリング\ndocument.querySelector(\"h1\").textContent = String(content.title);\ndocument.querySelector(\".read-the-docs\").textContent = String(\n content.readTheDocs\n);\n```\n\n> リーフ値を文字列として取得するには、それらを `String()` でラップします。これにより、ノードの `toString()` メソッドが呼び出され、翻訳されたテキストが返されます。\n>\n> ネイティブ HTML 属性（`alt`、`aria-label` など）の値が必要な場合は、直接 `.value` を使用します：\n>\n> ```javascript\n> img.alt = content.viteLogoLabel.value;\n> ```\n\n\n\n\n\nコンテンツの言語を変更するには、`useLocale` によって公開される `setLocale` 関数を使用します。\n\n```javascript fileName=\"src/locale-switcher.js\"\nconst { getLocaleName } = window.Intlayer;\nconst { useLocale } = window.VanillaIntlayer;\n\nexport function setupLocaleSwitcher(container) {\n const { locale, availableLocales, setLocale, subscribe } = useLocale();\n\n const select = document.createElement(\"select\");\n select.setAttribute(\"aria-label\", \"言語\");\n\n const render = (currentLocale) => {\n select.innerHTML = availableLocales\n .map(\n (loc) =>\n ``\n )\n .join(\"\");\n };\n\n render(locale);\n container.appendChild(select);\n\n select.addEventListener(\"change\", () => setLocale(select.value));\n\n // 別の場所からロケールが変更されたときにドロップダウンを同期させる\n return subscribe((newLocale) => render(newLocale));\n}\n```\n\n\n\n\n\nアクセシビリティとSEOのために、`` タグの `lang` および `dir` 属性を現在のロケールに合わせて更新します。\n\n```javascript fileName=\"src/main.js\"\nconst { getHTMLTextDir } = window.Intlayer;\nconst { installIntlayer, useLocale } = window.VanillaIntlayer;\n\ninstallIntlayer();\n\nuseLocale({\n onLocaleChange: (locale) => {\n document.documentElement.lang = locale;\n document.documentElement.dir = getHTMLTextDir(locale);\n },\n});\n```\n\n\n\n\n\nロケールごとにディクショナリを遅延読み込みしたい場合は、`useDictionaryDynamic` を使用できます。これは、初期の `intlayer.js` ファイルにすべての翻訳をバンドルしたくない場合に便利です。\n\n```javascript fileName=\"src/app.js\"\nconst { installIntlayer, useDictionaryDynamic } = window.VanillaIntlayer;\n\ninstallIntlayer();\n\nconst unsubscribe = useDictionaryDynamic(\n {\n en: () => import(\"../.intlayer/dictionaries/en/app.mjs\"),\n fr: () => import(\"../.intlayer/dictionaries/fr/app.mjs\"),\n es: () => import(\"../.intlayer/dictionaries/es/app.mjs\"),\n },\n \"app\"\n).onChange((content) => {\n document.querySelector(\"h1\").textContent = String(content.title);\n});\n```\n\n> 注意: `useDictionaryDynamic` には、ディクショナリが個別の ESM ファイルとして利用可能である必要があります。このアプローチは通常、ディクショナリを配信するウェブサーバーがある場合に使用されます。\n> \n\n\n\n### TypeScriptの設定\n\nTypeScriptの設定に自動生成された型が含まれていることを確認してください。\n\n```json5 fileName=\"tsconfig.json\"\n{\n \"compilerOptions\": {\n // ...\n },\n \"include\": [\"src\", \".intlayer/**/*.ts\"],\n}\n```\n\n### VS Code拡張機能\n\nIntlayerでの開発体験を向上させるために、公式の **Intlayer VS Code拡張機能** をインストールできます。\n\n[VS Code Marketplaceからインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)\n\nこの拡張機能は以下を提供します：\n\n- 翻訳キーの **自動補完**。\n- 欠落している翻訳に対する **リアルタイムのエラー検出**。\n- 翻訳済みコンテンツの **インラインプレビュー**。\n- 翻訳を簡単に作成および更新するための **クイックアクション**。\n\n拡張機能の使用方法の詳細については、[Intlayer VS Code拡張機能のドキュメント](https://intlayer.org/doc/vs-code-extension)を参照してください。\n\n---\n\n### さらに詳しく\n\nさらに詳しく知るには、[ビジュアルエディター](/ja/doc/concept/editor)を実装したり、[CMS](/ja/doc/concept/cms)を使用してコンテンツを外部化したりできます。\n","description":"i18nextはもう不要。2026年に多言語（i18n）Vanilla JSアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。","url":"https://intlayer.org/ja/doc/environment/vanilla","datePublished":"2026-03-31","dateModified":"2026-05-31","version":"8.9.0","keywords":"国際化, ドキュメント, Intlayer, Vanilla JS, JavaScript, TypeScript, HTML","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"開発者、コンテンツマネージャー"}}
    著者:
    作成:2026-03-31最終更新:2026-05-31

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

    ide.intlayer.org

    目次

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

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

    Vanilla JS を完全にカバー

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

    バンドルサイズ

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

    保守性

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

    AI エージェント

    コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって 必要なコンテキストが削減されます。 Intlayer には、翻訳の欠落をテストする CLI、LSP、MCP などのツール スイートも付属しています。および エージェント スキル により、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.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を使用してコンテンツを外部化したりできます。

    ViteおよびVanilla JSViteおよびLit