最適なSvelte i18nライブラリを選ぶ方法

Svelteにはi18n用の機能が標準で用意されていません。$tも、ロケールプリミティブも、メッセージフォーマットもありません。すべての選択肢がサードパーティ製であり、Svelteエコシステムはコンパイル時i18nが最も進んでいる領域であるため、各候補の違いはReactやVue以上に大きくなります。

本ガイドでは、まず確認すべき質問事項を整理し、それらに基づいてsvelte-i18n、Paraglide、typesafe-i18n、wuchale、Intlayerを、Vite + SvelteおよびSvelteKitの両方の環境で比較・マッピングしていきます。

目次

ライブラリを比較する前に答えるべき6つの質問

1. Vite SPAか、SvelteKitか？ SPAであればモジュールレベルのストアで問題ありません。1つのタブ、1人のユーザー、1つのロケールで完結するからです。しかしSvelteKitでは、同じシングルトンがサーバー上の並行リクエスト間で共有されてしまい、リクエストBがリクエストAの言語でレンダリングされてしまう危険があります。ライブラリがリクエストごとの分離機構（コンテキストやlocals）を提供しているか、あるいは開発者自身で実装する必要があります。
2. 誰が翻訳を作成するか？ 開発者か、TMS（翻訳管理システム）か、ICU形式を納品する翻訳会社か、それともAIパイプラインか。svelte-i18nはICUに対応しています。Paraglideとtypesafe-i18nは独自の構文を使用します。翻訳フローに合ったフォーマットを選びましょう。
3. ロケール数とページ数はどのくらいか？ 2つのロケールと5ページ程度であれば、すべてをまとめて配信できます。10ロケールと40ルートがある場合はそれが不可能になり、ランタイムカタログとコンパイル済みメッセージの差が最大のコスト要因になります。
4. キーの型安全性は必要か？ svelte-i18nでは$_("cart.totl")のようなタイポは実行時エラー（またはフォールバック）になります。コンパイル時ライブラリは構造上これを型エラーとして検出します。
5. Svelte 4のストアか、Svelte 5のRunesか？ Runesはロケール状態の構文を変えるものであり、共有問題そのものを解決するわけではありません。ただし、.tsファイル内の$stateは単純な変数にコンパイルされるため、Svelte 5を使用している場合はライブラリのランタイムがRuneに対応している必要があります。
6. リポジトリ内に生成ファイルが含まれても問題ないか？ Paraglideとtypesafe-i18nは、ソースツリー内にJavaScriptまたはTypeScriptを生成します。これを許容できるチームもあれば、並行ブランチごとにマージコンフリクトが発生して困るチームもあります。

回答を書き出してみてください。以降の内容はすべてこれらの項目を前提に進めます。

1枚の図で見る全体像

Svelteのi18nはReactやVueよりも後に登場したため、初期の段階をスキップして直接コンパイル時の波へと進みました。

各世代の詳細については、JavaScript i18nの歴史で詳しく解説しています。

最も重要な意思決定: コンテンツの配置場所と読み込みタイミング

構成におけるバンドルサイズの差の大部分は、主に2つの構造的な選択によって決まります。

• 集中管理か、コンポーネントごとのスコープ管理か。 アプリ全体で1つのlocales/en.jsonを持つか、コンポーネントごとに1つの宣言を持つか。
• 静的インポートか、動的インポートか。 起動時にすべて読み込むか、アクティブなロケール（理想的にはアクティブなルートも）をオンデマンドで取得するか。

以下のグラフは、1〜10ページ、1〜10ロケール、1ページあたり約30 KBのテキストを持つ理論上のアプリにおけるペイロードの推定値を示しています。

svelte-i18nはデフォルトで左上に位置します。register("fr", () => import("./fr.json"))によりロケールごとの動的読み込みは可能ですが、ロケールカタログは1つのオブジェクトであるため、それを読み込むと全ページのテキストが読み込まれます。Paraglideは興味深いケースです。すべてのメッセージが個別のエクスポートとなるため、ツリーシェイキングによってページ軸の最適化が無償で得られます。Svelteベンチマークでも、Vite + Svelte環境で期待通りに機能することが確認されています（ReactやNext.jsのベンチマークでは機能しませんでした）。Intlayerはコンポーネントごとの宣言によって同じ領域に到達します。

