著者:
    Aymeric PINEAU
    作成:2025-04-18最終更新:2026-06-23

    Intlayer を使って Vite と Svelte のウェブサイトを翻訳する | 国際化（i18n）

    ide.intlayer.org
    intlayer-vite-svelte-template.vercel.app

    目次

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

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

    Svelte を完全にカバー

    Intlayer は、コンポーネント レベルのコンテンツ スコープ、リアクティブ翻訳、および国際化 (i18n) のスケーリングに必要なすべての機能を提供することで、Svelte と完全に連携するように最適化されています。

    バンドルサイズ

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

    保守性

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

    AI エージェント

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

    オートメーション

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

    パフォーマンス

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

    非開発によるスケーリング

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

    </AccordionGroup>

    ViteとSvelteアプリケーションでIntlayerをセットアップするステップバイステップガイド

    ide.intlayer.org

    GitHubのアプリケーションテンプレートを参照してください。

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

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

      bash
      npx intlayer init --interactive
      --interactive フラグはオプションです。AI エージェントの場合は intlayer-cli init を使用してください。
      このコマンドは環境を検出し、必要なパッケージをインストールします。例えば：
      bash
      npm install intlayer svelte-intlayer
npm install vite-intlayer --save-dev

      • intlayer

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

      • svelte-intlayer IntlayerをSvelteアプリケーションと統合するパッケージです。Svelteの国際化のためのコンテキストプロバイダーとフックを提供します。

      • vite-intlayer IntlayerをViteバンドラーと統合するためのViteプラグイン、およびユーザーの優先ロケール検出、クッキー管理、URLリダイレクト処理のためのミドルウェアを含みます。

    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. Vite設定にIntlayerを統合する

      intlayerプラグインを設定に追加します。

      vite.config.ts
      import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { intlayer } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte(), intlayer()],
});
      intlayer() Viteプラグインは、IntlayerをViteに統合するために使用されます。これにより、コンテンツ宣言ファイルのビルドが保証され、開発モードでの監視が行われます。また、Viteアプリケーション内でIntlayerの環境変数を定義します。さらに、パフォーマンス最適化のためのエイリアスも提供します。

    4. コンテンツの宣言

      翻訳を格納するためのコンテンツ宣言を作成および管理します。

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

const appContent = {
  key: "app",
  content: {
    title: t({
      en: "Hello World",
      fr: "Bonjour le monde",
      es: "Hola mundo",
    }),
  },
} satisfies Dictionary;

export default appContent;
      コンテンツ宣言は、アプリケーション内のどこにでも定義できます。contentDirディレクトリ（デフォルトは./src）に含まれていれば有効です。また、コンテンツ宣言ファイルの拡張子（デフォルトは.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}）に一致する必要があります。
      詳細については、コンテンツ宣言のドキュメントを参照してください。

    5. コード内でIntlayerを利用する

      src/App.svelte
      <script>
  import { useIntlayer } from "svelte-intlayer";

  const content = useIntlayer("app");
</script>

<div>


<!-- コンテンツをシンプルにレンダリング -->
<h1>{$content.title}</h1>
<!-- エディターを使って編集可能なコンテンツとしてレンダリング -->
<h1>{@const Title = $content.title}<Title /></h1>
<!-- コンテンツを文字列としてレンダリング -->
<div aria-label={$content.title.value}></div>
<div aria-label={$content.title.toString()}></div>
<div aria-label={String($content.title)}></div>
      アプリケーションが既に存在する場合は、Intlayer コンパイラ と 抽出コマンド を組み合わせて、1 秒で何千ものコンポーネントを変換できます。

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

      src/App.svelte
      <script lang="ts">
import  { getLocaleName } from 'intlayer';
import { useLocale } from "svelte-intlayer";

// ロケール情報と setLocale 関数を取得
const { locale, availableLocales, setLocale } = useLocale();

// ロケール変更を処理
const changeLocale = (event: Event) => {
  const target = event.target as HTMLSelectElement;
  const newLocale = target.value;
  setLocale(newLocale);
};
</script>

