アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの メンテナンスが容易になります。コンテンツコードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、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と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ログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、設定ドキュメントを参照してください。

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>

<!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 を公開します。

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

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

src/main.js

コードをコピー

コードをクリップボードにコピー

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

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

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

src/main.js

コードをコピー

コードをクリップボードにコピー

const { installIntlayer, installIntlayerMarkdown } = window.VanillaIntlayer;installIntlayer();installIntlayerMarkdown();

const { installIntlayer, installIntlayerMarkdown } = window.VanillaIntlayer;installIntlayer();installIntlayerMarkdown();

コンテンツの宣言

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

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}）に一致していれば、アプリケーションのどこにでも定義できます。

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

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

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;
img.alt = content.viteLogoLabel.value;

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

コンテンツの言語を変更するには、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));}

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 属性を現在のロケールに合わせて更新します。

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

const { getHTMLTextDir } = window.Intlayer;const { installIntlayer, useLocale } = window.VanillaIntlayer;installIntlayer();useLocale({  onLocaleChange: (locale) => {    document.documentElement.lang = locale;    document.documentElement.dir = getHTMLTextDir(locale);  },});

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

ロケールごとにディクショナリを遅延読み込みしたい場合は、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);});

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"],}

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

VS Code拡張機能

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

VS Code Marketplaceからインストール

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

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

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

さらに詳しく

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

なぜIntlayer？

バージョン履歴

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

目次

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

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

依存関係のインストール

プロジェクトの設定

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

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

コンテンツの宣言

JavaScriptでIntlayerを使用する

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

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

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

TypeScriptの設定

VS Code拡張機能

さらに詳しく