作りながら学ぶSvelte

JSフロントエンドフレームワークのニューフェイス、 Svelteに会いましょう。

トピック紹介📝

2019年に入って最もホットに関心が高まったフロントエンドフレームワークSvelte（スベルト）を学んでみる講座です。

なぜ学ばなければならないのか✒️

^{▲ Svelte ロゴ}

現在、React、Vue.jsなど、さまざまなフロントエンドフレームワークがあります。各フレームワークは異なる哲学と方法論を持っています。
Svelteは、より少ないコードで完璧なリアリティの実装を代表的な特徴として掲げるフレームワークです。

次のコードは、Stateを異なるフレームワークで実装した例です。見てみると、コード量の明確な違いがわかります。

^{▲他のフレームワークに比べてコード量が断然少ないSvelte}

実際、各フレームワークは異なりますが、すべて同じような概念を持っていることもあります。もしフロントエンドが初めてなら、現在出てきたフレームワークの中で最も習得しやすいので、 Svelteを先に覚えてから、他のフレームワークを習うのにも多くの役に立つと思われます。

そして、すでに他のフレームワークをすでに使っている方であれば、Svelteを学ぶのはそれほど難しくないでしょう。

セクションごとに簡単な紹介📖

• 0～4強：Svelte基礎
• レッスン5：Svelteを使用したTo-doサービスの開発
• レッスン6：To-doサービスをStoreでリファクタリング
• レッスン7：ルーターの適用
• 強さ8: Ajax処理
• 10講義：講義に必要な簡単なJavascriptその他の文法

講義結果🧰

私たちが最終的にするアプリの姿です。単純なTodoアプリですが、ここで学んだパターンを拡張すれば、実際のプロジェクトでも使用できます。

^{▲Svelteで作成したTo-Doアプリ}

レッスンソース＆教材💡

• 2-4講までの例
  https://github.com/freeseamew/svelte-tutoral-basic-example

• Todo 基本例
  https://github.com/freeseamew/todo-svelte-basic

• Todo リファクタリング + Routift + Ajax
  https://github.com/freeseamew/todo-svelte-store

• 作成しながら学ぶSvelte（e-Book教材） - todo実習ノートは教育サイトで受講者だけダウン可能です。
  https://freeseamew.gitbook.io/svelte/