svelteについて

近年のJSフレームワークで存在感を発揮しているsvelteの特徴や思想を把握する。

公式

参考

特徴

そもそもJavaScriptで変数の値が変わっても、ブラウザ側はそれを検知できないので、表示の値が変わる事はない。

Reactではhooksなどを用いて、必要に応じてレンダリングを行う事で表示を更新している。

svelteはJSをコンパイルする際に、hooksの様に中の値が変わるたびに呼ばれる形に変換する

ブラウザが更新される度に直接DOMを再構築するとコストがとてもかかる。
DOM構造をJavaScriptでデータ構造として記録し、実行前後で比較出来るようにする。
比較結果で変更が必要な部分のみを更新するので低コストで済む

従来の仮想DOMはブラウザにロードされて実行する時に評価を行う。

svelteはユーザーに配信する前のビルドのタイミングでコードがコンパイルされるので、この段階でDOMが実際にユーザーの手元でどのように変化をするか掌握している。

コンポーネントのコードやDOM構造を解析するタイミングの違い（上：React、下：Svelte）【画像元】

svelteがコンパイラである事の恩恵として、ランタイムのコード量が少ない事があります。

「ランタイムのコード量 = ユーザーが手元でプログラムを実行する際にロードするファイルのサイズ」なので少ないに越したことはありません。

画像でもわかる通り、各フレームワークの中でsvelteが一番バンドルサイズが小さくなっています。

理由として、svelte以外のフレームワークはユーザー側の実行時に仮想DOMの判定を行うためランタイムが重くなりがちなのに対し、svelteは実行可能な形にコンパイルした結果がランタイムとしてユーザーの手元に届くからです。

svelteはHTML,CSS,JavaScriptをそのまま書いている感覚に近い為、Reactに見られる関数型プログラミングへの理解が無くても参入しやすい！！

svelteは近年とても開発者の中で注目されている。
State of JSのフロントエンドフレームワークで3年連続、興味がある分野で1位

また、svelte開発者は2021年11月にvercelに移籍し、今まで本業の傍らsvelteを開発していたがフルタイムでsvelteに専念することを発表している。

vercelという現在のフロントエンド界隈をリードしまくっている企業がバックについた事もあり、周辺ライブラリとの連携の見通しも良くなり、svelteの未来はだいぶ手堅いと個人的には感じている。

次はこれで手を動かしてsvelteの感覚をつかみたい