高速で開発者体験も抜群！JavaScriptフレームワークの新星「Svelte」とは何か？

高速・軽量なJavaScriptフレームワーク「Svelte」の世界　第1回

Svelteの特徴

小さなバンドルと高速なツールチェーンによる快適な開発者体験（Dev Ex）

　Svelteがコンパイラであることのもうひとつの帰結は、フレームワークが実行時に提供しなければならない「ランタイム」のコードが少なくて済むことです。

　仮想DOMを生成したりその比較をするアルゴリズムも、当然、ライブラリが提供するプログラムとして書かれています。

　こうしたプログラムも、ユーザのブラウザで実行するためにはどこかからダウンロードしてくる必要があります。upkgのようなCDNから<script>タグを使ってダウンロードしてくる場合もあれば、最近ではモジュールバンドラを使ってアプリケーションのコードに含めてしまうこともあります。いずれの場合でも、ランタイムのサイズはそのままアプリケーションが実行時にロードしなければならないファイルのサイズに反映されることになります。

　この点、SvelteではDOMの解析をコンパイル時に済ませてしまうため、実行時にダウンロードする必要がありません。実行すべきアルゴリズムが少ないことは、処理が早いという時間的な利点だけではなく、ロードするプログラムが少ないという空間的な利点にも寄与します。

　各フレームワークのバンドルのサイズをまとめた表を見ると、Svelteのバンドルの小ささがよくわかります。

各フレームワークのバンドルのサイズ（出典：Bundlephobia）

フレームワーク	バンドルのサイズ
Svelte	3.8kB
React	6.3kB
Preact	10.4kB
Vue	63.7kB
Angular	180.3kB

　ところで、前節では「Svelteでは、jQueryで書いていたような単純な処理が自動生成されるので速い」と書きましたが、バンドルサイズの点ではjQueryに対しても利点があります。jQuery 3.6の時点でCDNから提供されているサイズは289kBで、上表のSvelteの項目に比べると70倍以上の差があります（もちろん、Svelteがモジュールバンドラによって不要な処理を除去するtree-shakingの恩恵を受けているのに対してjQueryでは使用しないコードでもすべて含んだバンドルで比較しているのでフェアな比較ではありませんが）。

　Svelteは、Webpackでバンドルすると数分かかるような規模でも、ViteJS + esbuildでのビルドは数秒で終わることがほとんどです。ViteJSはVue 3でも使われていて、その高速さはCodeZineでも紹介され話題となりました。

　ポイントはesbuildを使ってビルドすること。esbuild自体はGoで書かれていることに加え、コードのトランスフォームをあまりしないことによってその高速さを実現しています。

「関数型プログラミング」の思想の薄さ

　最後に挙げたいのは、初心者が初めてフロントエンド開発を学ぶ環境としてのSvelteについてです。

　Reactでアプリケーションを開発していると、様々な場面で「関数型プログラミング」の考え方が登場します。例えば、公式のチュートリアルでもイミュータビリティの重要性が解かれているほか、Reactそのものの機能としても、関数コンポーネントの導入に始まり、Hooksでのステート間依存関係の定義やConcurrent modeなど、多くのアイデアが導入されています。

　関数型プログラミングは、本格的にソフトウェア開発で食べていくのであれば、どこかの段階で押さえておきたいテーマではあります。

　一方で、Webフロントエンド開発は入門者の多い分野でもあります。ソフトウェア開発にまだ興味を持っていない方でも、1日の数％はWebの画面を見て過ごす時代です。素晴らしいサービスでのふとした体験から、「こういうものを作ってみたい」と思うようになる方は少なくないのではないでしょうか。

　入門者にとって、馴染みのないコンセプトをあまりにたくさん身に付けなければならないことは、挫折の原因となりがちです。関数型言語由来のものに限らず、Reactが提唱するアイデアの多くは、考えれば考えるほど奥が深く、よく考えられています。

　しかしながら、はじめてフロントエンド開発にチャレンジするときは、あるいは練度の異なるチームでの開発を率いるときには、慣れ親しんだ考え方で自然に高性能なプロダクトを開発できる方が良い場面もあるのではないかと思います。Svelteは、そのような場面でもとりわけ輝くフレームワークです。

　ここまで前半では、Svelteの特徴をReactやVueと比較して紹介しました。Svelteやフロントエンド開発そのものをはじめようと考えている皆さまに興味を持っていただければ幸いです。

　後半では、Svelte自体から少し離れた目線で、Svelteを取り巻く環境やエコシステムについて紹介したいと思います。