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

目次

Intlayerとは何ですか？

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

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

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

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

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

.├── 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: 依存関係のインストール

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

npm install intlayer svelte-intlayernpm install vite-intlayer --save-dev

• intlayer: コアのi18nパッケージです。
• svelte-intlayer: Svelte/SvelteKit用のコンテキストプロバイダーとストアを提供します。
• vite-intlayer: コンテンツ宣言をビルドプロセスに統合するためのViteプラグインです。

ステップ 2: プロジェクトの設定

プロジェクトのルートに設定ファイルを作成します:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

ステップ 3: Vite設定にIntlayerを統合する

vite.config.tsを更新してIntlayerプラグインを含めます。このプラグインはコンテンツファイルのトランスパイルを処理します。

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // 順序が重要です。IntlayerはSvelteKitの前に配置してください});

ステップ4: コンテンツの宣言

srcフォルダ内の任意の場所（例: src/lib/content やコンポーネントと同じ場所）にコンテンツ宣言ファイルを作成します。これらのファイルは、各ロケールごとに t() 関数を使用してアプリケーションの翻訳可能なコンテンツを定義します。

import { t, type Dictionary } from "intlayer";const heroContent = {  key: "hero-section",  content: {    title: t({      en: "Welcome to SvelteKit",      fr: "Bienvenue sur SvelteKit",      es: "Bienvenido a SvelteKit",    }),  },} satisfies Dictionary;export default heroContent;

ステップ5: コンポーネントでIntlayerを利用する

今や、任意のSvelteコンポーネント内でuseIntlayer関数を使用できます。この関数はリアクティブなストアを返し、ロケールが変更されると自動的に更新されます。関数は現在のロケールを自動的に尊重します（SSRおよびクライアントサイドのナビゲーションの両方で）。

