Svelte・SvelteKitの概要とReactやVue.jsを履修済みの筆者の感想
はじめに
みなさん、こんにちは。
今回はSvelteとSvelteKitの特徴についてまとめています。
筆者はReactとNext.js、Vue.jsとNuxtとそれぞれ触ってきて新しくSvelteに触れています。新しくSvelteに触れることの感想も掲載していますので、よろしければご覧ください。
Svelteとは
概要
- とにかくシンプル
- フレームワーク独自のキーワードなどを利用しない
- 既存のキーワードや表現で実現する
- 事前にコンパイルしリアクティブな箇所を検知する
- 仮想DOMを使わない
- バンドルサイズが小さい
- TypeScriptを公式サポート
Svelteは近年注目のフレームワークの１つであり、ReactやVue.jsと同じようにリアクティブなコンポーネントを作成できます。Svelteを知る上での特徴をご紹介します。
とにかくシンプル
Svleteの記述はとにかくシンプルです。フレームワークとして独自のキーワードなどを利用せず、既存のJavaScriptキーワードを使って表現します。
代表的なものはリアクティブな値の表現です。リアクティブな値を表現する際はletを使った通常の変数宣言で完成です。値の更新は=で代入を指示するだけです。
Svelteはこのシンプルさにより学習のハードルも低くHTML、JavaScript、CSSの知識があれば十分Svelteを利用できます。
これはSvelte公式に掲載されているリアクティブなコード例です。count += 1の代入操作の部分がまさにリアクティブな操作です。代入によってリアクティブに動作します。
<script>
let count = 0;
function handleClick() {
count += 1; // countに代入することでリアクティブに動作
}
</script>
<button on:click={handleClick}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>
事前にコンパイルしリアクティブな箇所を検知する
SvelteはReactやVue.jsのような仮想DOMの仕組みを持っていません。Svelteはコードを事前にコンパイルし、リアクティブな値の操作箇所（=で代入している部分）を検出します。これによりSvelteは事前にDOM操作の内容を把握し、それを実現する最小限のコードを生成できます。生成されるコードは純粋なJavaScirptコードです。
ReactやVue.jsのように仮想DOMを利用するものは、リアクティブな操作によるDOMの変更はブラウザにコードがロードされた後に評価されます。Svelteは事前にコンパイルすることで事前に変更箇所を検出することができます。
「DOMの更新を最小限にする」という目的自体は同じであるものの、変更箇所の判断のタイミングをずらした別のアプローチとなっています。仮想DOMはブラウザで実行時、Svelteはコンパイル時です。
バンドルサイズが小さい
Svelteは事前にコンパイルし純粋なJavaScriptコードを生成します。これによりReactやVue.jsと比べてバンドルサイズが小さくなっています。ブラウザでダウンロード・実行するコードが少なくなるのでパフォーマンスの向上が見込めます。
ReactやVue.jsはブラウザでフレームワークに関する処理を行うため、フレームワーク本体部分のコードもブラウザはダウンロード・実行する必要があります。Svelteはこのフレームワーク本体部分がコンパイルによってなくなっています。
TypeScriptを公式サポート
SvelteでもTypeScriptを使った開発ができます。公式によりサポートされ複雑な設定などなく利用できます。
参考リンク集
SvelteKitとは
概要
- Svelteを利用したフルスタックなフレームワーク
- SvelteはUI構築を担当、SvelteKitはそれ以外を担当
- ルーティング、プリロード、SSRやSSG、オフラインサポート、ビルド最適化、など
- SvelteとSvelteKitは同じチームが開発
Svelteを利用したフルスタックなフレームワーク
SvelteKitはSvelteを利用したフルスタックなフレームワークです。SvelteでUIを構築し、SvelteKitはそれ以外のWebアプリケーションに必要な機能を提供しています。またAPIエンドポイントの作成もできるためSvelteKit１つでフロントエンドとバックエンドの両方を実装することができます。
SvelteはUI構築を担当、SvelteKitはそれ以外を担当
SvelteはUI構築に関する機能のみを提供しています。SvelteKitではルーティングを始めとするWebアプリケーション開発に必要な様々な機能を提供しています。データのプリロードやSSRやSSGなどのレンダリング技術によりパフォーマンスを向上し、ビルドやデプロイの最適化により効率的にアプリを公開できます。APIエンドポイントの作成やオフライン対応のサポートなど多くの機能を提供しております。
SvelteKitの公式に次の文言があります。
SvelteKit が全ての退屈な作業を行ってくれるので、あなたはクリエイティブな作業に専念することができます。
SvelteKitに完全に乗っかることでWebアプリ開発のサポートをフルに受けることができます。
SvelteとSvelteKitは同じチームが開発
SvelteとSvelteKitはどちらもSvelteチームが管理しています。同じ組織が管理することで統一された思想のもと開発が進められています。これもSvelteKitの強みの１つです。
ReactとNext.jsやVue.jsとNuxtはそれぞれ別の組織が管理しています。そのため方針の違いや独自進化の可能性があります。
参考リンク集
ReactやVue.jsを履修済みの筆者の感想
概要
- 学習コストが圧倒的に低い
- 特別な仕組みが少ない分、通常のJSコードとの見分けは慣れが必要
学習コストが圧倒的に低い
学習コストの低さはSvelteの最大の特徴と言っても良いと思います。ReactのJSXやVue.jsのテンプレート構文など覚えることが多々ある他のフレームワークと比べて、HTMLそのままという印象です。コンポーネントの記述はHTMLをベースにスクリプトを追記するようなイメージになり、JavaScriptで全てを制御するようなReactやVue.jsとは違った開発体験を得られます。
特別な仕組みが少ない分、通常のJSコードとの見分けは慣れが必要
Svelteは特別なキーワードなどが少ない分、Svelte特有の記述が目立ちにくく、初心者にとっては通常のJavaScriptコードとの見分けが難しいように思えます。「どこからどこまでがフレームワーク固有の記述なのか」という悩みはフレームワークの学習ではよくあることだと思いますが、Svelteはシンプルゆえに見分けが難しくなるのではないかと思います。
おわりに
Svelteはこれまでのどのフレームワークよりも始めやすいと感じました。機能もモダンフレームワークと呼べる十分なものが揃っています。まだ新しい印象で情報が少ないですが、公式も読みやすく始めるには十分だと感じています。私は結構いやかなり気に入りました。
皆さんもSvelte始めましょう！
Discussion