Svelteの紹介とVue.jsとの比較

Rowee calender 2022.2.21

Web ブラウザで動作するフロントエンドの UI フレームワークは、目まぐるしく変化しています。
代表格として、実行速度と開発効率の両立などの側面から React や Vue.js がよく使用されていますが、近年注目を集めているフロントエンドのフレームワークに「Svelte」があります。
今回、この「Svelte」についての紹介と、弊社で採用している「Vue.js」との比較をします。

Svelteとは

Svelte を説明する際、「最小かつ高度に最適化された JavaScript コードを生成するコンパイラ」と説明されることがよくあります。
この一文の通り、 Svelte は React や Vue.js とは根本の設計思想が大きく異なるフレームワークです。

React や Vue.js は、仮想 DOM を動的に操作するためのフレームワークライブラリとして開発されました。当然、ブラウザで実行されるアプリケーションコードには必ずライブラリのコードが含まれており、ページを開くたびに実行されます。
一方、 Svelte は Svelte ファイルを JavaScript にコンパイルし、 Svelte 自身のコードは含まれません。そのため、 React や Vue.js のように最初に読み込まれる際に発生するオーバーヘッドは発生しないうえ、ライブラリのコードが含まれない分、アプリケーションコードのサイズを小さくすることができます。

Svelte • Cybernetically enhanced web apps

Cybernetically enhanced web apps

https://svelte.dev/

Vue.js と比較してわかるメリット

Vue.js との比較にあたって、以下のサイトで Lighthouse を用いたテスト結果があります。こちらのグラフを引用して解説します。

A RealWorld Comparison of Front-End Frameworks 2020 | by Jacek Schae | DailyJS | Medium

Let me start with this — this is by all means not a comparison of what should be your next choice for Front-End. It’s a small, relatively unsophisticated, comparison of three things: Performance…

https://medium.com/dailyjs/a-realworld-comparison-of-front-end-frameworks-2020-4e50655fe4c1

メリット①　実行速度が速い

主要フレームワークで、 Lighthouse の「Performance score」を比較したグラフです。

Performance (points 0–100) — higher is better.

グラフでは、 Svelte の Performance score は99点と高スコアなのに対し、 Vue.js は86点とやや低めです。
このような差が発生する理由は主に2点あります。

1点目はSvelteによってコンパイルされたアプリケーションコードにはライブラリのコードが含まれていないことです。そのため、ライブラリの初期化等のオーバーヘッド処理が含まれているVue.js よりも高速に表示することができます。

2点目は、 Svelte の生成する JS コードは、仮想 DOM を使用していないことです。
Vue.js をはじめとする多くのフレームワークは仮想 DOM を使用してドキュメントを書き換えます。動的なUIを実現するにあたり仮想 DOM は優れた手段の一つですが、ライブラリが生成した仮想 DOM すべてに更新がないか差分検出する必要があり、場合によっては不必要な差分検出を行っている場合があります（例えば、ドキュメント構造が変わらず、テキストのみ書き換わる等）。
Svelteでは仮想 DOM を生成せず、コンパイル時に必要な更新のみ行うように最適化し、差分検出にかかるコストをなるべく小さくしているため、高速に更新することができます。
この仮想 DOM の説明は公式サイトのブログにさらに詳細に説明されています。

Virtual DOM is pure overhead

Let's retire the 'virtual DOM is fast' myth once and for all

https://svelte.dev/blog/virtual-dom-is-pure-overhead

上記の理由によって Svelte は高速なアプリケーションを実現し、それが Performance score の結果として現れています。

メリット②　サイズが軽量

次に、アプリケーションコードのファイルサイズを比較したグラフです。（単位:KB）

Transfer size in KB — fewer is better

グラフでは、 Svelte(15kb) のファイルサイズは Vue.js(71kb) のファイルサイズの1/5程度となっており、とてもサイズが小さくなっています。
ファイルサイズが小さくなればなるほど、ファイルのダウンロードが完了するまでの時間や、アプリケーションコードの読み込みにかかる時間が短くなるため、ファイルサイズの大きさはメリット①の高速化を実現するうえでも非常に重要な要素です。

Svelte の生成するファイルサイズが非常に小さい理由は、 Svelte がコンパイラであるためライブラリのコードが含まれないという点や、コンパイル時の最適化が優れている点が挙げられます。
Svelte が行っている最適化については公式サイトのブログにて詳しく説明されています。

Write less code

The most important metric you're not paying attention to

https://svelte.dev/blog/write-less-code

メリット③　充実したエコシステム

これは Vue.js にもあるため、正確にはメリットではありませんが、 Svelte には Vue.js にあるような大規模開発を支援するライブラリが既に作られています。

これらはそれぞれ Nuxt.js 、 Vue Native(非推奨) と同じ位置づけのライブラリとなっており、本格的に使用のための準備が整えられつつあります。

デメリット

Vue.jsと比較してわかるメリットで挙げた通り、 Svelte には様々なメリットがあります。
しかし、Svelteはまだ登場して日が浅いフレームワークライブラリなため、様々な企業からの大きな後ろ盾があり、コミュニティの規模も大きい Vue.js などと比べるとまだ一部の開発者しか利用しておらず、規模の小ささは否めません。
必要な機能があった場合、 Vue.js では大抵は既に誰かが実装して公開しているようなものであっても、 Svelte の場合は自分で作らなくてはいけない場面が出てくる可能性は大きいため、いざ本格的に使用してみようとしても二の足を踏むことになりそうです。

まとめ

Svelte 非常に優れたフロントエンドフレームワークであり、誕生して日が浅いにもかかわらず非常に優れたエコシステムを持っています。
今のところ、Svelte のベストユースケースは、シンプルなシングルページアプリケーションや、管理画面の動的データテーブルなどのようなちょっとした用途に使用するのが向いていると思います。