SvelteとReactの違いを徹底比較（機能、パフォーマンスなど）

現代のウェブ開発に欠かせないと言っても過言ではないのが、JavaScriptフレームワークです。開発プロセスの効率化を担うもので、あらゆるウェブ開発の現場で使用されています。技術の向上に終わりはありません。こうしている今にもフレームワークは進化を続け、より優れた、シンプルな、そして時には複雑なフレームワークが産声を上げます。

これだけ選択肢があると、プロジェクトにあったフレームワークを選ぶのはそう簡単ではありません。

今回は、大注目のJavaScriptフレームワーク/ライブラリであるSvelteとReactについて。両者を様々な視点から比較し、それぞれの長所と短所に迫ります。

Svelteとは

Svelteは、高速で柔軟性があり、「サイバネティクス」の面での「強化」をウリにするウェブアプリケーション構築フレームワークです。GitHubのリポジトリで6万以上のスターを誇り、「最も愛用されている」そして「最も開発者による満足度の高い」JavaScriptフレームワークとして知られています。

Svelteのアプリケーションやコンポーネントは、JSXに似たテンプレート構文を用いて拡張されたHTMLファイルである.svelteにより定義されます。

歴史

Svelteは、Ractive.jsを前身として、（おなじくReactiveの開発者でもある）Rich Harris（リッチ・ハリス）氏によって開発されました。2016年にリリースされたSvelteの最初のバージョンは、実質的にはRactive＋コンパイラというものでした。

「Svelte」という名前は、Rich Harris氏とThe Guardianの同僚らにより決められました。リリース以来、Svelteは徐々にその人気と知名度を伸ばし、2019年には、TypeScriptをサポートした、ウェブアプリをすぐに構築できる本格的なツールにまで成長しました。

そして、2020年にはウェブフレームワーク「SvelteKit」が発表され、2021年にはベータ版のフェーズにまでこぎつけています。

主な特徴

Svelteは、ユーザーインターフェース構築に関して、根本的に新しいアプローチを採用しています。ReactやVueのような従来のフレームワーク/ライブラリでは、ブラウザ上で処理の大部分が行われるのに対し、Svelteはアプリのビルド時にコンパイルを行います。

つまり、Svelteは、実行時にアプリケーションのコードを解釈するのではなく、ビルドに際しアプリをクリーンなJavaScriptコードに変換するということです。その結果、フレームワークの抽象化によるパフォーマンス低下が発生することなく、アプリの初回読み込み時のもたつきを心配する必要もありません。

Svelteは、アプリ全体を構築することも、既存のコードベースに段階的に追加することも可能です。また、従来のフレームワークに依存することなく、どこでも動作するスタンドアロンパッケージとしてコンポーネントを利用することもできます。

Svelteの長所と短所

他のフレームワークと同様に、Svelteにも長所と短所があります。SvelteとReactを比較する前に、まずはその全体像を理解しておきましょう。

Svelteを利用する長所と短所は以下の通りです。

Svelteの長所

Svelteの強みは次のとおりです。

• 仮想DOMがない：Svelteはコンパイラであり、仮想DOMを使用しません。Svelteは、実行時に作業を行うのを待つのではなく、ビルド時にアプリの変更可能性を把握することができます。これは、他のウェブフレームワークと比較して、Svelteの非常に優れた点です。
• 定型文の削減：記述するコードの量を減らすことが、Svelteの明確な目標として掲げられています。Svelteでは、ユーザーインターフェースを最小限の手間で構築できます。より良いReactivity、Bindings、Top-Level Elementsなどの実装により、コードの可読性が向上するのが特徴です（詳しくはこの記事の後半で説明します）。
• 真の意味でのリアクティブ：Svelteはそれ自体が一つの言語と称されることもあり、デフォルトで非常にリアクティブです。宣言するすべての変数について、そのような特性を持たせるために特別な記述は必要ありません。また、derivedを利用した、状態の変化に伴い計算される宣言やステートメントもサポートしています。
• 学習が容易：Svelteは、素のHTML、CSS、JavaScript/TypeScriptからなるハイブリッド言語の様相を呈します。新しい概念やJSXのような特殊な構文を学ぶ必要がない分、習得が容易です。Svelteのドキュメントのわかりやすさも特筆に値します。

Svelteの短所

Svelteの弱みは以下の通りです。

• エコシステムが比較的小さい：Svelteはどちらかと言えば新しいフレームワークであり、Reactなどのフレームワークと比較すると、それを取りまく環境ができあがっているとは言えません。Reactとは違い、多くのSvelte関連のライブラリやツールを見つけることは簡単ではないでしょう。
• UXの違い：SvelteはHTML、CSS、JavaScript/TypeScriptを使用していますが、他の多くのフレームワークとは異なる独自の要素を導入しています。JSXに慣れている人がSvelteに移行すると、exportキーワードの使い方が異なったり、onClickの代わりにon:clickを使用したりするなど、いくつかの様式の違いに戸惑うかもしれません。

Reactとは

Reactは、JavaScript開発を支える技術の1つで、今日最も人気があり広く使われているウェブフレームワーク/ライブラリの一つでもあります。Reactを使って、インタラクティブなUIを簡単かつ効率的に作成することができます。

Reactアプリケーションの開発には、JavaScriptの拡張構文であるJSXを利用します。膨大な数の外部ツールがあり、全体的に非常に信頼性の高いライブラリとなっています。

Reactの歴史

Reactは2013年にMeta（旧Facebook）によって、様々なウェブサイトの動的なインターフェースを構築するツールとして開発されました。過去のDOMの概念を覆す仮想DOMが、Reactの基盤となっています。

以来、JavaScriptコミュニティによるウェブ開発を助けるべく、幅広い機能を搭載しながら進化を続けてきました。

主な機能

Reactがどのようなものかを理解したところで、Reactの人気を支えている主要な機能をいくつか見てみましょう。

JSX

Reactは「レンダリングロジックは他のUIロジック（イベント、状態管理）と連動し、一緒に管理すべき」という考えに基づき開発されています。そのため、Reactでは技術を分ける（HTMLとJavaScriptを別ファイルにする）のではなく、JSX（JavaScript XML）を採用しています。JSXを使うと、JavaScriptの中にマークアップ言語を書くことができます。つまり、コンポーネントのロジックとマークアップを1つの.jsxファイルに記述可能ということです。

コンポーネント

Reactでは、状態を管理する部品としてコンポーネントを構築し、これを組み合わせることで複雑なUIを作ります。コンポーネントのロジックはテンプレートではなくJavaScriptで記述するため、リッチデータを簡単にアプリケーションに渡し、状態をDOMから切り離すことができます。

宣言的

Reactを使って、簡単にインタラクティブなUIを作成できます。アプリケーションの各状態に対してシンプルなviewを設計することができ、データが変更されると、対象のコンポーネントを効率的に更新しレンダリングします。

Reactの長所と短所

Reactにも、Svelteと同様に長所と短所があります。このライブラリを利用する前に知っておくべき点をご紹介します。

Reactの長所

Reactをの強みは以下のとおりです。

• コードの再利用性：Reactでは、コンポーネントを利用して開発を行います。そのほとんどは再利用可能で、propsを使用して必要に応じて柔軟に変更することもできます。
• SEO：一般的に、検索エンジンは重いJavaScriptアプリケーションの解読を得意としていません。Reactはこの問題を克服し、様々な検索エンジンでの可読性を高めています。Reactアプリケーションはサーバー上で実行でき、仮想DOMは通常のページとしてレンダリングされ、その結果がブラウザに返されます。
• 大規模なエコシステム：初期に開発された選択肢の1つであり、新しいフレームワークやライブラリと比較すると、盤石なエコシステムを誇ります。これはReact関連のリソースの充実を意味します。
• ライブラリ：Reactのエコシステムが大きいということは、必然的に、Reactに対応したサードパーティツールを構築する開発者もたくさんいることになります。コミュニティは、数百万人のReact開発者が定期的に使用する素晴らしいプロジェクトを継続的にリリースしています。

Reactの短所

Reactの欠点には、以下のようなものがあります。

• 学習曲線が難しい：先に見たように、ReactではJSXが採用されています。非常に新しい技術で、Reactを使い始めたばかりの開発者向けに作られました。JSXの学習は一般的には簡単とは言えず、多くの開発者がこれの利用に二の足を踏んでいます。
• ライブラリとしての限界：Reactはライブラリであり、ウェブフレームワークではありません。つまり、必要な機能や重要な開発ツールがあらかじめパッケージとして用意されているわけではありません。さらに、この点はアプリをセキュリティや一貫性の問題にさらすことになり、開発の際には、Reactアプリが常に問題なく機能するように、外部ライブラリの継続性に依存することが予想されます。
• 充実とは言えないドキュメント：Reactでは頻繁に更新が行われており、その追跡が困難なため、Reactには完璧なドキュメントが存在しません。このため、初心者がReactを使い始めるのは少し難しいかもしれません。

SvelteとReactの比較

両者の基本的な特徴、長所、短所がわかったところで、どちらが優れているか、どちらを使うべきか、比較してみましょう。

人気度

人気という点では、Reactに勝る（※注釈：実質的な性質や用途から、これをフレームワークと捉え）フロントエンドフレームワークは今のところありません。ReactはState of JavaScript 2021によると、最も人気のあるウェブフレームワークツールで、Svelteと比較するとその差は歴然です。Reactは2013年からJavaScriptエコシステムに存在し、Svelteのような新しく開発されたフレームワークに比べ、何歩も先を走っています。

スケーラビリティと拡張性

SvelteとReactはどちらもスケーラブルで安定した開発を支える選択肢です。しかし、拡張性に関しては、巨大なエコシステムとそれを取り巻くコミュニティという点で、ReactはSvelteより少し優勢だと言えるかもしれません。

上で見たようにReact向けに構築された外部ツールは大量にあり、そのような意味でReactは、Svelteやその比較的小さなエコシステムよりも拡張性が高いと考えられます。

