Stelte+Elmを学習中なもので、Vue.jsとElmを比べてみよう！ テンプレートとview編に便乗させていただき、Svelte編を書かせていただきます。元記事のVue.jsとElmを対比してお読みくださいませ。
①オブジェクトの表示
Svelte
汎用ループを扱うことがディレクティブはeachとなります。コレクションのそれぞれ(each)を扱うイメージを持つと良いかと。
<div id="app">
<ul>
{#each items as { message }, i}
<li> { message }</li>
{/each}
</ul>
</div>
<script>
let items = [
{ message: 'Foo' },
{ message: 'Bar' }
]
</script>
Svelteの場合、htmlコードの中に、素のJSでitemsを用意します。
私はSvelte初心者なので、REPLで確認しながら実行しています。
https://svelte.dev/repl/
Svelteの利点
全体のコード量はVueより少し短いくらい、とっつき易いJavascriptの表現になりました。HTML側のテンプレートは少し慣れが必要ですが、数も少ないので何かを作り始める際には難しくないと思います。
Svelteの問題点
Vueと同じくやはりタイポをしてしまうと、リストの文字列が空っぽになってしまいます。この程度ならすぐ気付けるかもしれませんが、ベースがHtmlという元が文章を書くための表現方法のためシンタックスのミスなどは検知がしにくいですね。短くコンポーネント(ファイル)を保つなど人間がミスを起こしにくいような仕組みを工夫し続けなければなりません。正直、大規模な開発は厳しいかと。
② 数値の扱い
Svelte
演算が必要なところのみ素のJavaScriptを用いて、結果をHTMLが解釈し文字列を導き出します。
<div id="app">
<ul>
{#each items as { num }, i}
<li> x= { incl(num) }</li>
{/each}
</ul>
</div>
<script>
let items = [
{ num: 1 },
{ num: 2 }
]
const incl = (x)=>x+1
</script>
実行結果:
Svelteの利点
表現がとても柔軟です。最初の例と変わらずに記述することができました。
Svelteの問題点
柔軟が故に以下のようなミスも起こし易いです。が、REPLで直ぐに結果を確認しておけばミスは減るでしょう。
③ 条件付き繰り返し
Svelte
Vueでは何やら留意点があるようですが、素のJSでロジックを書くSvelteでは淡々と記述するのみです。
<ul>
{#each evenNumbers as x}
<li> { x }</li>
{/each}
</ul>
<script>
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const evenNumbers = nums.filter(x => x % 2 === 0)
</script>
Svelteの利点
依然として表記としては短く簡単ですね。
Vueの問題点
なんか、このあたりVue、つらそうで可哀想。
私のまとめ
Svelteは初期の学習コストが低く、Vueのように独自に覚えることが少ない点は良い点です。しかし、複雑性が増した時にJSで頑張って書くことになります。Vueと同じく、副作用も柔軟に書けることの利点が問題点に跳ね返ってくることがしばしばありそうです。その時にどう工夫をして解決していくかが課題となると思います。
Elmとの比較は、元記事を読みましょう！私はある規模を越えたらelmを使う！
すなわち、Svelte+elm =Sveltelm ;-)
そして、Thanks, @ababup1192さん！