このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
バージョン履歴
- "Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"v8.9.02026/5/4
- "initコマンドを追加"v7.5.92025/12/30
- "ドキュメント更新"v5.5.112025/11/19
- "履歴初期化"v5.5.102025/6/29
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るIf you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy doc Markdown to clipboard
Intlayer を使って Vite と Svelte のウェブサイトを翻訳する | 国際化（i18n）
目次
代替手段ではなく Interlayer を使用する理由
「svelte-i18n」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
Svelte を完全にカバー
Intlayer は、コンポーネント レベルのコンテンツ スコープ、リアクティブ翻訳、および国際化 (i18n) のスケーリングに必要なすべての機能を提供することで、Svelte と完全に連携するように最適化されています。
バンドルサイズ
大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、バンドルとページのサイズを最大 50% 削減するのに役立ちます。
保守性
アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの メンテナンスが容易になります。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は完全に型指定されており、コンテンツの正確性を保証します。
AI エージェント
コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって 必要なコンテキストが削減されます。 Intlayer には、翻訳の欠落をテストする CLI、LSP、MCP などのツール スイートも付属しています。および エージェント スキル により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
オートメーション
AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する コンパイラー と、バックグラウンドでの翻訳を支援する Web プラットフォーム も提供します。
パフォーマンス
大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
非開発によるスケーリング
Intlayer は単なる i18n ソリューションではなく、自己ホスト型 ビジュアル エディター と 完全な CMS を提供します。 リアルタイムで多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
ViteとSvelteアプリケーションでIntlayerをセットアップするステップバイステップガイド
GitHubのアプリケーションテンプレートを参照してください。
依存関係のインストール
npmを使って必要なパッケージをインストールします：
bashコードをコピーコードをクリップボードにコピー
npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer initプロジェクトの設定
アプリケーションの言語を設定するための設定ファイルを作成します：
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ログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、設定ドキュメントを参照してください。
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の環境変数を定義します。さらに、パフォーマンス最適化のためのエイリアスも提供します。コンテンツの宣言
翻訳を格納するためのコンテンツ宣言を作成および管理します。
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}）に一致する必要があります。詳細については、コンテンツ宣言のドキュメントを参照してください。
コード内で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 秒で何千ものコンポーネントを変換できます。
コンテンツの言語を変更する
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>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プロパティを使って、マークダウンのフロントマターのデータにもアクセスできます。intlayerエディター / CMS のセットアップ
intlayerエディターをセットアップするには、intlayerエディターのドキュメントに従ってください。
intlayer CMSをセットアップするには、intlayer CMSのドキュメントに従ってください。
アプリケーションにローカライズされたルーティングを追加する
Svelteアプリケーションでローカライズされたルーティングを扱うには、
svelte-spa-routerとIntlayerのlocaleFlatMapを組み合わせて、各ロケールのルートを生成できます。まず、
svelte-spa-routerをインストールします：bashコードをコピーコードをクリップボードにコピー
npm install svelte-spa-routernpx 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に切り替える必要があることに注意してください。vite.config.tsコードをコピーコードをクリップボードにコピー
import { defineConfig } from "vite"; import { svelte } from "@sveltejs/vite-plugin-svelte"; import { intlayer, intlayerProxy } 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, intlayerProxy } from "vite-intlayer"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [intlayerProxy(), // should be placed first svelte(), intlayer()], });ロケールが変更されたときに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>コンポーネントのコンテンツを抽出する
オプション既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。
このプロセスを容易にするために、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
Git 設定
Intlayer によって生成されたファイルは無視することを推奨します。これにより、Git リポジトリへの不要なコミットを避けることができます。
これを行うには、.gitignore ファイルに以下の指示を追加してください：
コードをクリップボードにコピー
# Intlayer によって生成されたファイルを無視する.intlayerVS Code 拡張機能
Intlayerでの開発体験を向上させるために、公式のIntlayer VS Code拡張機能をインストールできます。
この拡張機能は以下を提供します：
- 翻訳キーのオートコンプリート。
- 欠落している翻訳のリアルタイムエラー検出。
- 翻訳されたコンテンツのインラインプレビュー。
- 翻訳を簡単に作成・更新できるクイックアクション。
拡張機能の使い方の詳細については、Intlayer VS Code拡張機能のドキュメントを参照してください。
（任意）サイトマップと 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 を置く
コードをクリップボードにコピー
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 より前にスクリプトを実行する
コードをクリップボードにコピー
{ "scripts": { "dev": "vite", "prebuild": "node generate-seo.mjs", "build": "vite build", "preview": "vite preview" }}pnpm や yarn を使う場合はコマンドを読み替えてください。CI から呼び出しても構いません。
さらに進む
さらに進めるために、ビジュアルエディターを実装するか、CMSを使用してコンテンツを外部化することができます。