はじめに！
React や Vue よりも早いと言われている Svelte を使って簡単なアプリを作っていきます。
この記事は実際に私が ToDoリストを作った順番に、チュートリアルを逆引きしながら作った実録でもあるので、読むだけでも開発体験をトレースできるんじゃないかと、淡く期待しています 
React も Vue も好きな筆者が Svelte を触った感想は「...めっちゃ分かりやすいがぁ!! 
」というもの。この開発体験を少しでも多くの方に共有したくてこの記事を書きます。
※Svelte日本のコミュニティによって日本語のドキュメントも整備されています 
Svelte って何？
私も数週間前までその存在を知りませんでした。
職場のフレンズたちが Svelte で盛り上がっているとき、私は冷めた目をしていました。
でも、知らないものを批判しちゃいかんと思い直し、まず調べたのがこちら。
Svelte がホームページで謳っていることは次の３つ...
- Write less code: より少ないコードで
- No virtual DOM: 仮想DOMを使わずに
- Truely reactive: 真のリアクティブ
順に説明しますね。
1. Write less code: より少ないコードで
まずは以下の動画をみてください。
単純な計算機能ですが、これを Svelte は React と比べて32％、Vue と比べて55% のコード量で実装できます。
- 442文字: React
- 263文字: Vue
- 145文字: Svelte
2. No virtual DOM: 仮想DOMを使わずに
これは大事なポイントですが、 Svelte はコンパイラーであり、React や Vue のようなフロントエンドフレームワークではありません。これにより、クライアントへ渡されるのは純粋な HTML と javascript と css になり、余分なオーバーヘッドを無くして高速に動きます。余分なオーバーヘッドとはフレームワーク自体の転送容量や、仮想DOMの生成時間、その使用メモリを指します。
3. Truely reactive: 真のリアクティブ
Svelte では 1と2のおかげで React / Vue のように複雑な状態管理を意識せずに書けます。実際、チュートリアルを幾つかやるだけで、その簡潔な書き方におったまげるでしょう。
参考までに、@so99ynoodles さんの記事「ReactとVueを改善したSvelteというライブラリーについて」によると
Svelteは速く、軽いです。
ベンチマークでReactの35倍、Vueの50倍速いです。
Svelteはコンパイラーであるため、実質ライブラリーとしての容量は0kbです。
とのこと
開発環境を作ろう
前置きはここまでにして、さっそく開発を始めていきましょう。
- 私の開発環境はこちらです。
- mscOS Monterey
- Visual Studio Code
- npx v8.1.2
Svelte プロジェクトを作成しよう
開発環境は公式リファレンスに記載の通りです。
まずは、以下のコマンドを実行してください。
npx degit sveltejs/template todolist
cd todolist
npm install
そしたら、こんなプロジェクトができているので、、、
さっそく動かしてみましょう。
npm run devをコンソールで実行するとローカルホストが起動するので
http://localhost:8080/ にブラウザでアクセスしてください。
下記のように表示されたら成功。あなたの Svelte 生活の始まりですっ
実装に入る前に...Svelte の拡張機能を入れておこう
VSCode で開発するようなら、以下の拡張機能を入れておくとインテリセンスやシンタックスハイライト、prettierのコードフォーマットが効き、開発が捗るでしょう。
Svelte for VS Code
ToDoリストの大枠を組み立てよう
ToDoリストに求める機能はそれほど多くないので、大枠からざっくり作っていこうと思いました。
（逆に大きな機能のときは、それらを構成する機能をテスタブルに作り、終盤でつないでいくことが多いです。）
ということで、まず手始めに知っておいてほしいことは...
基本構成、それは Script、HTML、そして Style
<!-- 自動生成された元の内容はガバっと変えていいよ！ -->
<!-- Script -->
<script>
// 後で記述するよ
</script>
<!-- HTML -->
<div>
絞り込み:
<button>すべて</button>
<button>未完了</button>
<button>完了</button>
</div>
<div>
<input type="text">
<button>タスク追加</button>
</div>
<div>
<ul>
<li>
<input type="checkbox"> レストランを予約する
</li>
<li>
<input type="checkbox"> サプライズ用の指輪を買う
</li>
<li>
<input type="checkbox"> フラッシュモブダンスを練習する
</li>
</ul>
</div>
<!-- Style -->
<style>
/* TODO: CSS得意なフレンズに頼む */
/* https://svelte.jp/tutorial/styling */
</style>
ここまでは特に何も特別なことはありません。
さて、上記の実装をしたら、こんなシンプルでハッピーなToDoリストの雛形ができます
Svelte を使ってToDoリストに機能をつける
大枠が完成したところで、以下の手順で機能を実装していきたいと思います。
- タスクの直書きを配列に変更する
- 「タスク追加」ボタンでタスクを追加する
- 「絞り込み」機能で表示対象を切り替える
1. タスクの直書きを配列に変更する
実際のシステムであればサーバからデータを取得するのですが、
それは一旦置いといて、サクッと小さく動くものを作りたいと思いました。
<script>
- // 後で記述するよ
+ let todoList = [
+ { id: 0, done: false, title: 'レストランを予約する'},
+ { id: 1, done: false, title: 'サプライズ用の指輪を買う'},
+ { id: 2, done: false, title: 'フラッシュモブダンスを練習する'},
+ ]
</script>
...
<ul>
- <li>
- <input type="checkbox"> レストランを予約する
- </li>
- <li>
- <input type="checkbox"> サプライズ用の指輪を買う
- </li>
- <li>
- <input type="checkbox"> フラッシュモブダンスを練習する
- </li>
+ {#each todoList as todo (todo.id)}
+ <li>
+ <input type="checkbox" bind:checked={todo.done}> {todo.title}
+ </li>
+ {/each}
</ul>
ここでは、以下のチュートリアルが役に立ちます。
-
Binding / Text inputs:
{todo.title}変数の値を表示してみよう。 -
Binding / Checkbox inputs:
{todo.done}変数の値と checkbox の値を紐付けてみよう。 -
Logic / Keyed each blocks: ループ処理をしてみよう。
#each句で各ToDoタスクと(todo.id)を紐付けることで、Svelte に変化を検知させることができるよ。
動かしてみると、先程と表示は変わりませんが、配列からToDoリストを表示するように変更できました。
2. 「タスク追加」ボタンでタスクを追加する
次に「タスク追加」ボタンに対してクリックイベントを追加していきたい。（自分に負けない！）
<script>
...
+ let title = ''
+
+ function add() {
+ todoList = [
+ ...todoList,
+ {
+ id: todoList.length,
+ done: false,
+ title,
+ },
+ ];
+ }
</script>
...
<div>
- <input type="text">
- <button>タスク追加</button>
+ <input type="text" bind:value={title}>
+ <button on:click={() => add()}>タスク追加</button>
</div>
・・・
ここでは、以下のチュートリアルが役に立ちます。
- Binding / Text inputs: ←前述と同じ。input 要素に入力した値と title 変数を紐付けてみよう。
- Reactivity / Assignments: button 要素のクリックイベントとjs関数を紐付けてみよう。
3. 「絞り込み」機能で表示対象を切り替える
さぁ、最後の工程です！ フィルタリングして見たい情報に絞り込んでやろうではありませんかっ！
（おーっ！！！！！）
<script>
...
+ let condition = null;
+
+ $: filteredTodoList = (todoList, condition) => {
+ return condition === null
+ ? todoList
+ : todoList.filter((t) => t.done === condition);
+ };
</script>
<div>
絞り込み:
- <button>すべて</button>
- <button>未完了</button>
- <button>完了</button>
+ <button on:click={() => { condition = null }}>すべて</button>
+ <button on:click={() => { condition = false }}>未完了</button>
+ <button on:click={() => { condition = true }}>完了</button>
</div>
- {#each todoList as todo (todo.id)}
+ {#each filteredTodoList(todoList, condition) as todo (todo.id)}
<li>
<input type="checkbox" bind:checked={todo.done}> {todo.title}
</li>
{/each}
ここでは、以下のチュートリアルが役に立ちます。
- Reactivity / Declarations: 変数の値を監視して動的に差分変更してみよう。
ここまでできたらToDoも完成です！
さぁ！みなさんもToDoを追加していきましょう！！
ちょっと待った！ 何かおかしいぞ...
さっきの動画で何かマズい点あったの気づきました？
そうです。そもそも恋人がいないんですよ！
そうです。動かして分かったんですが、このToDoリストには具合が悪い点がいくつかあったんです。それは...
- 初期カーソルが タスク入力欄にフォーカスされてないから入力しづらい
- 「タスク追加」ボタンをクリックした後にタスク入力欄がクリアされない
そこで、最後のお仕置きをしたいと思いました。
初期化処理で操作性を改善する
上記の問題は初期化処理を追加することで解決しました。
では、さっそく...
<script>
+ import { onMount } from "svelte";
+
+ onMount(() => {
+ init();
+ });
+
+ let initFocus = null;
+
+ function init() {
+ title = "";
+ initFocus.focus();
+ }
...
function add() {
todoList = [
...todoList,
{
id: todoList.length,
done: false,
title,
},
];
+ init();
}
...
</script>
...
<div>
- <input type="text" bind:value={title}>
+ <input type="text" bind:value={title} bind:this={initFocus}>
<button on:click={add}>タスク追加</button>
</div>
...
ここでは、以下のチュートリアルが役に立ちます。
- Lifecycle / onMount: コンポーネントのライフサイクルを理解しましょう。コンポーネントが最初にDOM描画された後に onMountハンドラで書いた処理を実行するよ。
-
Bindings / This:
bind:this={変数}で何でも好きな要素と紐付けてみよう。
完成版
<!-- Script -->
<script>
import { onMount } from "svelte";
onMount(() => {
init();
});
let initFocus = null;
function init() {
title = "";
initFocus.focus();
}
let todoList = [
{ id: 0, done: false, title: "レストランを予約する" },
{ id: 1, done: false, title: "サプライズ用の指輪を買う" },
{ id: 2, done: false, title: "フラッシュモブダンスを練習する" },
];
let title = "";
function add() {
todoList = [
...todoList,
{
id: todoList.length,
done: false,
title,
},
];
init();
}
let condition = null;
$: filteredTodoList = (todoList, condition) => {
return condition === null
? todoList
: todoList.filter((t) => t.done === condition);
};
</script>
<!-- HTML -->
<div>
絞り込み:
<button
on:click={() => {
condition = null;
}}>すべて</button
>
<button
on:click={() => {
condition = false;
}}>未完了</button
>
<button
on:click={() => {
condition = true;
}}>完了</button
>
</div>
<div>
<input type="text" bind:value={title} bind:this={initFocus} />
<button on:click={() => add()}>タスク追加</button>
</div>
<div>
<ul>
{#each filteredTodoList(todoList, condition) as todo (todo.id)}
<li>
<input type="checkbox" bind:checked={todo.done} />
{todo.title}
</li>
{/each}
</ul>
</div>
<!-- Style -->
<style>
/* TODO: CSS得意なフレンズに頼む */
/* https://svelte.dev/tutorial/styling */
</style>
完成
最後に、Svelte はいいぞ
コード量が少ないから見晴らしがよくて、とっつきやすいんじゃないかなと思います
Svelte でもコンポーネント管理できるし、Storybook for Svelteもあるのでデザインシステムも作れる。そのうえ、SSRとしてSvelteKit という Next/Nuxt のようなフレームワークも用意されている。React Native / Vue Native よろしく Svelte Naitveというのもある。（誰だ！やり過ぎって言ったやつ！ 俺も同感だよっ！）
React / Vue を触ったことがある方にはすごく馴染みやすい技術だと思うので、試してみてもらえると嬉しいです！
また、昨日の @oekazuma の記事「君はVue,Reactの次に来るSvelteを知っているか？」も併せて読んでいただけると嬉しいです
それでは、明日は @fussy113 の「1ヶ月〇〇○円で速度改善！？事業でも個人開発でも導入できる画像リサイズのAPI」です。どうぞご期待ください