JavaScriptフレームワーク「Svelte」とは？

Svelteとはウェブアプリケーションの構築を簡単かつ効率的に行うことができるJavaScriptフレームワークです。

同様のフレームワークとしてReactやVue.jsなどがありますが、Svelteはこれらのフレームワークとは違い、仮想DOMを使用しません。ReactやVue.jsは実行時に仮想DOMを使ってアプリケーションコードを解釈するのに対し、Svelteは「.svelte」という拡張子のファイルの中にHTMLとCSS、JavaScriptを書きそれをコンパイルすることで動作します。Reactなどのライブラリと比べて複雑ではないため、フロントエンド開発初心者にもおすすめのフレームワークと言えます。

Svelteの特徴

Svelteには以下の特徴があります。

仮想DOMを使用しない

冒頭でも少し触れたのですが、Svelteでは仮想DOMを使用しません。

従来の仮想DOMでは実際のDOMとは別に変数の更新前と更新後の仮想DOMを作成します。この作成された仮想DOMの差分を取り、実際のDOMに適用するため実行コストが高くなります。対してSvelteでは仮想DOMを使用せず、更新が行われる可能性がある変数を監視し、変数の更新が行われると実際のDOMに適用します。そのためアプリケーションの高速化とパフォーマンスの向上が期待できます。

記述するコード量を減らせる

Svelteでは全てのコードにはバグが存在する可能性があり、書かなければいけないコードが多ければそれだけバグが発生する確率が高まると考えています。そのためSvelteは、ボイラープレートの記述などを排除し、JavaScriptをそのまま記述する程度のコード量で同様の処理を行えるように作られています。公式サイトでも「重要なのは読みやすさ」と言われているようにコード量を減らすことで理解しやすいコードとなっており、初心者でも扱いやすいフレームワークと言えます。

小規模開発に必要な機能が搭載されている

Svelteにはライフサイクル機能やアニメーション、エフェクトなどWebアプリに欲しい機能が標準で搭載されています。そのため個人開発などの小規模開発で採用されることが多いです。

Svelteの問題点

Svelteには大きな問題点は報告されていません。ただし、以下のような問題が報告されています。

1. 他のフレームワークと比較すると、まだコミュニティが小さいため、開発者が抱える問題に対するサポートが限定的である場合があります。
2. SvelteはReactやVue.jsなどのフレームワークに比べて、まだ新しいフレームワークであるため、まだ普及しているわけではありません。そのため、エンジニアの間での知名度が低く、求人情報も限られているかもしれません。

しかしながら、Svelte自体に重大な技術的な問題は特に報告されておらず、むしろ高速でパフォーマンスが良く、初心者にも扱いやすいというメリットがあります。

環境構築

Svelteを使用するための環境構築を行っていきます。

今回使用するのはMacOS 13.2.1になります。

1. Node.jsの準備

まずはSvelteを使用するためにNode.jsを準備します。今回はHomebrewを使用します。

brew install node

2. バージョン確認

インストールが行えたかを確認します。問題なくインストールが行えている場合はバージョンが表示されます。

node -v

3. プロジェクトの作成

以下のコマンドでプロジェクトフォルダを作成します。フォルダ名である「svelte-project」の部分は任意のプロジェクト名に変更して大丈夫です。

 npx degit sveltejs/template svelte-project

4. プロジェクトフォルダへ移動

先ほど作成を行ったプロジェクトフォルダへ移動します。

cd svelte-project

5. npm install

以下のコマンドを使いnpmのインストールを行います。

npm install

6. プロジェクトの実行

npmのインストールが終わったらプロジェクトを実行します。　ちゃんとサーバーが立ち上げられたか確認をするためにターミナルに表示された「- Local:」のURLへアクセスを行います。

npm run dev

基本的な使い方

ここからは実際にいくつかのテストコードを使用し、基本的な使い方を解説していきます。

エディターとしてVSCodeを使用します。

メッセージの表示

まずは先ほどアクセスを行ったテストページを編集してみます。

1. App.svelte

環境構築の際に作成を行った「svelte-project」内の「src」にある「App.svelte」を編集します。

デフォルトで用意されている中身を全て削除します。

2. 編集

