State of JS 2020 をみていて、「Svelte」がフロントエンドフレームワークの満足度ランキングトップになっていたので調べた
Svelteとは
ReactやVueのようなUIを宣言的に記述してWebアプリケーションを作るライブラリ
ドキュメントではReactとVueの簡単な実装比較がある
https://svelte.dev/blog/write-less-code
<script> let a = 1; let b = 2; </script> <input type="number" bind:value={a}> <input type="number" bind:value={b}> <p>{a} + {b} = {a + b}</p>
コードの記述量が一番少なくかける点が特徴らしい
また、コードは.svelteファイル内に記述し、バニラJavaScriptにトランスパイルして使用するのでサイズは小さく抑えられる
仮想DOMではない
Reactのような仮想DOMフレームワークで使用される差分アルゴリズムは高速ではあるが、DOM操作に加えて差分計算などのオーバーヘッドがあったり、実装によっては更新のたびに不注意に再計算される可能性があり非効率な部分がある
Svelteはコンパイル時に効率的に差分を検知してDOMに反映するコードを生成することができるので高速とのこと
https://svelte.dev/blog/virtual-dom-is-pure-overhead
まとめ
- シンプルというより、イージーという印象
- Reactとは書き方が異なるので学習コストはかかりそう
満足度トップになる由縁がわからなかったが、高速化に目を向けた時にまた注目したい
