#Svelteって何？
速くていい感じの JS フレームワークです。
詳しい説明はこちらの記事をご参照ください。
当記事では Svelte の基本的な文法を Vue と比較しながら解説していきます。
#Vueとの比較
以下では Vue の構成要素ごとに、Svelteではどう書けるかを解説します。
コードは全てプレイグラウンドでサクッと試すことができます。
（Svelteのバージョン：v3.4.2）
###data
Vueで言うところのdataはそのまま変数として宣言すればいいだけです。
HTML内で表示するには波カッコ1つで囲みます。
<h1>Hello { name }</h1>
<script>
let name = 'world';
</script>
これで'Hello world'と表示されます。
またVueと同様に波カッコの中には JS 文を書くことができます。
<h1>Hello { name.toUpperCase() }</h1>
<!-- Hello WORLD と表示される -->
<script>
let name = 'world';
</script>
###v-bind
単方向バインドも波カッコで囲んだ中に入れるだけです。
<input type="text" value="{value}">
<script>
let value = 'world';
</script>
また、属性名と変数名が等しい場合は次のような略記も可能です。
<input type="text" {value}>
<script>
let value = 'world';
</script>
###v-model
ここが Vue ユーザにとっては少し紛らわしいのですが、
双方向バインディングの場合は属性にbind:を付けます。
<input type="text" bind:value="{value}">
<script>
let value = 'world';
</script>
###methods
dataに当たるものが普通の変数なのでmethodsも普通の関数の形で書けます。
クリックイベントにバインドするにはon:clickディレクティブを用います。
他のイベントも同様です。
<button on:click="{handleClick}">ボタン</button>
<p>
ボタンは{ count }回押されました。
</p>
<script>
let count = 0
const handleClick = () => {
count += 1
}
</script>
computed
computedに当たるものは少し独特な記法$:を用います。
$:の後に書かれた文は、その文の中で参照された変数が変化するたびに再実行されます。
$: computedProp = prop * 2
つまり上の例では、propが変化するたびに、computedPropにprop * 2が代入されるようになっています。
全体の例も置いておきます。
この例ではisEvenがcountから算出されるようになっています。
<button on:click="{handleClick}">ボタン</button>
<p>
あなたはボタンを{isEven ? '偶数' : '奇数'}回押しています。
</p>
<script>
let count = 0
// countが変化するたび再代入される
$: isEven = count % 2 === 0
const handleClick = () => {
count += 1
}
</script>
複数行の処理を書きたい場合は、波括弧で囲んでブロックを作ればOKです。
let count = 0
let doubled = 0
$: {
console.log(count)
doubled = count * 2
}
あるいは関数を作ってそこで処理を行ってもいいです。
let count = 0;
let doubled = 0;
$: computeDouble(count)
const computeDouble = (count) => {
console.log(count)
doubled = count * 2
}
ちなみに$:記法は一見へんてこに見えますが、一応正当なJavaScriptです（label文）。
あと正式には reactive declaration（リアクティブ宣言）と呼ばれるようです。
###watch
watchも先ほどの$:記法で書くことができます。
実際computedもwatchも「データに変化があるたびに何かを行う」という点で共通していますね。
<button on:click="{handleClick}">ボタン</button>
<p>count: {count}</p>
<p>count2: {count2}</p>
<script>
let count = 0
let count2 = 0
// countが変化するたびcount2をインクリメント
$: incrementCount2(count)
const handleClick = () => {
count += 1
}
const incrementCount2 = () => {
count2 += 1
}
</script>
この例では、countが変化するたびにincrementCount2()が呼ばれ、count2が1増加するようになっています。
###その他
単純なので説明は割愛しますが v-html や v-if、v-for に当たるようなシンタックスも用意されています。
リンク先は英語ですがコードを見ればすぐ理解できるかと思われます。
#終わりに
以上 Vue の基本的な構文に沿って Svelte の文法をざっと説明してきました。
Vue に似た構文で、更に簡潔に書ける部分もあることがわかっていただけたかと思います。
次の JS フレームワークの潮流になるかどうかはわかりませんが、なった場合 Vue ユーザも簡単に移行できそうです。