SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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を取り巻く環境やエコシステムについて紹介したいと思います。

次のページ
2022年にSvelteを使うべき理由

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
高速・軽量なJavaScriptフレームワーク「Svelte」の世界連載記事一覧
この記事の著者

濱口 恭平(ハマグチ キョウヘイ)

 1990年・三重県生まれ。ドイツに拠点を置く Web3 / Privacy Tech スタートアップ でCTO/VPoEを務める傍ら、サイドプロジェクトとして「誰でも使えるビデオ通話SDK 」"kommu" を開発している。 多くの人に快適な開発者体験を提供できるフロントエンド技術を探求する中で Svelte に出会い、開発者コミュニティでの交流をきっかけに2021年には公式イベントSvelte Summit での登壇を経験。 2022年からは国内...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15394 2021/12/28 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング