アシアルブログスマートフォン用の表示で見るアシアルブログアシアルの中の人が技術と想いのたけをつづるブログです2018-08-27SvelteでToDoリストを作るTweetはじめまして、エンジニアの堤です。アシアルでは2年弱働いているのですが、初ブログです。お手柔らかにお願いします。今回は個人的に気になっているJavaScriptのフレームワーク、Svelteを使ってToDoリストを作ってみます。触ってみたいと思います。上にも書いた通りアプローチが異なっています。frameworkというキャッチコピーが目に入ると思います。直訳すると「魔法のように消えるUIフレームワーク」といった感じでしょうか。すべて”純粋な”JavaScriptだけのコードになります。そのため、非常に軽量かつ高速なフレームワークになっています。この辺りの設計思想に関して詳しく知りたい方は、公式のブログ記事をお読みいただければと思います。それでは、以降で実際にSvelteを使ってみます。それを使って試すこともできるのですが、今回はローカルで開発する場合の手順でやってみます。公式のガイドでおすすめされているdegitをインストールします。v8以上がインストールされている必要があります。degit以降もドキュメント通りに実行していきます。World!」と表示されればOKです。devこれでSvelteを使う準備自体はできたのですが、追加でsvelte-extrasをインストールします。このライブラリはSvelteで配列操作を行ったりする場合に必要になるものです。svelte-extrasToDoリストを作る以上で準備ができたので、ToDoリストを作ります。ここでもそのように記述していきます(とはいえ、今回CSSはほぼありませんが...)。その際、ファイルの拡張子は.htmlになります。ToDoリストの各アイテム用コンポーネントです。子から親へのイベントも扱ってみたかったので分けてます。具体的には3行目が該当します。Svelteでは、html内にon:イベント名と書くことでイベントを受け取ることができます。ここではクリックされた際にtoggle-todoイベントを発火するようにしています。あとは、2行目でToDoが完了の場合のみCSSのクラスを当てるようにしています。続いてToDoリストを表示するコンポーネントです。},};</script>ここでようやくJavaScriptが出てきました。Svelteでは、scriptタグ内にコンポーネントに関連するJavaScriptの処理を記述します。componentsプロパティには、使用する子コンポーネントを定義します。ここでは先ほどのTodoListItemですね。data関数では、コンポーネントで使用するデータを初期化します。ToDoを追加するためのtitle、ToDoの一覧を保持するためのtodos、完了/未完了で表示を切り替えるためのconditionを定義しています。computedプロパティでは、他の値に依存して変化する値を定義します。今回は完了/未完了で表示を切り替えたいので、conditionの値に連動して表示するToDoをフィルタリングするよう、ここで記述しています。methodsプロパティでは、主にhtmlテンプレート内で呼び出す関数を定義します。addTodoは文字通り、ToDoを追加するための関数です。単純に、todosに新しいToDoを追加した後、titleを初期化しています。Svelteでは、配列に要素を追加するのはsvelte-extrasのpush関数で行います(35行目)。単純な値の更新はset関数を使います(36行目)。この関数は「追加」ボタンが押されると呼び出されます。toggleTodoは、ToDoの完了/未完了状態を切り替えるための関数です。5行目で、子コンポーネント(TodoListItem)からのイベントを受け取ると、この関数を呼ぶように記述しています。最後にmain.jsを以下のように書き換えましょう。todoList;以下の画像のように表示されるはずです。いじって試してもらえればと思います。終わりにと、ここまでSvelteを触ってきましたが、Vueのシンタックスにかなり似ています。Vueを触ったことのある人であればかなり馴染みやすいのではないでしょうか。Vueと同じ感覚で書いていると、割と色んなところでハマるな、といったのが自分の印象です。^^;とはいえ面白いフレームワークだと思いますし、一度Svelteでちゃんとしたアプリも作ってみたいなー、と思いました。今回のToDoリストでは売りのパフォーマンスの部分も全くわからないので。機会があればSvelteについて書いてみようと思います。お読みいただきありがとうございました。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。