svelte

Svelte

概要

Svelte は、実行時の処理をビルド時に移すコンパイラベースの UI フレームワークで、仮想 DOM を使わずに最小限の JavaScript を生成します。Svelte 5 では、明示的できめ細かなリアクティビティを実現するルーンが導入されています。SvelteKit は Svelte を基盤とするフルスタックフレームワークで、ファイルベースのルーティング、サーバーサイドレンダリング、デプロイアダプターを提供します。

使用する場合： フルスタックの Web アプリ、静的サイト、プログレッシブエンハンスメント、SSR／SSG、バンドルサイズを小さくする必要があるプロジェクト、Svelte 4 から 5 への移行。

使用しない場合： React／Vue エコシステムへの依存が必要な場合、他のフレームワークでのみ利用できるサードパーティ製コンポーネントライブラリを幅広く必要とするプロジェクト、厳しい納期のもとで Svelte の経験がないチーム。

クイックリファレンス

パターン	API / 構文	主なポイント
リアクティブな状態	let count = $state(0)	Svelte 4 の let によるリアクティビティを置き換えます
派生状態	const double = $derived(count * 2)	$: によるリアクティブ宣言を置き換えます
複雑な派生処理	const value = $derived.by(() => { ... })	複数の文からなる派生計算
副作用	$effect(() => { ... })	DOM の更新後に実行され、依存関係を自動追跡します
コンポーネントのプロパティ	let { name, age = 25 } = $props()	export let を置き換え、デフォルト値をサポートします
バインド可能なプロパティ	let { value = $bindable() } = $props()	bind:value による双方向バインディング
デバッグ用の確認	$inspect(value)	開発時のみログを出力し、本番環境では除去されます
スニペット	{#snippet name(params)}...{/snippet}	スロットを置き換える、再利用可能なテンプレートブロック
スニペットのレンダリング	{@render name(args)}	引数を指定してスニペットを呼び出します
イベント処理	<button onclick={handler}>	プロパティが on:click ディレクティブを置き換えます
Each ブロック	{#each items as item (item.id)}...{/each}	効率的な更新のためのキー付き反復
Await ブロック	{#await promise}...{:then}...{:catch}...	インラインでの非同期レンダリング
サーバーロード	+page.server.ts 内の export function load({ params })	サーバー側でのみ実行され、DB／シークレットにアクセスします
ユニバーサルロード	+page.ts 内の export function load({ fetch })	サーバーとクライアントの両方で実行されます
フォームアクション	+page.server.ts 内の export const actions	use:enhance による段階的な機能強化
レイアウト	+layout.svelte / +layout.server.ts	子ルート間で UI とデータを共有します
サーバーフック	src/hooks.server.ts 内の handle()	リクエストミドルウェア、認証、リダイレクト
エラーページ	+error.svelte	ルートごとのエラーバウンダリー
アダプター	adapter-auto、adapter-node、adapter-static	Vercel、Node、静的ホスティングにデプロイします
API ルート	GET、POST などを含む +server.ts	ページに紐づかない独立したエンドポイント
ページオプション	export const prerender = true	ルートごとの SSR、CSR、プリレンダリングを制御します
共有状態	.svelte.ts モジュール内の $state()	コンポーネント間の状態管理において writable ストアを置き換えます
生の状態	$state.raw(data)	大規模なデータセットでの深いプロキシ化を無効にします

Svelte 4 から 5 への移行

Svelte 4（レガシー）	Svelte 5（現行）
let count = 0（リアクティブ）	let count = $state(0)
$: double = count * 2	const double = $derived(count * 2)
$: { sideEffect() }	$effect(() => { sideEffect() })
export let name	let { name } = $props()
<slot />	{#snippet children()}{/snippet} + {@render}
on:click={handler}	onclick={handler}
createEventDispatcher()	コールバックプロパティ：let { onclick } = $props()
import { writable } from 'svelte/store'	.svelte.ts モジュール内の $state()
$store による自動購読	rune ベースの状態から値に直接アクセス

よくある間違い

間違い	正しいパターン
プリミティブ以外に $state を注意せずに使う	$state はオブジェクトを深くプロキシします。大きな読み取り専用データには $state.raw() を使います
$props() を分割代入するとリアクティビティが失われる	宣言時にのみ分割代入します：let { x } = $props()
$effect の依存関係を条件付きで読み取る	追跡対象の読み取りがすべて無条件に行われるようにします
$effect からクリーンアップ関数を誤って返す	関数を返します：$effect(() => { return () => cleanup() })
Svelte 5 で on:click と onclick を混在させる	Svelte 5 コンポーネントでは onclick のみを使います
新しい Svelte 5 コードでストアを使う	共有状態には .svelte.ts モジュール内の $state() を使います
{#each} ブロックで (key) を忘れる	常にキーを指定します：{#each items as item (item.id)}
.svelte ファイルから load をエクスポートする	load 関数は +page.ts または +page.server.ts に配置します
レイアウト内で親の load を await しない	子の load がレイアウトに依存する場合は await parent() を使います
サーバーの load 関数で goto() を使う	@sveltejs/kit の redirect(303, '/path') を使います

委任

• パターンの調査：Explore エージェントを使用します
• コードレビュー：code-reviewer エージェントに委任します
• ビルド設定：Task エージェントに委任します

tailwind スキルが利用可能な場合は、Tailwind CSS のユーティリティクラスのパターンと設定を委任します。 vitest-testing スキルが利用可能な場合は、Svelte コンポーネントの単体テストパターンを委任します。 playwright スキルが利用可能な場合は、SvelteKit のルートとフォームアクションのエンドツーエンドテストを委任します。 drizzle-orm スキルが利用可能な場合は、SvelteKit のサーバー load 関数で使用されるデータベーススキーマとクエリのパターンを委任します。 vite スキルが利用可能な場合は、Vite のビルド設定とプラグインのセットアップを委任します。

参考資料

• Runes とリアクティビティのパターン（$state、$derived、$effect、$props）
• スニペット、レンダリング、コンポーネントの構成
• SvelteKit のルーティング、load 関数、レイアウト
• フォームアクション、プログレッシブエンハンスメント、バリデーション
• フック、ミドルウェア、エラー処理
• Svelte 4 から 5 への移行パターン
• SvelteKit のアダプターとデプロイ