Creation:2025-11-20Last update:2026-05-06

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

    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

    さらに進む

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