最近話題のJSフレームワーク「Svelte」と「React」を比較してみたら...

どうも、こんにちは！

日経Techのプログラミング言語人気ランキング2020によると、JavaScriptは第３位に入っております。

React開発者にとってはとても嬉しいニュースです。

そんな人気のJavaScriptですが、「Svelte」というJSフレームワークはご存知でしょうか？

こちらの海外サイトによると、Svelteは2019年のReact, Vue.jsなど主要フレームワークの中で、最も認知度が低く、最も関心度が高いJSフレームワークだそうです。

今回はSvelteとReactで超簡単なカウンターを作成してみたので、コードを比較してみたいと思います。

React開発者である僕がSvelte触ってみた感想は

以降でコードを比較していきます。

Reactでカウンターを作成

Create-React-AppでReactプロジェクトを作成し、App.jsを以下のように変更しました。

 任意のライブラリに移動
npx create-react-app my-app
cd my-app
npm start

Create-React-Appについて、詳しく知りたい方は公式ドキュメントなどを参照してください。

// App.js
import React, {useState} from 'react';
export default function App() {
  const [state, setState] = useState(0);
  return (
    <>
<div>カウント</div>
<button> setState(state + 1)}> +1 </button>
<div>value: {state}</div>
</> ); } 

localhostで確認した結果がこちら

Svelteでカウンターを作成

Svelteでは以下のようにして、Svelteプロジェクトを作成します。

 任意のライブラリに移動
npx degit sveltejs/template svelte-sample
cd svelte-sample
npm install
npm run dev

Reactと比較するため、同様に簡単なカウンターを作ってみました。

App.svelteファイルを開き、以下のように修正します。

<script>
	let count = 0;
	function handleClick() {
		count++;
	}
</script></code></pre>
<p> </p>
<div>カウント</div>
<p><button> {handleClick()}}>+1</button></p>
<div>value: {count}</div>
<p> </p>
<p> </p>
<pre class="line-numbers"><code class="language-js">

localhostで確認した結果がこちら

Reactとほぼ同様のカウンターが作成できました！

コードをみてみると、わかると思うんですが、svelteはピュアなJSとHTMLに近い形で記述ができています。

ReactとSvelteでコード量の比較

ReactとSvelteでコード量を比較してみました！（今回記述した部分のコードのみで比較）

結果は・・・

Svelteの方が記述量が若干少ない結果となりました。

Svelteの特徴である少ないコード量は本当のようですね（笑）

これが大規模なアプリケーションでどれだけ違いが差が出るのか気になります。