今年のゴールデンウィーク（STAY HOME週間）に最近話題のSvelteに入門したので紹介を書きます。

Svelteとはなんですか？

公式のサイトはこちらです。有志の方々が日本語翻訳のサイトを作ってくれています。たいへんありがとうございます！

[Svelte]は主にブラウザ上で動作するユーザーインタフェースを作るフレームワークで、[React]や[Vue.js]の対抗馬的な存在です。

特徴とReactやVue.jsなどほかとの違い

公式サイトでも、コーディングする際のコード量が少ないという特徴があげられています。

詳しくはこちらのブログに書かれています。コードが多ければ作業時間とバグが増えてしまうため、コードが減らすことはこれらの問題を減らすことができるというようなことが書いてありました。またブログには具体的なコードで量の差について書いていますのでぜひ見てみてください。

Svelteは主にコンパイラであり、ReactやVueと比べるとSvelteはランタイムをほとんど提供しません。これによって構築するアプリケーションの特性によってはリソースサイズを最小に抑えられる可能性があります。

さらに、Svelteのコンパイラは、Lintのようなコードチェックを行います。基本的なところだと、未使用変数や未定義変数の使用を警告してくれたりしますが、おもしろいところだと未使用のCSSセレクタを検出して警告してくれたり、アクセシビリティ（A11Y）的に問題のあるHTMLを検出して警告してくれます。

アクセシビリティのチェックは、ReactやVueでもESLintプラグインなどを使用すればチェックできますが、Svelteはこれを標準で行うというところが先進的で良い取り組みだと思います。

そのほか、公式サイトであげられている特徴として、仮想DOMなし（No virtual DOM）、真のリアクティブ（Truly reactive）があります。

Svelteの開発元

SvelteはRich Harrisさんを中心としたチームによって作成されています。Rich HarrisさんはRollupの作者としても有名です。あとホーム・アローンという映画に出てくる人らしいです（嘘です。冗談です）。
Svelteは、ReactやAngularのように企業がバックにいるわけではありませんが、Rich Harrisさんが現在属しているNew York TimesではSvelteを積極的に使用しているようです。

Svelteの近況

毎年年末ぐらいに発表される The State of JavaScript の2019年にフレームワークランキングでSvelteが初登場し上位に食い込みました。そして2020年には1位となりました。世界的にはかなり注目と期待が集まっているということだと思います。

日本の話だと、2021年4月24日に発売されたWEB+DB PRESS Vol.122 でSvelteの記事が載ってました。日本でも注目が集まっているということでしょうか？

Svelteに入門する

Svelteに入門するために開発環境を整える必要はありません。Svelteは公式のREPLというブラウザ上で簡単に試すことができるしくみがあります。

https://svelte.dev/repl

そして、Svelteに入門するためのチュートリアルも説明とともにREPL上で試しながら学べるように作られています。

公式： https://svelte.dev/tutorial
日本語版： https://svelte.jp/tutorial

入門するために環境を用意するのは地味に面倒くさいので、時間とブラウザがあれば簡単入門できるこのしくみはとても便利です。

もしローカルで動かして試したくなった場合は、REPLページの上の方にダウンロードボタンがあるので、そこからダウンロードしたzipファイルを解凍してそのディレクトリでnpm i && npm run devするだけで同じものをローカルで試すことができます。

さらに、REPLで動作するサンプルコードが次のリンクにたくさん用意されています。

https://svelte.dev/examples

自分が触り始めたい状態のサンプルを見つけたらREPL→を押してダウンロードボタンからダウンロードするだけで簡単に同じ状態をローカルに構築できます。とても簡単です！

Svelteの基本的な構文

いくつかのSvelte構文を紹介しますが、この記事では詳細を書かないので少しでも興味が湧いたらチュートリアルを見てもらうとよいと思います。

Svelteでは.svelteという拡張子のファイルを使用します。これらをSvelteでコンパイルすることによってWebアプリケーションを構築していくことになります。.svelteファイルはVueの単一ファイルコンポーネントと同じで、HTML、JavaScript、CSSを記述して一つのUIコンポーネントを作成します。

たとえば次のように書きます。

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

<h1>Hello {name}!</h1>

<style>
h1 {
  color: blue;
}
</style>

動作させると次のように表示されます（[REPL]にソースコードを貼り付けるだけで簡単に試せます！）

それではいくつかの構文について紹介していきます。

バインディング・テキスト挿入

中括弧{}を使用してテンプレートにテキストを埋め込むことができます。
次は簡単な例です。

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

<h1>Hello {name}!</h1>

Svelteは<script>に書かれたJavaScriptのトップレベルで宣言された変数や関数をテンプレートで使用できます。上記の例ではname変数を宣言し、テンプレートで{name}と書くことでこの部分にname変数の値がテキストとして表示されます。

上記のコードは実際には次のHTMLが表示されます。

1	<h1>Hello world!</h1>

中括弧{}は属性にも記述できます。

<script>
let src = 'tutorial/image.gif';
let name = 'Rick Astley';
</script>

<img src="{src}" alt="{name} dances.">

このソースコードは<img>のsrc属性にsrc変数の値が与えられ、alt属性にname + " dances."が与えられます。

src="{src}"部分はさらに省略できます。属性に与えるデータが一つの変数（および式）の場合は、引用符を省略できます。つまり、src={src}と書くことができます。さらに、属性名と与える変数が同じ場合{src}と書くだけで同じことができます。

<script>
let src = 'tutorial/image.gif';
let name = 'Rick Astley';
</script>

<img src="{src}" alt="{name} dances.">
<img src={src} alt="{name} dances."> <!-- 引用符を省略 -->
<img {src} alt="{name} dances."> <!-- 省略記法 -->

（引用符の省略や省略記法はこの記事では意図的に使用しないことがあります。このブログはSvelteのシンタックスハイライトが効かないため見やすさのためHTMLシンタックスを使用しており、引用符を省略するとHTMLシンタックスが壊れ、記述が見にくくなるためです。ご了承ください）

双方向データバインディングをするにはbind:属性名のような記述をします。
次の例は<input>に入力した値がname変数に与えられる例です。

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

<input bind:value={name}>
<h1>Hello {name}!</h1>

bind:にも条件によって省略記法がありますが割愛します。気になる方はチュートリアルを見てみてください。

参考：

イベントハンドラ

イベントハンドラを登録するにはon:イベント名のような記述をします。次の例は<button>のクリックイベントにhandleClick関数を登録する例です。

<script>
let count = 0;

function handleClick() {
  count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

Svelteにはbind:やon:のように:で区切った属性を使用する記述方法（ディレクティブと呼ばれます）がいろいろとあります。

参考：

https://svelte.jp/tutorial/reactive-assignments

`if`ブロック

テンプレートで、条件によって変化させたい記述をするには`

Svelteに入門した