作成:2025-11-20最終更新:2026-05-06

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

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

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

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

このドキュメントをあなたの好きなAIアシスタントに参照してください

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

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

バージョン履歴

"Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"
v8.9.02026/5/4
"initコマンドを追加"
v7.5.92025/12/30
"初期履歴"
v7.1.102025/11/20

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

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

このドキュメントを編集

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

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

コピー

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

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

Name: Intlayer
Author: Intlayer

ide.intlayer.org

Intlayerとは何ですか？

Intlayerは、モダンなウェブアプリケーションにおける多言語対応を簡素化するために設計された革新的なオープンソースの国際化（i18n）ライブラリです。SvelteKitのサーバーサイドレンダリング（SSR）機能とシームレスに連携します。

Intlayerを使うことで、以下が可能になります：

コンポーネントレベルで宣言的な辞書を使い、翻訳を簡単に管理できます。
メタデータ、ルート、コンテンツを動的にローカライズできます。
自動生成される型情報でTypeScriptのサポートを保証します。
SvelteKitのSSRを活用してSEOに優しい国際化を実現します。

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

まずは新しいSvelteKitプロジェクトを作成しましょう。以下は最終的に作成する構成です：

bash

コードをコピー

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

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

(オプション) ステップ 1 : コンポーネントのコンテンツを抽出する

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

このプロセスを容易にするために、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

bash

コードをコピー

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

npm install @intlayer/babel --save-dev

babel.config.js

コードをコピー

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

const { intlayerExtractBabelPlugin, getExtractPluginOptions,} = require("@intlayer/babel");module.exports = { presets: ["next/babel"], plugins: [   // コンポーネントから辞書へコンテンツを抽出する   [intlayerExtractBabelPlugin, getExtractPluginOptions()], ],};

bash

コードをコピー

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

npm run build # または npm run dev

さらに進む

ビジュアルエディター: UIから直接翻訳を編集するために、Intlayer Visual Editorを統合します。
CMS: コンテンツ管理を外部化するために、Intlayer CMSを使用します。

ViteおよびSvelte

ViteおよびPreact

作成:2025-11-20最終更新:2026-05-06

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

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

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

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

このドキュメントをあなたの好きなAIアシスタントに参照してください

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

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

バージョン履歴

"Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"
v8.9.02026/5/4
"initコマンドを追加"
v7.5.92025/12/30
"初期履歴"
v7.1.102025/11/20

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

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

このドキュメントを編集

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

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

コピー

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

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

ide.intlayer.org

Intlayerとは何ですか？

Intlayerを使うことで、以下が可能になります：

コンポーネントレベルで宣言的な辞書を使い、翻訳を簡単に管理できます。
メタデータ、ルート、コンテンツを動的にローカライズできます。
自動生成される型情報でTypeScriptのサポートを保証します。
SvelteKitのSSRを活用してSEOに優しい国際化を実現します。

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

まずは新しいSvelteKitプロジェクトを作成しましょう。以下は最終的に作成する構成です：

bash

コードをコピー

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

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

(オプション) ステップ 1 : コンポーネントのコンテンツを抽出する

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

セットアップするには、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

npx intlayer extract

bash

コードをコピー

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

npm install @intlayer/babel --save-dev

npm install @intlayer/babel --save-dev

babel.config.js

コードをコピー

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

const { intlayerExtractBabelPlugin, getExtractPluginOptions,} = require("@intlayer/babel");module.exports = { presets: ["next/babel"], plugins: [   // コンポーネントから辞書へコンテンツを抽出する   [intlayerExtractBabelPlugin, getExtractPluginOptions()], ],};

const { intlayerExtractBabelPlugin, getExtractPluginOptions,} = require("@intlayer/babel");module.exports = { presets: ["next/babel"], plugins: [   // コンポーネントから辞書へコンテンツを抽出する   [intlayerExtractBabelPlugin, getExtractPluginOptions()], ],};

bash

コードをコピー

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

npm run build # または npm run dev

npm run build # または npm run dev

さらに進む

ビジュアルエディター: UIから直接翻訳を編集するために、Intlayer Visual Editorを統合します。
CMS: コンテンツ管理を外部化するために、Intlayer CMSを使用します。

ViteおよびSvelte

ViteおよびPreact

バージョン履歴

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

目次

Intlayerとは何ですか？

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

(オプション) ステップ 1 : コンポーネントのコンテンツを抽出する

さらに進む

バージョン履歴

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

目次

Intlayerとは何ですか？

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

(オプション) ステップ 1 : コンポーネントのコンテンツを抽出する

さらに進む