高速で開発者体験も抜群！JavaScriptフレームワークの新星「Svelte」とは何か？

高速・軽量なJavaScriptフレームワーク「Svelte」の世界　第1回

　本連載では、「State of JS 2020」でも注目されているJavaScriptフレームワークのひとつ「Svelte」について、その概要や魅力、Svelteを使用したアプリケーションの開発方法について紹介します。今回は、同じJavaScriptフレームワークであるReactとVueと比較しながら、Svelteの特徴と、2022年にSvelteを使うべき理由について紹介します。

はじめに

　本記事では、ユーザーインターフェイスを構築するためのJavaScriptフレームワークのひとつ「Svelte（スベルト）」についてご紹介します。

　Webフロントエンドの領域は年々大きくなっており、読者の皆さまの中でもReactやVueといったフレームワークを使ったことがある方が多いものと思います。もしかしたら、Svelteの名前もどこかでご覧になり、気になっている方もいるかもしれません。

　Svelteは、そのアプローチの新しさから注目されはじめています。 JavaScript のライブラリに関する大規模調査「State of JS 2020」で「最も愛されているWebフレームワーク」「もっとも開発者の満足度の高いフレームワーク」に選ばれたことでも話題となりました。

　そこで本記事では、ReactやVueに少しでも触れたことがある方を想定して、それらと比較する形で、Svelteの特徴をわかりやすく説明していこうと思います。

　また、続く第2回・第3回では、実際にSvelteを使用してアプリケーションを開発する手順を説明します。続けてお読みいただくことで、Svelteによるアプリケーション開発の流れを一通り理解・体験していただける構成となります。

Svelteの特徴

普通のHTML＋JavaScript に近い書き方ができる

　Svelteの特徴の一つは、ユーザインターフェイスに必須の状態管理を伴うコードを、特別な記法や関数を使うことなく実装できることです。例えば、ボタンを押して数値をカウントアップ・カウントダウンするコードを、Svelte、React、Vueで見比べてみましょう。

// Svelte
<script lang="ts">
  let count = 0;
</script>

<div>
  <p>クリックした回数: {count}</p>
  <button on:click={() => count += 1}>クリックしてください</button>
</div>

// React
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>クリックした回数: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        クリックしてください
      </button>
    </div>
  );
}

// Vue
<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <div>
    <p>クリックした回数: {{ count }}</p>
		<button v-on:click="count++">クリックしてください</button>
  </div>
</template>

　いずれも、「クリックしてください」と書かれたボタンを押すと、「クリックした回数」の右側に表示されている数値がカウントアップしていきます。実際に動作しているところは、Svelteは公式のREPLから、ReactではCodePenから確認することができます。以下では主にReactとの対比で解説しますが、Vueの例も公式のREPLから確認できます。

　Reactに比べてSvelteのコードの行数が少ないことも優れた点ですが、それ以上に、従来のWeb開発で慣れ親しんできた「普通のHTMLと普通のJavaScript」の見た目にかなり近いことにも注目です。

　Reactでは、コンポーネントはクラスや関数として定義され、JSXというHTMLに似たマークアップ言語を記述することで、コンポーネントのHTML上での文書構造（DOM構造）を定義します。このJSXはマークアップ言語の宣言性と動的言語の表現力を融合させた優れたテクノロジーではあるのですが、それが故に伝統的なHTMLとJavaScriptでのWeb開発とはかなり異なった世界観を理解することが必要となります。

　一方のSvelteでは、コンポーネントの文書構造は、ほとんど普通のHTMLで書くことができます。異なるのは、{foobar}で示される構文変数や制御構造を使うことができることと、Svelte上でのイベントハンドラを表す特別な属性（上記の例ではon:click）が使えることくらいです。これらは使わなくても良いので、単なるHTMLの断片をコピペしてSvelteコンポーネントとして使いまわすこともできます。

　特に注目すべきは、コンポーネント内の状態（ステート）を使う方法です。Reactでは、これをuseState（関数コンポーネントの場合）やsetState（クラスコンポーネントの場合）といった特別な関数を使って実現するところ、Svelteでは、通常のJavaScriptの変数を定義し、新しい値を代入するだけで使用することができます。これによって、画面の表示内容の変化を伴う動的な処理でも、普通のJavaScriptを書くのと同じ感覚で開発することができます。