作成:2026-03-31最終更新:2026-05-31

GitHubでアプリケーションテンプレートを見る

このページにはアプリケーションテンプレートが用意されています。

ショーケースアプリケーションを見る

このページはテンプレートのライブデモにリンクしています。

このドキュメントをあなたの好きなAIアシスタントに参照してくださいChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します

バージョン履歴

"Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"
v8.9.02026/5/4
"履歴の初期化"
v8.4.102026/3/31

このページのコンテンツはAIを使用して翻訳されました。

英語の元のコンテンツの最新バージョンを見る

このドキュメントを編集

このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。

ドキュメントへのGitHubリンク

コピー

ドキュメントのMarkdownをクリップボードにコピー

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

Name: Intlayer
Author: Intlayer

代替手段ではなく 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をセットアップするためのステップバイステップガイド

依存関係のインストール

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

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

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

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

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

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

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

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

# intlayer設定ファイル、TypeScript（セットアップされている場合）、環境変数を初期化
yarn intlayer init --no-gitignore

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

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

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

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

intlayer 設定管理、翻訳、コンテンツ宣言、トランスパイル、CLIコマンドのための国際化ツールを提供するコアパッケージです。
vanilla-intlayer Intlayerを純粋なJavaScript / TypeScriptアプリケーションと統合するパッケージです。パブ/サブシングルトン (IntlayerClient) とコールバックベースのヘルパー (useIntlayer、useLocaleなど) を提供し、UIフレームワークに依存することなく、アプリのあらゆる部分がロケールの変更に反応できるようにします。

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

2
プロジェクトの設定

アプリケーションの言語を設定するための設定ファイルを作成します：
```
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ログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、設定ドキュメントを参照してください。

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

intlayer.js バンドルを生成したら、それを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() を呼び出し、グローバルロケールシングルトンの準備を整えます。
```
const { installIntlayer } = window.VanillaIntlayer;

// i18nコンテンツをレンダリングする前に呼び出す必要があります。
installIntlayer();
```
Markdownレンダラーも使用したい場合は、installIntlayerMarkdown() を呼び出します：
```
const { installIntlayer, installIntlayerMarkdown } = window.VanillaIntlayer;

installIntlayer();
installIntlayerMarkdown();
```

コンテンツの宣言

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

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;

{
  "$schema": "https://intlayer.org/schema.json",
  "key": "app",
  "content": {
    "title": "Vite + Vanilla",
    "viteLogoLabel": {
      "nodeType": "translation",
      "translation": {
        "en": "Vite Logo",
        "fr": "Logo Vite",
        "es": "Logo Vite"
      }
    },
    "count": {
      "nodeType": "insertion",
      "insertion": {
        "nodeType": "translation",
        "translation": {
          "en": "count is {{count}}",
          "fr": "le compte est {{count}}",
          "es": "el recuento es {{count}}"
        }
      }
    },
    "readTheDocs": {
      "nodeType": "translation",
      "translation": {
        "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"
      }
    }
  }
}

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

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

JavaScriptでIntlayerを使用する

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

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 を使用します：
img.alt = content.viteLogoLabel.value;

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

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

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));
}

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

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

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 ファイルにすべての翻訳をバンドルしたくない場合に便利です。
```
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の設定に自動生成された型が含まれていることを確認してください。

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

VS Code拡張機能

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

VS Code Marketplaceからインストール

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

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

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

さらに詳しく

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

なぜIntlayer？