質問3の回答が「多くのページがある」だった場合は、APIの好みよりもこのセクションを重視してください。コンポーネント単位 vs 集中管理型 i18nの記事では、このトレードオフのメンテナンス面について解説しています。

比較対象の候補

ライブラリのサイズは、10ページ・10ロケールのアプリを対象にしたSvelteベンチマーク（バンドル、ツリーシェイキング、minify後の空コンポーネントにおけるストア＋アクセサ）の数値です。コンテンツのサイズは個別に測定しています。

数値はベンチマーク実施バージョンのスナップショットです。サイズだけで判断する前に、実際のアプリで計測してください。

Paraglideのライブラリサイズがほぼゼロである理由は構造によるものです。ランタイムがリポジトリ内に直接生成されます。Intlayerはvite-intlayerを必要とするため、ビルドステップなしでは動作しません。

回答に合ったライブラリを選ぶ

各ライブラリの弱点・課題

• svelte-i18n: 最も重く、キーの型がなく、ルートごとの分割がなく、コンテキストを自前で接続しない限りSvelteKit上でリクエストをまたいで共有ストアがリークする。
• typesafe-i18n: ウォッチャープロセスが必要で、リポジトリ内にファイルが生成され、最近リポジトリの動きがあまりない。
• Paraglide: リポジトリにコミットされプッシュごとに再生成される生成ファイル、並行ブランチでのマージコンフリクト、ストアからではなくメッセージ呼び出しごとにCookieやストレージからロケールを読み取るためロケール変更時の処理コストがかかる。
• wuchale: マークアップ抽出という興味深いアイデアだが、まだ初期段階。Reactベンチマークではプロバイダーの再レンダリングを強制する必要があるリアクティビティの問題が発生し、ドキュメントも少ない。
• Intlayer: 必須のビルドプラグイン、比較的小さなエコシステム、部分的なICUサポート、そして設計上コンテンツがコードベース全体に分散しているため翻訳者向けに1つのJSONをエクスポートするにはツールが必要。

各選択肢のコード例

タイトルと複数形を含む同じカート概要コンポーネントを、各候補で記述した例です。注目すべきはマークアップではなく、コンテンツがどこに配置され、ロケールがどのように保持され、型チェッカーが何を把握しているかです。

{
  "cart": {
    "title": "Your cart",
    "items": "{count, plural, one {# item} other {# items}}"
  }
}

<script lang="ts">
  import { _ } from "svelte-i18n";

  let { count }: { count: number } = $props();
</script>

<section>
  <h2>{$_("cart.title")}</h2>
  <p>{$_("cart.items", { values: { count } })}</p>
</section>

{
  "cart_title": "Your cart",
  "cart_items": "{count} items"
}

<script lang="ts">
  import { m } from "$lib/paraglide/messages.js";

  let { count }: { count: number } = $props();
</script>

<section>
  <h2>{m.cart_title()}</h2>
  <p>{m.cart_items({ count })}</p>
</section>

import type { BaseTranslation } from "../i18n-types";

const en = {
  cart: {
    title: "Your cart",
    items: "{count} item{{s}}",
  },
} satisfies BaseTranslation;

export default en;

<script lang="ts">
  import LL from "$i18n/i18n-svelte";

  let { count }: { count: number } = $props();
</script>

<section>
  <h2>{$LL.cart.title()}</h2>
  <p>{$LL.cart.items({ count })}</p>
</section>

import { plural, t, type Dictionary } from "intlayer";

const cartSummaryContent = {
  key: "cart-summary",
  content: {
    title: t({
      ja: "ショッピングカート",
      en: "Your cart",
      fr: "Votre panier",
      es: "Tu carrito",
    }),
    items: t({
      ja: plural({
        one: "{{count}}個のアイテム",
        other: "{{count}}個のアイテム",
      }),
      en: plural({ one: "{{count}} item", other: "{{count}} items" }),
      fr: plural({ one: "{{count}} article", other: "{{count}} articles" }),
      es: plural({ one: "{{count}} artículo", other: "{{count}} artículos" }),
    }),
  },
} satisfies Dictionary;

