Svelteとは?Reactの比較 / TypeScriptと Sassの導入方法
Svelteとは
最近フロントエンドの技術で、ReactやVue.jsに変わって注目を集めているのが Svelte です。下記のような特徴があります。
・仮想DOMがない
・ファイル拡張子.svelteになる
・svelteファイルに記述されたstyleはスコープ付きになる
・Store管理も内包している(ReduxやVuexのようにインストールしなくてよい)
Svelteは何が良いのか?
Vue.js やReactと違って仮想DOMがありません。ビルド時に純粋なJavaScriptにコンパイルして表示します。つまりSvelteはコンパイラーです。
そもそも仮想DOMのメリットとして、アプリ全体を再レンダリングせず、変更箇所(実際のDOMと仮想DOMの差分)もしくは Contextでトリガーされたとき を検知して、局所的にレンダリングすることで高速化を図っています。
Svelteの公式ブログでは、こうした仮想DOMが「不要である」と書いてあります。
そこで、Svelteでは 仮想DOMを使用せずに アプリ全体を再レンダリングせずに変更する技術が生まれました。
コードの記述量
SvelteはReactやVueに比べて少ないコード量で記述できます。
下記ブログで紹介されているとおり、同じアプリケーションを作成するときに Reactで442文字、Vueで263文字、Svelteでは145文字で実現しています。
Svelteは記述するコードの量を減らすことを大切にしていることがわかります。コード量を減らすことは開発者の負担を減らすだけでなく、アプリケーションの実行速度に大きく影響します。
アプリの起動パフォーマンスを低下させるのはネットワーク時間だけではなく、スクリプトの解析と評価に費やされた時間であり、その間ブラウザは完全に応答しなくなります。
(中略)
Svelteはzip形式で3.6キロバイトに比べ、アプリコードなしの ReactとReactDOMの重量は約45kbになります。ブラウザーがReactを解析するのにSvelteの約10倍の時間がかかります。
このように下記Svelteのブログで紹介されています。
Vue.jsやReactが分かってなくても入門できる?
Svelte公式ブログで丁寧に説明してくれているので問題ないです。(node.jsのインストール・エディタの用意・gitについても触れています)
実際に自分が触ってみた感想としても、VueやReactを経験したことある方が入門しやすいのは間違いないですが、Javascriptの知識があれば大丈夫だと感じます。
プロジェクトの作成
degitを使ってプロジェクトのテンプレートを作成します。Svelteが公式でもdegitの使用をすすめています。
npx degit sveltejs/template svelte-ts-sample
cd svelte-ts-sample
npm install
パッケージのインストールが終わったら、「npm run dev」を実行してhttp://localhost:5000 を確認するとHello Worldできます。
npm run devするとrollupjsが実行されます。rollupはブラウザで実行できるコードへ変換しています。
JSからTSへ
App.svelteとmain.jsを下記のように変更します。
// App.svelte
<script lang="typescript">
export let name: string;
</script>
// main.js
props: {
name: 'typescript'
}
現状ではParseErrorが発生します。
svelte-preprocessをインストールします。
npm install -D svelte-preprocess typescript
rollup.config.jsのsvelteの設定にpreprocessを追加します。
import autoPreprocess from 'svelte-preprocess'
import { scss, typescript } from 'svelte-preprocess'
(中略)
plugins: [
svelte({
(中略)
/**
* Auto preprocess supported languages with
* '<template>'/'external src files' support
**/
preprocess: autoPreprocess({ /* options */ }),
/**
* It is also possible to manually enqueue
* stand-alone processors
* */
preprocess: [
typescript({ /* typescript options */ }),
]
}),
CSS から SCSS へ
App.svelteを修正します。
<style lang="scss">
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
p {
color: #ff3e00 ;
}
}
(略)
現状はParseErrorになりますね
sassをインストールします。
npm i -D sass
rollup.config.jsのsvelteの設定にscssを追加します。
plugins: [
svelte({
(中略)
preprocess: [
scss({ /* scss options */ }),
]
}),
結果
無事にtypescriptとscssを導入できました🎉
VSCodeを使う場合
こちらの拡張機能をインストールしてみてください。
chrome extension の紹介
React, Vueと同様、Svelte Devtoolsがあります。
これを使うとコンポーネントが見やすいし、storeの値も見えるのでぜひインストールしてみてください。
Routerはどうするか?
Svelte公式にRouterライブラリは用意されていません。こちらのライブラリをチェックしてください。
SPAにしたい場合はこちらをチェックしてみてください。
また、Sapperフレームワークにはルーティングが含まれています。Sapperについてはこちらで紹介しています。
スキ頂けると嬉しいです〜