Svelteの始め方
はじめに
株式会社SHIFTのDAAE部所属、SAKASEです。
みなさん、フロントエンド開発してますか？してますよね！ 最近は React(NextJS) や Vue(NuxtJS) が全盛ですが、いろいろと約束事が多くちょっとしたサイトを作る時に準備が大変だったりしませんか？
そこで、今回は、Svelte というフレームワークをご紹介しますね。 色々と紹介しているサイトはありますが、入門編的に読んでもらえると嬉しいです！
Svelteとは
SvelteもReactやVueと同じく、宣言的UIを利用するフレームワークです。 しかし、ReactやVueのような仮想DOM（以下、VDOM）を使わないシンプルなフレームワークです。 どちらかというと、UIライブラリというよりコンパイラに近いものです。
特徴は
コードが小さいため、バンドルされるサイズが小さい
（VDOMを使わないため）少ないコードで記述できる
（VDOMを使わないため）ランタイムでの処理が少なく、動作が軽快
とはいえ、ちゃんとリアクティブな開発ができる
あたりでしょうか。
概要
Svelteのコードは（基本的に）.svelte という拡張子のファイルの中に、HTML/CSS/JavaScriptなどを記述します。もちろん、コンポーネントを利用した開発もできます。 コンパイルされると、VanillaJSスタイルのJavaScriptファイルとCSSファイルに変換されます。
記述例
お約束のボタンをクリックするとカウントアップするコードを書いてみます。 デザインは無視しているのでスタイルシートのコードは空っぽです。
[counter.svelte]
<script>
let counter = 0;
const add = () => {
counter += 1;
}
</script>
<h1>Counter Sample</h1>
<div>Counter: {counter}</div>
<button on:click={add}>add</button>
<style>
</style>
特徴
記述量が少ない - Write less code
Svelteが、強みであると強調しているのがこれです。
シンプルにコードを書ける。
双方向バインディングが使える。
ステートの更新はミュータブルに行われる。
メリットだらけですよね。
仮想DOMではない - No virtual DOM
Svelteは、他のフレームワークのように、仮想DOM上でデータの更新などを行い、表示を書き換えることはしません。 どこが書き換えられたかを検知するための差分計算などを行わないので、処理が高速になります。
コンパイルするときに、書き換えられる場所を検知して、効率的にDOMに反映させるコードが生成されます。
高速動作はなによりも（？）正義です。
リアクティブである - Truly reactive
Svelteは、書き換えられる箇所を事前に検知することで、効率的に動くコードを生成します。 DOMに値を反映されるようなリアクティブな処理は、コード上、代入形式で処理されます。
値の更新であれば、counter + 1; のように書くことができますし、配列であれば、abc = ['a','b', 'c']; abcd = [...abc, 'd']; のように書けます。
実際に生成されるコードを見てみると面白いです。
メリットとデメリット
メリット
コードの記述量が少ない (既存フレームワーク比)
サクッとWebアプリを作れる
パフォーマンスがある程度高い
必要な部分だけのコード（ファイル）が生成される
→実行時に読み込むファイルのサイズが小さい
→自ずと処理速度が速くなる
構成がシンプル
生成されるのは JavaScript と CSS ファイルのみ
→HTMLファイルから読み込むだけで利用可能
気持ちいい開発ができる
最低限の機能はSvelteで提供されている
→UI / Styles / Animation / Life Cycle / State Management
デフォルトで TypeScript をサポートしている
デメリット
参考にできる情報が少ない
国内での情報（日本語）はあまりない
→英語の情報は探せば出てくるが、それでも少ない
それでも、最後は JavaScript なので、既存フレームワークのエコシステムが利用できる。 これから徐々にデメリットは解消されていくと考えてます。
情報入手と学習方法
まとめ
Svelte の導入としていかがだったでしょう？ 最後まで読んでいただきありがとうございました。
＼もっと身近にもっとリアルに！DAAE公式Twitter／
プロフィール Narutoshi SAKASE
新しい技術が好き。試していい結果であったものは実案件で利用できないか、と模索中。
お問合せはお気軽に
https://service.shiftinc.jp/contact/
SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/
SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/
SHIFTの導入事例
https://service.shiftinc.jp/case/
お役立ち資料はこちら
https://service.shiftinc.jp/resources/
SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/