コンテンツにスキップ
lingui-for

Svelte: はじめに

パッケージをインストールする

セクションタイトル “パッケージをインストールする”
ターミナルウィンドウ
vp add @lingui/core lingui-for-svelte
vp add -D @lingui/cli @lingui/conf unplugin-lingui-macro

Vite を設定する

セクションタイトル “Vite を設定する”
vite.config.ts
import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
import linguiForSvelte from "lingui-for-svelte/unplugin/vite";
import linguiMacro from "unplugin-lingui-macro/vite";


export default defineConfig({
  plugins: [linguiMacro(), linguiForSvelte(), sveltekit()],
});

Lingui を設定する

セクションタイトル “Lingui を設定する”
lingui.config.ts
import babelExtractor from "@lingui/cli/api/extractors/babel";
import { defineConfig } from "lingui-for-svelte/config";
import { svelteExtractor } from "lingui-for-svelte/extractor";


export default defineConfig({
  locales: ["en", "ja"],
  sourceLocale: "en",
  catalogs: [{ path: "src/lib/i18n/locales/{locale}" }],
  extractors: [svelteExtractor, babelExtractor],
});

カスタムのマクロパッケージ名、空白処理、実行時警告の切り替えなど、Svelte 固有のオプションが必要な場合は、framework.svelte フィールドを設定してください。 詳細は フレームワーク設定 を参照してください。

Lingui を初期化する

セクションタイトル “Lingui を初期化する”

翻訳付きコンポーネントが描画される前に、レイアウトのようなコンポーネントツリーの根元付近で setLinguiContext を呼びます。

src/routes/+layout.svelte
<script lang="ts">
  import { setupI18n } from "@lingui/core";
  import { setLinguiContext } from "lingui-for-svelte";
  import { catalog } from "$lib/i18n/catalog";


  const { children } = $props();


  const i18n = setupI18n({ locale: "en", messages: catalog });
  setLinguiContext(i18n);
</script>


{@render children()}

.svelte でマクロを使う

セクションタイトル “.svelte でマクロを使う”
src/routes/+page.svelte
<script lang="ts">
  import { Trans, t } from "lingui-for-svelte/macro";


  let count = $state(1);
</script>


<h1>{$t`Hello from Svelte`}</h1>


<p><Trans>{count} item selected</Trans></p>

Svelte では、リアクティブ形式として $t が使えます。 ロケールが変わると、この式は自動で再評価されます。 $ 接頭辞をどの場面で使うべきか、内部でどう動くかは リアクティブマクロ を参照してください。

次に読むページ

セクションタイトル “次に読むページ”
  • 初期化パターン、アイランドでのセットアップ、ロケール切り替えについては i18n コンテキスト を参照してください。
  • $t などがどう動き、いつ $ 接頭辞を使うべきかは リアクティブマクロ を参照してください。
  • URL パラメータ、Cookie、ブラウザヘッダーから SvelteKit で初期ロケールを解決する方法は ロケール解決 を参照してください。
  • 端のケースや制約については Svelte の注意点 を参照してください。
  • 各マクロの正確な記述ルールが必要なら マクロリファレンス を参照してください。