「Hello World」を表示していきます。「App.svelte」内に以下を記述し保存します。

<script>
  const message = 'Hello World!';
</script>

<main>
  {message}
</main>

<style>
</style>

3. 確認

編集が完了したらサーバーを起動し、確認を行います。

npm run dev

コンポーネント

コンポーネントとは構成要素や部品などの意味があり、大規模なアプリ開発などの場合は機能や役割毎にコンポーネント化し、複数のコンポーネントを組み合わせてアプリ開発を行います。

先ほどの「Hello World!」をコンポーネントとして分割し、組み合わせてみましょう。

1. 新しいファイルの作成

srcフォルダ内に「Greeting.svelte」を作成し、以下のコードを記述します。

<script>
  export let country;
</script>

<div>
  Hello, {country}!
</div>

2. 編集

先ほど使用した「App.svelte」を以下のように編集します。「Greeting.svelte」をインポートすることでこのファイル内で使用することが出来るようになります。

<script>
  import Greeting from './Greeting.svelte';
</script>

<main>
  <Greeting country="Japan"/>
</main>

3. 確認

編集が完了したらリロードし、確認を行います。

イベント処理

続いてイベント処理を行っていきます。イベントとは「クリックされたら何かをする」など何かしらのアクションが行われた際に異なる動作を行うための処理です。今回はボタンのクリックを行うとカウントの数値が1増えていくという処理を行います。

1. 編集

先ほど変更を行った「App.svelte」内を削除し、以下のコードに書き換えます。

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

<main>
  <button on:click={onClick}>click</button>
  <p>{count}回</p>
</main>

2. 確認

編集が行えたらリロードし、確認を行います。

リアクティブ

Svelteでは「$:」を使用することで変数の値の変化に応じて変化する変数や処理を定義することができます。

1. 編集

先ほど作成をしたコードに以下の2行を追加し、クリックする度に2倍される処理を行います。

$: double = count * 2 //
<p>{count} の2倍は {double}</p>

2. 確認

編集が行えたらリロードし、確認を行います。　ボタンをクリックする度に倍数が表示できるようになったと思います。

バインディング

Svelteでは「bind:value」を使用することで変数とフォームの入力値を紐付けできます。これにより入力値が変わったら変数の値も変わるといったことが簡単に実現できます。

1. 編集

先ほど作成したコードを削除し、「App.svelte」内を以下のコードに変更します。

<script>
  let name = '';
</script>

<main>
  <input placeholder="Enter your name" bind:value={name}>
  <div>Hello, {name}</div>
</main>

2. 確認

編集が行えたらリロードし、確認を行います。「Enter your name」に入力する値を変える度に変数の値も変わることが確認できると思います。

条件分岐

Svelteでは条件によって行う処理を変化させたい場合、ifを用いて条件分岐を行えます。

今回は「if」と「else」を用いてボタンを規定数クリックすると「規定数に達しました。」と表示されるようにします。

1. 編集

「App.svelte」に以下のコードを記述します。

<script>
  let count = 0;
  const increment = () => {
    count += 1;
  };
</script>

<h2>10counter</h2>
<div>
  <p>カウント:{count}</p>
</div>
{#if count < 10}
  <div>
    <button on:click={increment}>Up</button>
  </div>
{:else}
  <p>規定数に達しました。</p>
{/if}

2. 確認

編集が行えたらリロードし、確認を行います。　「up」ボタンを10回クリックすることで「規定数に達しました」と表示されれば完成です。　ifで指定している値を変更することで設定するクリック回数を変更することが可能です。

まとめ

Svelteとはコンパイル型のJavaScriptフレームワークです。

コンパイラーとして動作することで、高度に最適化されたJavaScript、HTML、CSSコードを生成します。また「重要なのは読みやすさ」という開発理念から作られているため、記述するコード量も少なく、ソースコードが非常に読みやすいため初心者の方でも少しの学習で扱えるようになります。ただし、情報量が少ないこともあり、最初の学習でつまづいてしまうこともあるため公式チュートリアルを活用して学習を行いましょう。SvelteはReact.jsなどのライブラリと比べて学習コストも低く、手軽に開発することができるため、小規模アプリを個人開発したい人におすすめです。