スピードとパフォーマンス

スピードに関して言えば、SvelteがReactに負けることはほとんどないでしょう。すでに見たように、SvelteはReactのブラウザ上でのそれとは対比的に、コンパイル段階でほとんどの処理を行います。これにより、パフォーマンスが大幅に改善でき、サーバーの起動にかかる時間も短くなります。

次に、Svelteのパフォーマンス向上を支える特徴として、仮想DOMの排除が挙げられます。Svelteの説明によれば、「仮想DOMはリアルDOMよりは速いかもしれないが、それでもまだ遅い」とのこと。この点については、Svelteの公式サイトに詳しい解説がありますので、そちらをご覧ください。

構文と学習のしやすさ

SvelteもReactもコンポーネントベースの開発アーキテクチャを採用しています。しかし、ReactがJSXを利用しているのに対し、Svelteはそれ自体がHTML、CSS、JavaScriptの3つの言語から構成されています。

また、Svelteのコードはより読みやすく、無駄なコードがないのが特徴です。Svelteはデフォルトで高いリアクティブ性を確保しており、この点でReactを上回ると言えるでしょう。

学習のしやすさについても、SvelteがReactより優位に立っています。ほとんどの開発者が、フレームワークを使い始める時点ですでに、HTML、CSS、JavaScriptに精通しているはずです。ReactはJSXを使用しているため、敷居が高いと感じる人もいるかもしれません。

サイズ

データのサイズについては、Svelteの方がはるかに軽量です。圧縮したバージョンはわずか1.7KBになります。一方、Reactは圧縮しても44.5KB近くあります（これには、ReactとReactDOMの両方が含まれます）。

このように、SvelteはReactの約22分の1のサイズであり、SvelteのアプリがデフォルトでReactのそれよりも素早く表示されることを意味します。

さらなる速度を求める場合には、サーバーの選択も慎重に行うことをおすすめします。Kinstaのアプリケーションホスティングサービスは、スピードやセキュリティを犠牲にすることなく、お手頃な価格で手間無くデプロイと管理を行いたい開発者にぴったりです。MyKinstaから、ものの数分でSvelte、Reactアプリをデプロイすることができます。

エコシステムとドキュメント

Reactは、JavaScriptエコシステムの中でも古参のウェブフレームワークの1つ（厳密にはライブラリ）であるため、Svelteよりもはるかに大きなコミュニティを誇ります。Reactに関するサポート、ヘルプ、リソースを探すのは、Svelteの場合よりもはるかに簡単です。

しかし、ドキュメントについて言えば、SvelteはReactをしのぎます。Svelteのドキュメントには、Svelteを深く学べるだけの十分な情報があり、インタラクティブな学習教材も用意されています。

一方、Reactのドキュメントは充実しているとは言えず、インタラクティブなチュートリアルの類いもありません。とは言え、Reactの新しいドキュメントリリースに向けて作業が進んでおり、現在はベータ版ですが、まもなく公開される予定です。

仕事獲得のチャンス

State of JavaScript 2021によると、Reactは認知度、利用度ランキングともに1位で、Svelteは4位にとどまっています。

ReactとSvelteの間には大きな差があります。そして、このデータからは、SvelteよりもReactの方が仕事の案件が多く存在することが予想されます。

Reactから始めることで、受け皿はより大きくなるでしょう。

動的なスタイリング

ReactもSvelteも動的なスタイリングに対応していますが、違いとして、ReactはJSXによるインラインのスタイリングに対応しています。Svelteでは、スタイルをコンポーネントファイル内の別の<style></style>ブロックに配置することになります。

まとめ

ReactとSvelteはどちらも優れたユーザーインターフェースを構築するのに便利なフレームワーク/ライブラリです。何を重視するかによって、それぞれに長所と短所があります。各特徴を参考に、どちらが自分に合っているかご判断ください。

新しいものに挑戦したいという方には、ぜひSvelteをおすすめします。パフォーマンスと満足度において、SvelteはReactをすでに上回っています。

一方で、経験豊富な開発者で、すでに確固たる地位を築いているのであれば、Reactに特化するのが堅実かもしれません。Reactのエコシステムはご存知のとおり巨大です。リソースを見つけたりサポートを受けるのに苦労することはないでしょう。ジュニアデベロッパーからシニアデベロッパー、そしてそれ以上の職種の求人が絶えないReactは、今すぐにでも就職を考える開発者にとっても、魅力的なライブラリだと言えます。

どちらの技術を選ぶにせよ、アプリケーションのホスティング選びに妥協を許すべきではありません。GitHubを通じたスムーズなデプロイメント、超高速読み込み、そして最高レベルのセキュリティがひとつになった、Kinstaのアプリケーションホスティングをぜひご確認ください。あらゆる規模のプロジェクトにマッチするプランを豊富にご用意しています。さらに、そのすべてに経験豊富なエンジニアによる24時間年中無休のサポートが付帯。

SvelteとReact、どちらを選びましたか？また何を開発予定でしょうか？以下のコメント欄でお聞かせください。