Vue.js、Svelte.js、jQueryの構文比較

Vue.jsとSvelte.jsでそれぞれTodoアプリをつくって違いを見比べてみました。
作ったものがシンプルすぎるせいもありますが、ぱっと見では違いが分からないくらいには書き方が似ているので、Vueに慣れていたらSvelteの習得は楽だと思います。

Vue.jsでの実装

まずはVueでつくったToDoアプリのソースコードです。

【Vue.js】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Task list</title>
<style>
[v-cloak] {
	display:none;
}
</style>
</head>
<body>
<div id="app">
	<h2>Task list</h2>
	<input v-model="newTaskName">
	<button v-on:click="add">add</button>
	<ul>
		<li v-for="task in tasks">{{ task.text }}</li>
	</ul>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script>
let app = new Vue({
	el: '#app',
	data: {
	tasks: [],
	newTaskName: '',
	},
	methods: {
		add: function(){
			if(this.newTaskName == "") return;
			this.tasks.push({text: this.newTaskName});
			this.newTaskName= '';
		}
	}
});
</script>
</html>

Svelte.jsでの実装

つぎにSvelteでつくったソースコードです。
ループの書き方がVueとは異なりますね。またデフォルトのデリミタがVueは{{と中括弧２つなのに対して、Svelteの方は{と中括弧１つとなっています。

【Svelte.js】src/App.svelte


<div id="">
	<h2>Task list</h2>
	<input type="text" bind:value={newTaskName}>
	<button on:click={() => add()}>add</button>
	<ul>
		{#each tasks as task}
		<li>{task.newTaskName}</li>
		{/each}
	</ul>
</div>
<script>
let tasks = [];
let newTaskName = '';

function add(){
	if(newTaskName == '') return;
	tasks = [...tasks,{newTaskName}];　//スプレッド構文を使用
	newTaskName = '';
};
</script>

【Svelte.js】src/main.js

import App from './App.svelte';

const app = new App({
	target: document.body
});

export default app;

上記２つを見比べると構文の雰囲気がよく似ている事が分かります。
現在Vueの方が日本語のドキュメントも充実しているし書籍も数多く出ているので学習環境は整っていますが、一旦Vueを習得してしまえばSvelteへの移行は非常に楽なんじゃないかと思います。

スプレッド構文の参考
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

jQueryでの実装(参考)

参考までにjQueryでも同じ挙動のToDoアプリを実装してみました。
この程度のアプリだったらむしろjQueryの方が分かりやすいかもしれません。
VueもSvelteもJavaScriptのソースコードにクリックイベントを記述する必要がないですが、jQueryの場合はclassやID等をトリガーとしてクリックイベントを設定する事が必須となります。

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8'>
<title>Task list</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
</head>
<body>
<h2>Task list</h2>
<input type='text' value='' id='text'>
<button id='add'>add</button>
<ul id='todo'></ul>
<script>
const App = class {
  add() {
    $('#add').on('click', () => {
      let text = $('#text').prop('value');
      let html = `<li>${text}</li>`;
      $('#todo').append(html);
      $('#text').prop('value', '');
      });
    }
  }
let todo = new App();
todo.add();
</script>
</body>
</html>

所感

ちょっとSvelte.jsにもちょっかい出してみましたが、現状は日本語ドキュメントが充実しているVueの方が取っつきやすく、構文も見やすいなぁと感じました。
また、Svelteのうり？となっている実行速度の速さはある程度大きなアプリでないと体感し難いかもしれません。とりあえずフロントのフレームワークはjQuery以外では引き続きVueを勉強していこうって思いました。