export default cartSummaryContent;

<script lang="ts">
  import { useIntlayer } from "svelte-intlayer";

  let { count }: { count: number } = $props();
  const content = useIntlayer("cart-summary");
</script>

<section>
  <h2>{$content.title}</h2>
  <p>{$content.items(count)}</p>
</section>

すでにsvelte-i18nを使用している場合、@intlayer/svelte-i18n互換アダプターによってバンドラーレベルでパッケージがエイリアスされるため、Intlayerがコンテンツを提供しながら$_、$date、$numberおよびフラットなキーを引き続き機能させることができます。

採用を決める前のチェックポイント

機能比較表は現在の機能を示しているに過ぎません。以下のポイントは、実際にそのライブラリを運用していく際の体験を左右します。

リポジトリのアクティビティを確認する。

コミット頻度、Issueへの返答時間、最新のマイナーリリースが今年行われているかを確認してください。メンテナーのいない優れた設計は、いずれ移行作業を迫られることになります。

npmのダウンロード数だけで選ばない。

最もインストールされているライブラリは、最初にリリースされたものであり、必ずしも2026年のSvelteコードベースに適合しているわけではありません。ダウンロード数は歴史の長さを示すものであり、適合度を示すものではありません。

メンテナーの収益モデルと販売対象を確認する。

svelte-i18nはnext-intlやvue-i18nと同様にCrowdinが支援しています。i18nextはLocizeが支援しています。Tolgee、Paraglide（inlang）、Intlayerはそれぞれ独自のプラットフォームを運営しています。ホスティング翻訳サービスを主な収益源とするベンダーは、開発ツールチェーン内での無料翻訳を促進する動機が薄くなりがちです。Intlayerはこの中で唯一、独自のAPIキーを使ったCLI経由のAI翻訳と、セルフホスト可能なCMSを提供しています。

AIエージェントに対応しているか？

AIエージェントは依然としてi18nの扱いに苦労することが多く、ロケールの不足、キーの捏造、メッセージ構文の混同などが起きがちです。エージェントがコンテンツのリストアップ、補完、テストを行えるように、ライブラリがAgent SkillsやMCPサーバーを提供しているか確認してください。またコンテンツの読み込みがデフォルトで最適化されているか、あるいは四半期ごとにネームスペースや遅延インポートの見直しが必要になるかも重要です。

設定なし（out of the box）での型安全性。

「追加の設定を行えば型付けできる」ではなく、「新規インストール状態で存在しないキーを指定するとtscが失敗する」かどうかです。存在しないキーを指定した場合や、1つのロケールで翻訳が欠落している場合に何が起きるかを確認してください。

未使用コンテンツの検出。

カタログは増え続ける一方です。Intlayerのビルドは未使用のフィールドを削除しログを出力します（build.purge）。Paraglideは呼び出されないメッセージ関数がツリーシェイキングされる構造になっています。他のライブラリでは未使用キーの整理を自前で行う必要があります。

開発者体験（Developer Experience）。

最初の翻訳文字列を表示するまでのセットアップ時間、ホバー時に翻訳を表示し定義元へジャンプできるLSPやVS Code拡張機能、補完・テスト・プッシュを行うためのCLI、そして開発者以外でもプルリクエストなしでコンテンツを編集できる手段（ビジュアルエディタやCMS）の有無を確認してください。

よくある質問

さらに詳しく

• Svelte i18nベンチマーク: バンドルサイズ、リーク、ロケール切り替え時間
• Svelte i18n: ストア、Runes、モジュールレベルの罠およびSvelteKit i18n: ルーティング、SSR、共有状態
• そのまま使えるsvelte-i18n互換アダプター
• JavaScript i18nの歴史
• コンパイラ vs 宣言型 i18n
• コンポーネント単位 vs 集中管理型 i18n
• ビルド時におけるバンドル最適化の仕組み
• Vite + Svelteアプリでのi18n設定およびSvelteKitアプリでの設定
• React、Vue、Solid向けの同様のガイド