BLOG

フロントエンド入門におすすめ!Svelteを紹介【JavaScriptフレームワーク】

2021/12/20

日本ではJavaScriptのフレームワークと言えばVueが人気でしたが、ここ最近はReactの波が来ている印象です。そんな中、Svelteという単語を目にしました。

調べてみると、State of JS 2020で満足度・関心のランキングで1位を獲得しており、勢いのあるフレームワークです。

今回はそんなSvelteについて紹介します。

Svelteとは

SvelteはWebアプリケーションやUIを構築するためのコンパイラです。

公式サイトでは3つの特徴を挙げています。

  • Write less code

  • Virtual DOM is pure overhead

  • Truly reactive

ReactやVueは仮想DOMを作成し、実際のDOMと仮想DOMの差分のみをDOMに反映しています。
それに対してSvelteは、コンパイル時にデータの変更に応じてDOMを書き換えるJavaScriptファイルが生成されます。
そうすることでバンドルサイズが軽量になり、パフォーマンスが向上します。

個人的にリアクティブシステムがすごいと思いました。
以下のように記述するだけで、ボタンを押せば変数countが更新されていきます。

ReactではuseStateフック、Vueではdataプロパティを使用するのに対して、シンプルな記述でリアクティブな動きが実装できます。

導入方法

Svelteをサクッと試してみたいという場合はREPLを利用してみましょう。ブラウザ上で簡単にSvelteを動かすことができます。

ローカルで動かすにはNode.jsをインストールしていない方はダウンロードしてください。
エディターにVS Codeを使用している場合はプラグインのSvelte for VS Codeをいれておくと、便利です。

では以下を参考にSvelteを導入します。

Svelteの一番簡単な始め方

以下のコマンドで、npmのライブラリの1つdegitをインストールしたのち、Svelteのリポジトリをコピーします。

degitを導入しない場合は、GitからZipをダウンロードします。
そしてダウンロードしたファイルを解凍し、プロジェクトの場所に置いてください。

上記2つのどちらで配置したら、以下のコマンドを打ちます。
TypeScriptを導入したい場合は、コメントアウトしている記述を入力してください。

http://localhost:5000を開くと、画像のように表示されていれば導入完了です。

ディレクトリ構造

テンプレートは以下のようなディレクトリ構造になっています。

基本的にファイルを操作するのはpublicフォルダとsrcフォルダになります。
まずpublic/index.htmlを見てみます。

bodyが空ですが、実際には文字などが表示されています。
次にsrc/App.svelteを見てみます。

このコンポーネントに記述されている内容がページに表示されています。
src/main.jsがアプリケーションのエントリーポイントです。body要素にAppコンポーネントを描画しています。

基本構文

コンポーネントを拡張子がsvelteのファイルに記述します。
svelteファイル内ではHTML・CSS・JavaScriptが記述できます。
styleタグ内で記述したスタイルは、そのコンポーネント内でのみ適用されます。

では基本的な記法について紹介します。

変数の描画

{}内はJavaScriptのコードを置き換えられて、表示されます。
src=”{src}”のように属性の名前と値の変数が一致する場合、{src}のように省略して書けます。

ディレクティブとバインディング

$:内は参照する値が変わるたび、このコードを再実行します
今回だと変数firstNameとlastNameの値が変更した場合、fullNameが自動的に変更されます。
ディレクティブはブロックのように書くこともできます。

フォームの入力欄など、どちらかを変更すれば片方もまた更新されるバインディングはbind:属性名={連携したい変数名}のように記述します。

ちなみに、Svelteのリアクティブシステムは代入がトリガーとなります。
pushやspliceのような配列メソッドを使った場合、自動的に値が更新されません
その場合以下の解決方法があります。後者の方がメジャーです。

ifブロック

SvelteはHTMLの表示を制御できます。
条件分岐によって表示するHTMLを変更したい場合は、ifブロックを使用します。

#:/とタグの最初の記号が全部違い、変な感じがするかもしれません。
記号の規則は表のようになっています。

記号 意味
# ブロックの開始タグ
: ブロックの継続タグ
/ ブロックの終了タグ

eachブロック

HTML要素を繰り返したい場合はeachブロックを使用します。

要素を追加したり、削除する場合は(keyにする値)で識別子を渡す必要があります。
これによりコンポーネントが更新されたときに、どの要素を変更するのか特定します。

イベントハンドラ

script内に記述した関数を実行したい場合は、イベントハンドラを以下のように定義します。

要素にon:ディレクティブを使用すると、イベントの登録ができます。
またイベントハンドラに修飾子を設定すると、イベントのふるまいを変更できます。

イベント修飾子について詳しく知りたい方は公式のドキュメントを見てみてください。

他のコンポーネントを使用する

コンポーネントの中で別のコンポーネントを使用したい場合、importを記述します。

こうすると他のコンポーネントに記述した内容が、<コンポーネント名 />の場所に表示されます。
コンポーネント名は頭文字を大文字で書いてください。小文字から始めた場合、SvelteはHTMLタグと認識します。

Props

親コンポーネントから子コンポーネントに渡す値のことをPropsといいます。
子コンポーネント側でPropsとして受け取りたい変数の前にexportを記述します。

JavaScriptのexportは外部からモジュールとして読み込むために使用します。
それに対してSvelte内のexportは宣言した変数が親コンポーネントで公開されていることを表しています。
意味がほぼ逆なので、最初は混乱するかもしれません。

また初期値を定義していると、親からpropsが渡されなかった場合にその値を参照します。

まとめ

Svelteは他のフレームワークに比べて、周辺ライブラリやエコシステムがまだ成熟していません。
ですが以下のような利点もあり、個人開発やファイル制限があるプロジェクトなどで活躍できるのではないでしょうか。

  • バンドルサイズの軽量さ

  • 少ないコード量で実装できる

  • 他のフレームワークに比べると学習難易度が低い

興味が湧いてきた方は、公式のチュートリアルが手厚いので触ってみてください。

公式チュートリアル

また以下の記事が学習リソースについてまとめられているので、紹介いたします。

[2021年版]Svelte学習リソース集

参考サイト

Svelte • サイバネティクスで強化されたWebアプリ
Getting started with Svelte – Learn web development | MDN
Svelteに入門した | フューチャー技術ブログ
Svelteで始める頑張らないフロントエンド生活 前編
Svelteとは
The Svelte Handbook

FOLLOW US