Svelte は『コンパイルベース』の軽量フレームワーク
Svelte 5 では Runes と呼ばれる新しいリアクティビティ機構が導入され、コンポーネント設計が大きく進化しました。本記事では編集部の視点で、実務での使い方を公開情報をもとに整理します。Vue 3 実践 もご参考に。
Svelte 5 Runes の特徴
(1) $state：リアクティブな値。(2) $derived：派生値。(3) $effect：副作用。(4) $props：型安全 props。(5) 従来の自動リアクティブから明示的な指定へ。大規模アプリでの可読性が大きく向上しました。
SvelteKit の特徴
(1) ファイルベースルーティング。(2) SSR/SSG/SPA対応。(3) load 関数：データ取得の標準化。(4) form actions：フォーム処理。(5) adapter：複数ホスティング対応。Next.js App Router もご参考に。
状態管理
(1) Runes ベース：$state + 共有モジュール。(2) writable/readable store：従来の方式。(3) Context API：依存性注入。(4) 外部ライブラリ少なめ：内蔵で十分。(5) Pocketbase / Supabase等と相性良し。Supabase 実践 もご参考に。
SvelteKit のホスティング
(1) Vercel：標準アダプタ。(2) Netlify：標準対応。(3) Cloudflare Pages：エッジで高速。(4) Node.js：セルフホスト。(5) 静的サイト：adapter-static。
Svelte vs React の比較
(1) バンドルサイズ：Svelte 圧倒的小(公開情報をもとに)。(2) パフォーマンス：Svelte 速い。(3) エコシステム：React の方が大きい。(4) 採用市場：React の方が多い。(5) 学習曲線：Svelte の方が緩やか(初心者には)。React 学習ロードマップ もご参考に。
採用判断の現実
(1) 個人開発・小規模：Svelte 有利。(2) 大規模・採用容易：React/Vue。(3) パフォーマンス必須：Svelte。(4) エコシステム依存：React。(5) 新規プロジェクトの実験：価値あり。
失敗しがちなパターン
(1) Svelte 4 と 5 のコード混在：runes / 旧記法。(2) $effect の依存配列管理ミス：無限ループ。(3) SSR でブラウザAPI使用：エラー。(4) 巨大コンポーネント：分割なし。(5) 採用市場の現実無視：チーム拡大困難。対策は、(1)Svelte 5 へ統一、(2)依存最小化、(3)client only、(4)分割、(5)市場確認、です。