Help us understand the problem. What is going on with this article?

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

so99ynoodles
ダイエットのために、ラーメンは一日一食だけにしてます。 フロントエンドメインのUI / UX好きエンジニア。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした