816
598

More than 1 year has passed since last update.

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

Last updated at Posted at 2019-05-17

海外のフロントエンド界隈で話題になっている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 setup>
import { ref } from 'vue';

const a = ref(1);
const b = ref(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

816
598
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
816
598