おすすめ書籍はじめにフロントエンドの開発をする際のフレームワークは、Vue.jsを使うことがほとんどだったのですが、先日、知人よりSvelteなるものがあると教えてもらったので、チュートリアルをやってみました。Svelteのv1.0.0は2016年12月30日にリリースされており、現在では、v3.31.0までリリースされています。Svelteとは?はじめに、Svelteについて、さっと紹介します。公式にあるように、高速なWebアプリケーションを構築するためのフレームワークです。乱暴な言い方をすると、ReactやVue.jsなどと似た方なものです。これらとはアプローチが異なるので、その辺りを次で説明します。公式曰く、Svelteの特徴は以下の3つです。codeSvelteは、書かなければならないコード量を減らすことを目標としています。公式曰く、あるSvelteのコンポーネントと同等のReactのコンポーネントのコード量は、Svelteのコード量と比べて、だいたい4割ほど多いそうです。実際に公式サイトに掲載されていたサンプルを見比べてみましょう。初めに、Svelteで書かれたコードです。b}</p>2つの入力欄とその合計を表示するだけのシンプルな画面です。次にReactで書かれたコードです。b}</p></div>);};見比べてみると、Svelteのコードの方がコード量が少ないことが見て取れます。DOMを使わない代わりに、ビルド時にフレームワークのないJavaScriptのコードに変換されます。DOMの差分をチェックする必要がないため、高速に動作することができます。DOMを使わず、ビルド時にDOMを直接変更するコードに変換されるため、高速に動作することができます。Svelteでは状態を変化させるために状態管理ライブラリを使用する必要はありません。変数の値を変更するだけで画面に反映されます。ファイルに記述します。タグの中にCSSを記述します。CSSはコンポーネントにスコープされているので、他のコンポーネントには影響しません。100;}</style>基本的なシンタックスをいくつか紹介します。タグの中にそのまま定義するだけです。