Edited at

ReactとVueを改善したSvelteというライブラリーについて


海外のフロントエンド界隈で話題になっているSvelte

最近海外のフロントエンド界隈でSvelteが少し話題になっています。

この記事では、なんでSvelteが話題になってるのか、そしてReactやVueの代わりに、Svelteを使うメリットについて私が感じたことを共有していけたらと思います。

上記の動画を見ていただければ、正直私が説明することはほぼゼロです。

私的にはすごくよかった内容なので、ぜひ見ることをお勧めします!


Svelteって結局なにがいいの?

Svelteは速く、軽いです。

ベンチマークでReactの35倍、Vueの50倍速いです。

Svelteはコンパイラーであるため、実質ライブラリーとしての容量は0kbです。

(もちろんコンパイル時に少しはコードが加わりますが)

image.png左からsvelte, imba, react, vue

※TypeSciprtサポートはまだないみたいです


[2019.07.05]追記 VueもSvelteの良いところを取り入れる

JSConf.Asia - LASALLE College of the Arts, Singapore - 15 June 2019

一昨日公開された動画ですが、Vueの製作者Evan YouもVueに改善点を重ねてきました。

Svelteの良いところを取り入れた3.0-proto-2019-06のパフォーマンス改善を見てください。

image.png

Evan You氏はこういうところがすごいですよね。

発展していくVue.js、とても魅力的です。


Svelteは状態管理を最適化する

既存のフレームワークは状態変更によってVirtualDOMが何度もRe-renderされるため(相対的に)非効率的です。Reactでは解決法としてuseMemo、componentShouldUpdate、PureComponentなどが使えますが、SvelteではそれをObservableで対応します。


Svelteはコンパイラー

上でも述べたように、ReactやVueのようにブラウザー上でコンポーネント化をするフレームワークではありません。*.svelteファイルをhtml, js, cssに変換してくれるだけです。


書き方が簡単でコード量が少ない

書き方自体はVueとすごく似てます。

若干癖がありますが、コード的にもわかりやすくなってます。

書く量も少ないため、開発スピードが上がりそうです。


example.svelte

<script>

let a = 1;
let b = 2;
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {a + b}</p>


以下は同じコードをReactとVueで書いた場合です。


example.jsx

import React, { useState } from 'react';

export default () => {
const [a, setA] = useState(1);
const [b, setB] = useState(2);

function handleChangeA(event) {
setA(+event.target.value);
}

function handleChangeB(event) {
setB(+event.target.value);
}

return (
<div>
<input type="number" value={a} onChange={handleChangeA}/>
<input type="number" value={b} onChange={handleChangeB}/>

<p>{a} + {b} = {a + b}</p>
</div>
);
};



example.vue

<template>

<div>
<input type="number" v-model.number="a">
<input type="number" v-model.number="b">

<p>{{a}} + {{b}} = {{a + b}}</p>
</div>
</template>

<script>
export default {
data: function() {
return {
a: 1,
b: 2
};
}
};
</script>



フレームワークとの比較 (2019.05現在)

Svelte
React
Vue
Angular

軽さ
凄く軽い
軽い
普通
重い

feature
コアのみ
コアのみ
普通
多い

人気
低い
高い
高い
普通

管理
個人
Facebook
コミュニティ
Google

情報
少ない
多い
多い
多い


その他


  • Redux, Vuex ⇒ stores (Built-in)

  • Next/Gatsby ⇒ Sapper

  • React Native / nativescript-vue ⇒ Svelte Native (Community主導)

  • WebGL, Three.js ⇒ Svelte GL


感想

Svelte自体は前から存在してたらしいですが、Version 3からいろいろ変わったっぽいですね。

最初見た時は「なんだーこのライブラリー」と思いましたが、実際に開発の思想を聞いてみて、すごくワクワクしてきました。

もちろん、VueもReactも凄いフレームワークで、どっちが優れてるとかはありませんが、私はSvelteがより広く使われることを期待しているので、共有させていただきました。

次はSvelteでアプリを作るデモなどを書いてみたいですね。

チュートリアルはこちら。

https://svelte.dev/tutorial/basics