Svelteは2016年11月、英国出身のリッチ・ハリス（Rich Harris、当時The Guardian所属）が公開したUIフレームワークです。React・Vueと違って実行時に仮想DOM（Virtual DOM）を持たず、ビルド時にコンポーネントを素のDOM操作へコンパイルしてしまうのが最大の特徴。ランタイムサイズを小さくしつつ高速なレンダリングを実現し、Stack Overflow開発者調査の「最も愛されているフレームワーク」で2020年・2021年と1位を獲得しました。2024年公開のSvelte 5でルーン（runes）構文を導入し、リアクティビティの基盤を刷新しています。
この記事の目次
- Svelteを特徴づける仕組み
- Svelte誕生からSvelte 5まで
- 実装スタイル
- React・Vue・Solidとの違い
- まとめ
Svelteを特徴づける仕組み
Svelteは「コンポーネントは.svelteという独自拡張子のファイルに書き、コンパイル時に純粋なJavaScriptへ変換する」という思想で組み立てられています。React/Vueが実行時に仮想DOMを構築・差分計算するのに対し、Svelteはビルド段階で「どの状態が変わったらどのDOMを書き換えるか」を解析するため、ランタイムライブラリが極小（数キロバイト〜）に収まり、初期ロードと実行時パフォーマンスの両方で有利になります。
Svelte 5（2024年10月正式版）で導入されたルーン（runes）は、リアクティブな状態を表す$state、派生値の$derived、副作用の$effectなど、$から始まる特殊シンボルでリアクティビティを宣言する仕組みです。公式フレームワークSvelteKitは2022年12月の1.0公開以降、ルーティング・SSR・エッジ配信・フォームアクション・アダプター式デプロイ（Vercel/Cloudflare/Node）など、Next.jsに相当する機能をフル装備で提供しています。
Svelte誕生からSvelte 5まで
リッチ・ハリスは英ガーディアン紙のデータビジュアライズ担当として、軽量UIライブラリ「Ractive.js」を開発していました。「実行時ではなくコンパイル時に解決すれば、ランタイムは要らない」という発想を発展させ、2016年11月にSvelteのバージョン1を公開。2019年4月にはSvelte 3で「変数への代入をそのままリアクティビティとして扱う」という独特の構文を採用し、開発者の心を掴みました。
ハリスは2021年11月にVercelへ入社し、Svelte本体の開発を本業として継続することになります。VercelはNext.jsの開発元でもあり「複数フレームワークを並行支援する」スタンスを示した形です。2022年12月にSvelteKit 1.0が登場し、Next.jsに対抗するメタフレームワークとして整備。2024年10月にはSvelte 5が正式リリースされ、ルーン構文への移行と内部刷新が進みました。The New York TimesやIKEA、Cloudflare、Brave、1Passwordなどが本番採用例として知られています。
実装スタイル
SvelteKitプロジェクトはnpm create svelte@latestで生成し、src/routes配下に+page.svelteを置くだけでルーティングが完成します。各.svelteファイルは