<div>
  <select value={$locale} on:change={changeLocale}>
    {#each availableLocales ?? [] as loc}
      <option value={loc}>
        {getLocaleName(loc)}
      </option>
    {/each}
  </select>
</div>

    7. Markdownのレンダリング

      Intlayerは、Markdownコンテンツを直接Svelteアプリケーション内でレンダリングすることをサポートしています。デフォルトでは、Markdownはプレーンテキストとして扱われます。MarkdownをリッチなHTMLに変換するには、@humanspeak/svelte-markdownや他のMarkdownパーサーを統合することができます。

      intlayerパッケージを使ってMarkdownコンテンツを宣言する方法については、markdownドキュメントをご覧ください。
      src/App.svelte
      <script>
  import { setIntlayerMarkdown } from "svelte-intlayer";

  setIntlayerMarkdown((markdown) =>
   // マークダウンコンテンツを文字列としてレンダリングする
   return markdown;
  );
</script>

<h1>{$content.markdownContent}</h1>
      content.markdownContent.metadata.xxx プロパティを使って、マークダウンのフロントマターのデータにもアクセスできます。

    8. intlayerエディター / CMS のセットアップ

      intlayerエディターをセットアップするには、intlayerエディターのドキュメントに従ってください。

      intlayer CMSをセットアップするには、intlayer CMSのドキュメントに従ってください。

    9. アプリケーションにローカライズされたルーティングを追加する

      Svelteアプリケーションでローカライズされたルーティングを扱うには、svelte-spa-routerとIntlayerのlocaleFlatMapを組み合わせて、各ロケールのルートを生成できます。

      まず、svelte-spa-routerをインストールします：

      bash
      npm install svelte-spa-router
npx intlayer init

      次に、ルートを定義するために Router.svelte ファイルを作成します：

      src/Router.svelte
      <script lang="ts">
import { localeFlatMap } from "intlayer";
import Router from "svelte-spa-router";
import { wrap } from "svelte-spa-router/wrap";
import App from "./App.svelte";

const routes = Object.fromEntries(
    localeFlatMap(({locale, urlPrefix}) => [
    [
        urlPrefix || '/',
        wrap({
            component: App as any,
            props: {
                locale,
            },
        }),
    ],
    ])
);
</script>

<Router {routes} />

      main.ts を更新して、App の代わりに Router コンポーネントをマウントします：

      src/main.ts
      import { mount } from "svelte";
import Router from "./Router.svelte";

const app = mount(Router, {
typescript fileName="src/main.ts"
import { mount } from "svelte";
import Router from "./Router.svelte";

const app = mount(Router, {
  target: document.getElementById("app")!, // アプリのマウント先のDOM要素
});

export default app;

      最後に、App.svelte を更新して locale プロパティを受け取り、useIntlayer と共に使用します:

      src/App.svelte
      <script lang="ts">
import type { Locale } from 'intlayer';
import { useIntlayer } from "svelte-intlayer";
import Counter from './lib/Counter.svelte';
import LocaleSwitcher from './lib/LocaleSwitcher.svelte';

export let locale: Locale; // ロケールを受け取る

$: content = useIntlayer('app', locale); // ロケールに基づくコンテンツを取得
</script>

<main>
  <div class="locale-switcher-container">
    <LocaleSwitcher currentLocale={locale} /> <!-- 現在のロケールを渡す -->
  </div>

  <!-- ... アプリの残りの部分 ... -->
</main>

      サーバーサイドルーティングの設定（オプション）

      並行して、intlayerProxy を使用してアプリケーションにサーバーサイドルーティングを追加することもできます。このプラグインは、URL に基づいて現在のロケールを自動的に検出し、適切なロケールクッキーを設定します。ロケールが指定されていない場合、プラグインはユーザーのブラウザの言語設定に基づいて最適なロケールを判断します。ロケールが検出されない場合は、デフォルトのロケールにリダイレクトします。

      intlayerProxy を本番環境で使用するには、vite-intlayer パッケージを devDependencies から dependencies に切り替える必要があることに注意してください。
      Intlayer v9 以降、intlayerProxy() は intlayer() プラグインに直接バンドルされており、routing.enableProxy オプション（デフォルトで true）で有効になっています。以下のように個別に登録することはオプションになりました — これは下位互換性と、プラグインの順序を制御する必要があるセットアップのために保持されています。routing.enableProxy: false に設定してオプトアウトできます。v9 リリースノートを参照してください。
      vite.config.ts
      import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { intlayer } from "vite-intlayer";

typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { intlayer } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [intlayerProxy(), // should be placed first
 svelte(), intlayer()],
});

    10. ロケールが変更されたときにURLを変更する

      ユーザーが言語を切り替え、URLをそれに応じて更新できるようにするために、LocaleSwitcher コンポーネントを作成できます。このコンポーネントは intlayer の getLocalizedUrl と svelte-spa-router の push を使用します。

      src/lib/LocaleSwitcher.svelte
      <script lang="ts">
import { getLocaleName, getLocalizedUrl } from "intlayer";
import { useLocale } from "svelte-intlayer";
import { push } from "svelte-spa-router";

export let currentLocale: string | undefined = undefined;

// ロケール情報を取得
const { locale, availableLocales } = useLocale();

// ロケール変更を処理
const changeLocale = (event: Event) => {
  const target = event.target as HTMLSelectElement;
  const newLocale = target.value;
  const currentUrl = window.location.pathname;
  const url = getLocalizedUrl( currentUrl, newLocale);
  push(url);
};
</script>

<div class="locale-switcher">
  <select value={currentLocale ?? $locale} onchange={changeLocale}>
    {#each availableLocales ?? [] as loc}
      <option value={loc}>
        {getLocaleName(loc)}
      </option>
    {/each}
  </select>
</div>

    11. 国際化されたリンク

      オプション

      SEO のために、ルートをロケール接頭辞を付けることをお勧めします (例: /about, /fr/about)。

      src/lib/components/Link.svelte
      <script lang="ts">
  import { getLocalizedUrl } from "intlayer";
  import { useLocale } from "svelte-intlayer";

  export let href = "";
  const { locale } = useLocale();

  // URLにプレフィックスを付けるヘルパー
  $: localizedHref = getLocalizedUrl(href, $locale);
</script>

<a href={localizedHref}>
  <slot />
</a>

    12. コンポーネントのコンテンツを抽出する

      オプション

      既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。

      このプロセスを容易にするために、Intlayerは、コンポーネントを変換しコンテンツを抽出するための コンパイラ / エクストラクタ を提案しています。

      セットアップするには、intlayer.config.ts ファイルに compiler セクションを追加します。

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

const config: IntlayerConfig = {
  // ... 他の構成
  compiler: {
    /**
     * コンパイラを有効にするかどうかを指定します。
     */
    enabled: true,

    /**
     * 出力ファイルのパスを定義します。
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * 変換後にコンポーネントを保存するかどうかを指定します。これにより、コンパイラを一度だけ実行してアプリを変換し、その後削除することができます。
     */
    saveComponents: false,

    /**
     * 辞書キーの接頭辞
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

      コンポーネントを変換してコンテンツを抽出するためにエクストラクタを実行します

      bash
      npx intlayer extract
      Since v9, the intlayerCompiler is included in the intlayer plugin. So you don't need to add it manually.

      vite.config.ts を更新して intlayerCompiler プラグインを含めます。

      vite.config.ts
      import { defineConfig } from "vite";
import { intlayer, intlayerCompiler } from "vite-intlayer";

export default defineConfig({
  plugins: [
    intlayer(),
    intlayerCompiler(), // Adds the compiler plugin
  ],
});
      bash
      npm run build # または npm run dev

    （任意）サイトマップと robots.txt（ビルド時生成）

    Intlayer は generateSitemap と getMultilingualUrls により、クローラ向けに整形した多言語の sitemap.xml と robots.txt を public/ に自動で書き出せます。通常は Vite より前に小さな Node スクリプトを走らせます（例: npm の predev / prebuild）。

    サイトマップ

    Intlayer のサイトマップ生成はロケール設定を踏まえ、クローラ向けのメタデータを含めます。

    生成されるサイトマップは xhtml:link（hreflang）をサポートします。単純な URL 列挙ではなく、各ページの言語版同士を双方向で結びます（例: /about、/fr/about、/about?lang=fr などルーティングに依存）。

    Robots.txt

    getMultilingualUrls で Disallow を、機微パスのすべての言語 URLに効かせます。

    1. プロジェクトルートに generate-seo.mjs を置く

    generate-seo.mjs
    import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";
import { generateSitemap, getMultilingualUrls } from "intlayer";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(
  /\/$/,
  ""
);

const pathList = [
  { path: "/", changefreq: "daily", priority: 1.0 },
  { path: "/about", changefreq: "monthly", priority: 0.7 },
];

const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);

const getAllMultilingualUrls = (urls) =>
  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));

const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);

const robotsTxt = [
  "User-agent: *",
  "Allow: /",
  ...disallowedPaths.map((path) => `Disallow: ${path}`),
  "",
  `Sitemap: ${SITE_URL}/sitemap.xml`,
].join("\n");

fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);

console.log("SEO files generated successfully.");

    intlayer がインストールされている必要があります。本番では環境変数 SITE_URL を設定してください（CI など）。

    Node の ESM では generate-seo.mjs を推奨します。generate-seo.js にする場合は package.json の "type": "module" などで ESM を有効にしてください。

    2. Vite より前にスクリプトを実行する

    package.json
    {
  "scripts": {
    "dev": "vite",
    "prebuild": "node generate-seo.mjs",
    "build": "vite build",
    "preview": "vite preview"
  }
}

    pnpm や yarn を使う場合はコマンドを読み替えてください。CI から呼び出しても構いません。

    さらに進む

    Intlayer によって生成されたファイルを無視することをお勧めします。これにより、Git リポジトリにコミットすることを避けられます。

    さらに進めるために、ビジュアルエディターを実装するか、CMSを使用してコンテンツを外部化することができます。

    bash
    # Intlayerで生成されたファイルを無視する
.intlayer

    Git 設定

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

    Intlayer によって生成されたファイルは無視することを推奨します。これにより、Git リポジトリへの不要なコミットを避けることができます。

    これを行うには、.gitignore ファイルに以下の指示を追加してください：

    bash
    #  Intlayer によって生成されたファイルを無視する
.intlayer

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

    VS Code 拡張機能

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

    Solid StartSvelteKit