注意: useIntlayerはSvelteのストアを返すため、そのリアクティブな値にアクセスするには`--- createdAt: 2025-11-20 updatedAt: 2025-11-20 title: SvelteKitアプリを翻訳する方法 – i18nガイド 2025 description: SvelteKitのウェブサイトを多言語対応にする方法を紹介します。Server-Side Rendering（SSR）を使って国際化（i18n）および翻訳を行うためのドキュメントに従ってください。 keywords:

• 国際化
• ドキュメント
• Intlayer
• SvelteKit
• JavaScript
• SSR slugs:
• doc
• environment
• sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
• version: 7.1.10 date: 2025-11-20 changes: 初期履歴

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

目次

Intlayerとは何ですか？

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

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

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

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

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

.├── 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: 依存関係のインストール

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

npm install intlayer svelte-intlayernpm install vite-intlayer --save-dev

• intlayer: コアのi18nパッケージです。
• svelte-intlayer: Svelte/SvelteKit用のコンテキストプロバイダーとストアを提供します。
• vite-intlayer: コンテンツ宣言をビルドプロセスに統合するためのViteプラグインです。

ステップ 2: プロジェクトの設定

プロジェクトのルートに設定ファイルを作成します:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

ステップ 3: Vite設定にIntlayerを統合する

vite.config.tsを更新してIntlayerプラグインを含めます。このプラグインはコンテンツファイルのトランスパイルを処理します。

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // 順序が重要です。IntlayerはSvelteKitの前に配置してください});

ステップ4: コンテンツの宣言

srcフォルダ内の任意の場所（例: src/lib/content やコンポーネントと同じ場所）にコンテンツ宣言ファイルを作成します。これらのファイルは、各ロケールごとに t() 関数を使用してアプリケーションの翻訳可能なコンテンツを定義します。

import { t, type Dictionary } from "intlayer";const heroContent = {  key: "hero-section",  content: {    title: t({      en: "Welcome to SvelteKit",      fr: "Bienvenue sur SvelteKit",      es: "Bienvenido a SvelteKit",    }),  },} satisfies Dictionary;export default heroContent;

ステップ5: コンポーネントでIntlayerを利用する

プレフィックスを使用する必要があります（例：$content.title）。

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section"はステップ4で定義したキーに対応します  const content = useIntlayer("hero-section");</script><!-- コンテンツを単純にレンダリング --><h1>{$content.title}</h1><!-- エディターを使って編集可能なコンテンツとしてレンダリング --><h1><svelte:component this={$content.title} /></h1><!-- コンテンツを文字列としてレンダリングする場合 --><div aria-label={$content.title.value}></div>

（オプション）ステップ6: ルーティングの設定

以下の手順では、SvelteKitでロケールベースのルーティングを設定する方法を示します。これにより、URLにロケールのプレフィックス（例：/en/about、/fr/about）を含めることができ、SEOやユーザー体験が向上します。

.└─── src    ├── app.d.ts                  # ロケールタイプを定義    ├── hooks.server.ts           # ロケールルーティングを管理    ├── lib    │   └── getLocale.ts          # ヘッダーやクッキーからロケールをチェック    ├── params    │   └── locale.ts             # ロケールパラメータを定義    └── routes        ├── [[locale=locale]]     # ルートグループでロケールを設定するためにラップ        │   ├── +layout.svelte    # ルートのローカルレイアウト        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # フォントとグローバルスタイルのためのルートレイアウト

ステップ7: サーバーサイドのロケール検出を処理する（Hooks）

SvelteKitでは、SSR中に正しいコンテンツをレンダリングするためにサーバーがユーザーのロケールを知る必要があります。hooks.server.tsを使ってURLやクッキーからロケールを検出します。

src/hooks.server.tsを作成または修正してください：

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // 現在のパスがすでにロケールで始まっているかを確認（例: /fr, /en）  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // URLにロケールが含まれていない場合（例: ユーザーが "/" にアクセスした場合）、リダイレクトする  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // 一時的なリダイレクト    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

次に、リクエストイベントからユーザーのロケールを取得するヘルパーを作成します：

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * リクエストイベントからユーザーのロケールを取得します。 * この関数は `src/hooks.server.ts` の `handle` フックで使用されます。 * * まず、Intlayerのストレージ（クッキーまたはカスタムヘッダー）からロケールを取得しようとします。 * ロケールが見つからない場合は、ブラウザの "Accept-Language" ネゴシエーションにフォールバックします。 * * @param event - SvelteKitからのリクエストイベント * @returns ユーザーのロケール */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Intlayerのストレージ（クッキーまたはヘッダー）からロケールを取得しようとする  const storedLocale = getLocaleFromStorage({    // SvelteKitのクッキーアクセス    getCookie: (name: string) => event.cookies.get(name) ?? null,    // SvelteKitのヘッダーアクセス    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // ブラウザの "Accept-Language" ネゴシエーションにフォールバック  const negotiatorHeaders: Record<string, string> = {};  // SvelteKitのHeadersオブジェクトをプレーンなRecord<string, string>に変換  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // `Accept-Language` ヘッダーからロケールをチェック  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // 一致するものがなければデフォルトのロケールを返す  return defaultLocale;};

getLocaleFromStorage は、設定に応じてヘッダーまたはクッキーからロケールをチェックします。詳細は Configuration を参照してください。

localeDetector 関数は Accept-Language ヘッダーを処理し、最適なマッチを返します。

ロケールが設定されていない場合は、404エラーを返したいです。これを簡単にするために、ロケールが有効かどうかをチェックする match 関数を作成できます。

import { configuration, type Locale } from "intlayer";export const match = (  param: Locale = configuration.internationalization.defaultLocale): boolean => {  return configuration.internationalization.locales.includes(param);};

注意: src/app.d.ts にロケール定義が含まれていることを確認してください：

declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

+layout.svelte ファイルでは、i18n に関連しない静的コンテンツのみを保持するために、すべての内容を削除できます。

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

次に、[[locale=locale]] グループの下に新しいページとレイアウトを作成します。

import type { Load } from "@sveltejs/kit";import { configuration, type Locale } from "intlayer";export const prerender = true;// ジェネリックな Load タイプを使用export const load: Load = ({ params }) => {  const locale: Locale =    (params.locale as Locale) ??    configuration.internationalization.defaultLocale;  return {    locale,  };};

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from 'svelte-intlayer';    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // ルートからのロケールでIntlayerを初期化    setupIntlayer(data.locale);    // レイアウトのコンテンツ辞書を使用    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

export const prerender = true;

<script lang="ts">    import { useIntlayer } from 'svelte-intlayer';    // ホームコンテンツ辞書を使用    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

（オプション）ステップ8：国際化されたリンク

SEOのために、ルートにロケールをプレフィックスとして付けることを推奨します（例：/en/about、/fr/about）。このコンポーネントは、現在のロケールを自動的にリンクにプレフィックスします。

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from 'svelte-intlayer';  let { href = "" } = $props();  const { locale } = useLocale();  // 現在のロケールでURLにプレフィックスを付けるヘルパー  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

SvelteKitのgotoを使用する場合も、同じロジックをgetLocalizedUrlで使ってローカライズされたURLにナビゲートできます：

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // ロケールに応じて /en/about または /fr/about に遷移します

（オプション）ステップ9: 言語切り替えコンポーネント

ユーザーが言語を切り替えられるように、URLを更新します。

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from 'svelte-intlayer';  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // ストア内のロケールを設定し、onLocaleChangeをトリガーします        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

（オプション）ステップ10：バックエンドプロキシの追加

SvelteKitアプリケーションにバックエンドプロキシを追加するには、vite-intlayerプラグインが提供するintlayerProxy関数を使用できます。このプラグインは、URL、クッキー、およびブラウザの言語設定に基づいてユーザーに最適なロケールを自動的に検出します。

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [intlayer(), intlayerProxy(), sveltekit()],});

（オプション）ステップ11：intlayerエディター / CMSのセットアップ

intlayerエディターをセットアップするには、intlayerエディターのドキュメントに従う必要があります。

intlayer CMSをセットアップするには、intlayer CMSのドキュメントに従う必要があります。

intlayerエディターのセレクターを可視化するためには、intlayerコンテンツ内でコンポーネント構文を使用する必要があります。

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- コンテンツをシンプルな内容としてレンダリング -->  <h1>{$content.title}</h1>  <!-- コンポーネントとしてコンテンツをレンダリング（エディターに必要） -->  <svelte:component this={$content.component} /></div>

Git設定

Intlayerによって生成されるファイルは無視することを推奨します。

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

さらに進む

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