Svelteとは何か？ReactやVueJSとの違いは？

はじめに

近年のフロントエンド界隈の技術発展は目覚ましいものがあり、「3大フレームワーク」と言われるAngular、React(Reactはライブラリですが)、VueJSの登場など、人気はとどまることを知りません。
また、フロントエンド技術の発展により「仮想DOM」や「SSG（静的サイトジェネレータ）」などの様々な技術も登場し、Javascriptを用いたフロントエンド開発はかつてのJqueryなどを使用するよりもより高速で、様々な要件の開発にも耐えうるものとなりました。
その反面、コードの再利用性を高めるために、コードが抽象的となり、学習コストが増大する等、フロントエンド開発は簡単にできなくなってきているのもまた事実です。 そこで今回は、新しく登場した高速フロントエンドフレームワークである「Svelte」を紹介します。

Svelteとは？？

Svelteは、2016年頃に登場したフロントエンドフレームワークです。 最大の特徴としては昨今のフロントエンドフレームワークでは標準で備わっていたと言ってもいい「仮想DOM」の仕組みを備えていないことにあります。
ではこの「仮想DOM」「DOM」とはいったい何なのでしょうか？まずここから言及すると共に、Svelteの画期的な特徴にも触れたいと思います。

DOMとは何か？？

DOMは「Document Object Model」の略で、HTML等でマークアップされたリソースをツリー状の構造で表現し、操作可能にする仕組みです。

このようにツリー状の構造にすることで、Javascriptが操作をすることが可能となります。要素の一つ一つを「Node」といい、この要素がJavascriptによって操作され、状態が変化します。

ではJavascriptによってNodeが変更されるとどうなるのでしょうか。

赤色の部分が変更されたNodeだとすると、Javascriptは赤色の部分のNodeを変更し、その後ページが再レンダリングされます。このように、一つや二つの変更だと、直接DOMの変更をしても不具合等は無いように感じます。

では、変更する箇所が複数ある場合はどうなるでしょうか。

Javascriptが箇所を一つ一つ順番に操作し、変更するのですが、問題は「一つのNodeが変更されるたびにページも再レンダリングされてしまう」ことです。このような単純な作りのアプリであれば大した問題では無いのですが、フロントエンドにおけるJavascriptファイルの量は年々増大しており、大規模なアプリケーションとなると、一度に数百から数千の変更があることも考えられるので、その度にページの再レンダリングをしてしまうと実行速度が遅くなり、ユーザーエクスペリエンスの低下につながったり、実行側のコンピュータに多大な負荷をかけてしまうことが予想されます。Jqueryなどのフレームワークは、現代のフロントエンド開発の要求スペックに見合わないものとなっていったのです。

仮想DOM

この状況を解決したのは、Facebook社が開発したUIライブラリである「React」でした。Reactは「仮想DOM」という当時では画期的な仕組みを備えていました。
仮想DOMは、ページに変更があるとまずメモリ上の仮想DOMにページの変更点を全て書き出します。そして、元のページと仮想DOMの変更点の差分（変わった部分）だけを再レンダリングします。これにより、従来の直接DOMを操作して変更を加えるやり方より遥かに高速で処理することが可能になりました。
Reactの仮想DOMの手法はその後のVueJSをはじめとしたフロントエンドフレームワークにも取り入れられ、「仮想DOM」の仕組みは一種のスタンダードとなりました。

Svelteの特徴

DOMや仮想DOMなど、フロントエンド周りの仕組みを軽く説明しましたが、Svelteはこのような従来の技術とは違う数々の特徴があります。

実行時のファイルサイズが小さい

Svelteは.svelte形式のファイルの中にHTML、CSS,Javascriptを記述し、コンパイル時にライブラリのコードを抜いた状態のJavascript、CSSファイルが形成されます。ライブラリのコードは物によってはかなり膨大なものもあり、それらがコンパイル時にほぼ無くなるので、従来のフレームワークよりもファイルサイズが小さくなり、高いパフォーマンスが期待できます。

コードの記述量が少ない

Svelteは従来のフレームワークよりもコードの記述量が少なくなることが期待されます。公式サイトにある同じ処理をするコードをReact、VueJS、Svelteで記述したところ、Reactで442文字、VueJSで263文字、Svelteはなんと145文字で記述できます。コードの記述方法も単一ファイルにHTML、CSS、Javascriptを記述するというVueJSのようなスタイルで、コンパクトにまとまっています。

コンパイル時に変更の可能性のある箇所を把握している

これがSvelteが仮想DOMを必要としない理由です。Svelteはコンパイル時に値が変化する可能性のあるものを全て把握することによって、差分を検知し、効率的にDOMに反映させることができます。仮想DOMが無いからといって、従来のように直接DOMを操作してその度に再レンダリング・・というような泥臭いことはしません。

Svelteにすぐ乗り換えるメリット、デメリット

メリット

• ・コードの記述量が少なく済むので、開発効率が上がる
• ・ファイルサイズが従来のフレームワークより格段に小さくなるので、実行速度が上がる
• ・VueJSと似たような記述方法なので、VueJSの使用経験がある人は移行がスムーズにいく可能性あり

デメリット

• ・情報が少なく、学習するには公式サイト等の英語の情報しかないこと
• ・Redux、Vuexのような大規模開発向けのエコシステムが不十分なため、まだ大規模開発には向かない

まとめ

今回はSvelteについて取り上げました。フロントエンド界隈は現在技術の発展が目覚ましいので、次々に新しい技術が登場し、開発者は学習が大変ですが、この記事が技術選定の際の参考になれば幸いです。