見出し画像

Svelteとは？Reactの比較 / TypeScriptと Sassの導入方法

sumi

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できます。

スクリーンショット 2020-06-27 13.13.11

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が発生します。

スクリーンショット 2020-06-27 13.59.55

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になりますね

スクリーンショット 2020-06-27 14.12.36

sassをインストールします。

npm i -D sass

rollup.config.jsのsvelteの設定にscssを追加します。

	plugins: [
		svelte({
　　　　　　　　（中略）
			preprocess: [
			  scss({ /* scss options */ }),
			]
		}),

結果

無事にtypescriptとscssを導入できました🎉

スクリーンショット 2020-06-27 14.17.12

VSCodeを使う場合

こちらの拡張機能をインストールしてみてください。

chrome extension の紹介

React, Vueと同様、Svelte Devtoolsがあります。

これを使うとコンポーネントが見やすいし、storeの値も見えるのでぜひインストールしてみてください。

スクリーンショット 2020-06-27 14.19.14

Routerはどうするか？

Svelte公式にRouterライブラリは用意されていません。こちらのライブラリをチェックしてください。

SPAにしたい場合はこちらをチェックしてみてください。

また、Sapperフレームワークにはルーティングが含まれています。Sapperについてはこちらで紹介しています。



スキ頂けると嬉しいです〜