目次
Svelteとは?
Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM. 訳:Svelteはウェブアプリケーションを構築するための新たな方法です。Svelteは宣言的コンポーネントを用い、効率的にそれらを外科的にDOMをアップデートするコンパイラです。
上記は、Svelteの公式サイトから引用してきたものです。ご存知の通り、ReactはJavaScriptのライブラリ、VueとAngularはJavaScriptのフレームワークですが、Svelteはコンパイラです。これは何を意味するのでしょうか?
もともと、AngularやVue、Reactが開発された目的の1つはDOMの不要なアップデートを抑えるためでした。jQueryは素晴らしいフレームワークの1つですが、サイトやアプリケーションの一部を修正すると、全てのページが再レンダリングされてしまう欠点を持っていました。小さなアプリケーションであれば問題ありませんが、大きなアプリケーションとなるとレンダリングのコストが増大するため、大きな問題になり得ます。
Reactなどのフレームワークはこの問題に仮想DOMを用いて対処しました。仮想DOMを用いることで、実際に更新された差分のみを更新し、不要なレンダリングを抑えることができます。
Svelteはこの問題を、Svelte自身がコンパイラとして変更の差分を検出、更新することで解決しました。また、Svelteはコンパイル後のファイルにJavaScriptやCSSのライブラリのコードを取り除いたものを出せるので、コンパイル後のファイルサイズも小さくなります。Svelte自身はただのコンパイラなので、非常に軽量です。また、コードを非常にシンプルに書けるというメリットもあります。
もちろん、デメリットもあります。現時点ではRedux(React)やVuex(Vue)などの大きなエコシステム及び状態管理システムを持たないため、大規模なアプリには不向きと言えるかもしれません。
ここからは、シンプルなカウンターアプリを用いてSvelteの使い方について簡単に説明します。
導入のためのステップ
- 1. 必要なライブラリのインストール及び環境構築
npx degit sveltejs/template YOUR-APP-NAME cd YOUR-APP-NAME npm install(CRAを使ってReactのアプリを作成した時と違い、この時点ではnode_modulesがインストールされていません。なので、一度インストールする必要があるので注意です)。 npm run dev
- 2. 必要に応じて、作成されたファイルを確認してください(任意です)。CRAと違ってwebpackではなくrollupがバンドルツールとして用いられている点、タイプチェッキングファイルがあるのでTypeScriptも簡単に使えそうな点が印象的です。main.jsの中にはAppのインスタンス化が行われており、Vue2の書き方と似ていることが分かります。
// main.js(参考として載せているだけで、デフォルトのまま変更の必要はありません)
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app
- 3. counterフォルダとCounter.svelteファイルを作成してください。Reactの拡張子は.js(jsx)、Vueの拡張子は.vueですが、svelteの拡張子は.svelteになります(そのまんまですね)。ベーシックなカウンターアプリのコードを以下に記載します。Vueをもし使ったことがあればお気づきかもしれませんが、Vueの書き方と非常によく似てます。JavaScriptのパートはscriptタグで囲い、CSSのパートはstyleタグで囲います。異なる点は、HTMLのパートはtemplateタグで囲う必要がないところです。実際のコードの書き方自体も非常にシンプルで、書き方自体はVue3のcomposition APIのsetup script構文に酷似していますがrefのインポートも不要です(もちろんset upの記載も不要です)。また、Vueはこのファイルだけにスタイルを利かせたい場合はscopedを記載する必要がありますが、Svelteの場合はその記載も不要で、デフォルトでscopedな設定になっています(書き忘れがなくなるのでありがたいですね)。例えば今回のケースだと、ボタンの文字を青色に変えていますが、この設定はCounter.svelteファイルだけに適応されます。また、これはReactをよく使う人向けの注意ですが、"onClick"ではなく"on:click"と記載しないと動きません。あくまで書き方はVueに近い印象ですね。
// Counter.svelte
<script>
let count=0;
const incrementCount = () => {
count++
}
</script>
{count}
<button on:click={incrementCount}>
add
</button>
<style>
button {
color: blue;
}
</style>
- 4. 作成したCounter.svelteファイルをApp.svelteにインポートし、利用してください。Reactに慣れている人はこちらも最初戸惑うと思いますが、export defaultをつけなくても自動でexport defaultされる仕様になっています。もちろん、各変数や関数を別途エクスポートすることもできます。便利ですね。余談ですが、Vue3のcompositionAPIのscript setup構文の場合もexport default不要で自動エクスポートされます。理解すれば便利ですが、Reactから入った人は戸惑うかもしれません(自身も最初はかなり戸惑いました。。)。
// App.js
<script>
import Counter from "./counter/Counter.svelte"
</script>
<Counter/>
- 5. 以下が実際のカウンターアプリの画面です。きちんと動いていますね。ちゃんとのボタンテキストの色も青に変わっています。
まとめ
本文中でも述べましたが、Svelteは軽量で、シンプルにコードが書けるコンパイラです。
シンプルなカウンターアプリ1つとっても、Vueのようにtemplateタグやrefのインポートが不要(composition APIの場合)で、ReactのようにuseStateを用いてreactiveな値にする必要がありません。結果、コードの量もReactやVueと比較しても減らせる傾向があります。
また、個人的にチュートリアルが充実しているのもSvelteの良いところの1つだと思っています(Async/awaitの使い方などもチュートリアル内にあります)。参考資料内にチュートリアルも載せるので、ぜひご参考いただければと思います。
参考資料
Official documentation: https://svelte.dev/
Official tutorial: https://svelte.dev/tutorial/basics
A Practical Introduction to Svelte: https://blog.openreplay.com/a-practical-introduction-to-svelte
Vue official documentation(script setup): https://vuejs.org/api/sfc-script-setup.html
Svelteとは何か? ReactやVueJSとの違いは?: https://it-kyujin.jp/article/detail/1631/
ここまでお読みいただきありがとうございました!