JavaScriptフレームワーク「Svelte」の紹介！

はじめに

1年前にフレームワークについて調べていたらVueに似ているかつシンプルと書いてあるのを見てSvelteが気になりVueから浮気してすこし触ったきりで放置でしたが最近Svelte（スヴェルト）の記事を見かけたので乗っかって紹介したいと思います。

Svelteとは？

Svelteとは、ReactやVueといったJavaScriptフレームワークで「State of JS 2020」で「最も愛されているWebフレームワーク」「もっとも開発者の満足度の高いフレームワーク」に選ばれたことで話題となりました。

公式サイトから引用:https://svelte.jp

Write less code:既存の言語（HTML、CSS、JavaScript）で、ボイラープレートのないコンポーネントを作成することができます さらに詳しく→

No virtual DOM:Svelteは、コードをフレームワークを含まない小さいvanilla JSにコンパイルします-アプリは高速に起動し、そのスピードを維持します さらに詳しく→

Truly reactive:複雑な状態管理ライブラリは必要ありません - SvelteはJavaScriptそのものにリアクティビティをもたらします さらに詳しく→

Svelteはユーザーインタフェースを構築する先鋭的で新しいアプローチです。ReactやVueのような従来のフレームワークがその作業の大部分をブラウザで行うのに対し、Svelteはその作業をアプリをビルドする際のコンパイル時に行います。

Svelteは仮想DOMによる差分検出のようなテクニックを使用する代わりに、 アプリケーションの状態が変化したときにDOMを外科的に更新するコードを生成します。

メリット・デメリット

メリット

• バンドルサイズが小さい…実行速度の上昇
• コードの記述量が少ない…開発効率の上昇
• vueに似ているのでvueをやっている人にとってはとっつきやすい

「Hello world!」の表示を比較

<script>
	let name = 'Hello World!';
</script>

<h1>{name}</h1>

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})

表示の結果はどちらとも同じで、「Hello World!」です。

このようにVueと比較してもsvelteの方が少ないコードで書けることが分かります。

繰り返しでリストの表示比較

また、個人的にいいなと思ったのがvueのv-forに当たる繰り返しです。

配列の中身をリストタグで表示した結果は同じです。

• A
• B
• C
• D

<script> 
  const lists = ['A', 'B', 'C', 'D']; 
</script> 

<ul> 
{#each lists as list} 
  <li>{list}</li>  
{/each} 
</ul>

<div id="app"> 
  <ul> 
    <li v-for="list in lists">{{list}}</li> 
  </ul> 
</div>

<script>
new Vue({ 
  el: "#app", 
  data: { 
    lists: ['A', 'B', 'C', 'D'] 
  } 
});
</script>

複数行の繰り返しをするとき、私はsvelteの書き方の方が好きです。しかし、行数は増えてしまいます…

vueの場合、<li>を複数行繰り返そうとすると、繰り返し部分を囲う何かしらのタグが必要で、適当なタグなない場合は<template>タグを使用しますが、svelteは{}で囲うと決まっているのでわかりやすいです。

デメリット

• まだまだ他のフレームワークに比べてドキュメントや、解説しているサイトが少ない！

　　　＝＞問題に当たった時解決がしにくい…

使用できるUIコンポーネントライブラリ

参考元:Svelteで使えるUIコンポーネントライブラリをまとめてみた

BootStrapを元に作られたsveltestrapやTailwindCSSを元に作られたSmelteが使えます。

その他

• Svelma(Bulma)
• Svelte Material UI(Material-ui)
• Carbon Components Svelte(Carbon Design System)
• Svelte-Chota(Chota)

VueでいうNuxtみたいなのはあるの？

はい。

SvelteKit公式サイト:https://kit.svelte.jp/

Svelte には Vue.js でいうところの Next.js のような立ち位置の 「SvelteKit」 があります。

しかし、SvelteKitはまだ開発早期段階で、1.0に到達していないらしいです。インストールなどはできますがまだ開発段階なので本番環境で使用する場合には注意してください。

SvelteKitはとてもハイパフォーマンスなWebアプリを構築するためのフレームワークです。

モダンなベストプラクティスを全て取り入れたアプリを構築するのは複雑で、これらのプラクティスには、必要最小限のコードのみをロードするためのビルドの最適化、オフラインサポート、ユーザーがナビゲーションを開始する前のページのプリフェッチ、HTMLの生成をランタイム又はビルド時に、サーバー上又はブラウザ上で行うか設定可能なレンダリングが含まれています。

SvelteKitが全ての退屈な作業を行ってくれるので、あなたはクリエイティブな作業に専念することができます。

Vite を Svelte plugin 経由で使用しており、非常に高速で機能豊富な開発体験を提供します。Hot Module Replacement (HMR)により、コードを変更すると即座にブラウザに反映されます。

最後に

最近はNuxtを使ったウェブサイト・アプリを使って開発をしていたので、今後はSvelteを使ったコンテンツを制作し、また記事として投稿していきたいと思っています。