Svelteに入門してみる

先日のフロントエンドカンファレンス沖縄で興味が湧いたのでSvelteを触ってみたいと思います。

Svelteとは

Svelteは2016年に最初のバージョンが公開されたフロントエンドのフレームワークです。

Reactが2013年、Vueが2014年なので後発のフレームワークになります。

日本語のドキュメントも充実しています。

その特徴は以下の通りです。

バーチャルDOMを使わない

ReactやVueでは以前の記事で書いたようにバーチャルDOM（仮想DOM）を使用しています。

仮想DOMとリアルDOMの差分を検出して変更があった箇所だけ更新するという仕組みです。

しかし仮想DOMの仕組みを実現する以上、ビルドされたソースコードのサイズが大きくなってしまいます。

一方Svelteは仮想DOMを使いません。

先程Svelteはフロントエンドフレームワークだと書きましたが正確にはコンパイラです。

ビルドのタイミングでコンパイルを行い、軽量なVanilla JSを出力する為、高速に動作します。

記述量が少なくて済む

こちらに書いてあるのを見ると、

Svelteだと145文字でできることが、Reactだと442文字、Vueだと263文字かかります。Reactバージョンは文字通り3倍大きいです！

だそうです。

実際のコードを見ても、

<script>
   let a = 1;
   let b = 2;
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {a + b}</p>

確かにかなり少ない記述で実現できているのがわかります。

コードを書く量が少ないと開発効率も上がりますし、バグを生むことも減りそうです。

リアクティブ

ReactやVueと同様にSvelteもリアクティブなコードを書くことができます。

stateの変化を検知してリアルDOMに直接反映する仕組みになっています。

例えば、ボタンをクリックするごとに数値がインクリメントするコードは以下のように書けます。

<p>count: {counter}</p>
<button on:click={onClick}>hoge</button>

<script>
  let counter = 0
  const onClick = () => {
    counter++
  }
</script>

Sveltekit

現実的にwebサービスを開発する上ではServer Side Rendering (SSR)を採用することが多いと思います。

Single Page Application (SPA)ではSEOに弱かったり、初回レンダリングが遅かったりという問題がある為です。

SveltekitはSvelteを用いてSSRできるフレームワークです。

Reactで言うところのNext.js、Vueで言うところのNuxt的な立ち位置です。

以降はこのSveltekitを元に書いていこうと思います。

注意点として、Sveltekitはまだstableではありません。

SvelteKit は 1.0 に向けたリリース候補段階 (release candidate phase) で、報告された issue に対応しつつ、磨きをかけています。

引用元: イントロダクション • Docs • SvelteKit

READMEにもno more planned breaking changesとありますが今後も変更は起こりうる点に注意してください。

Sveltekitのインストール

以下のコマンドでSveltekitを使ったプロジェクトを簡単に作ることができます。

npm init svelte@latest my-app

my-appを省くとディレクトリ名を聞かれます。現在のディレクトリに作成する場合はブランクでOKです。

その後はテンプレートの種類やESLintの設定をするか等を聞かれるので順番に答えていきます。

create-nuxt-appみたいな感じです。

全部答えるとファイルが生成されるので、

npm install
yarn install

してパッケージをインストールします。

package.jsonを見ると、

"scripts": {
  "dev": "vite dev",
  "build": "vite build",
  "preview": "vite preview",
  "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
  "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
  "lint": "prettier --plugin-search-dir . --check . && eslint .",
  "format": "prettier --plugin-search-dir . --write ."
},

となっています。見ての通りSveltekitではViteを使用しています。爆速です。

npm run dev
yarn dev

を実行すると瞬時にローカル環境が立ち上がります。

こんな感じでセットアップは簡単にできました。

これ伝わるでしょうか。ファイルを保存した瞬間にもう更新が完了しています。まだほぼ空とは言え想像以上に速いです。

まとめ

今回はひとまずSveltekitを導入するところまで書いてみました。

次回以降具体的な書き方などについてまとめていきたいと思います。