今日からSvelteで開発だ！​ どうする？何から始める？

Transcript

1. Copyright© M&Aクラウド 今日からSvelteで開発だ！ どうする？何から始める？ Nextbeat Tech Bar：SvelteKit導入企業2社による本音LT会
2. Copyright© M&Aクラウド 2 自己紹介 塚原彰仁 AkitoTsukahara 株式会社M&Aクラウド AkitoTsukahara akito_tsukahara
3. Copyright© M&Aクラウド M&Aクラウドでは 今年の夏からSvelteKitでの プロダクト開発が始まりました🎉 3
4. Copyright© M&Aクラウド 4 馴染みのない「Svelte」と 上手くやっていけるのか 不安でした...🫤
5. Copyright© M&Aクラウド 想像以上に Svelteは書きやすくて、 今ではお気に入りの フレームワークです😁 5
6. Copyright© M&Aクラウド この資料でお伝えしたいこと Svelteは簡単で書きやすいよ！ すでにSvelteに触れたことがある人 ・周りの人にSvelteイケてるよ！と伝えられるように まだSvelteに触れたことがない人 ・Svelteイケてるじゃん！と感じてもらえるように
7. Copyright© M&Aクラウド Svelteの特徴は？
8. Copyright© M&Aクラウド Write less code Svelte
9. Copyright© M&Aクラウド Write less code Vue.js
10. Copyright© M&Aクラウド Write less code React
11. Copyright© M&Aクラウド No virtual DOM 仮想DOMは速いんじゃないの？ 引用：仮想DOMのメリット
12. Copyright© M&Aクラウド No virtual DOM 仮想DOMは速いんじゃないの？ 引用：React vs. Svelte: The War Between Virtual and Real DOM
13. Copyright© M&Aクラウド Truly reactive ← $: というJSラベル構文
14. Copyright© M&Aクラウド Svelteって、実際どうなのか？ 実際のところはどうなのか？ 弊社メンバーにSvelteで 開発してみた印象をインタビューしてみました🙋‍♂️
15. Copyright© M&Aクラウド Svelteって、実際どうなのか？ チームメンバーの前提知識 HTML/CSS/JavaScriptは問題なく扱える ・Vue.js 3年~、Nuxt.js ~3年 ・React 0 ~ 3年（経験者1人）、Next.js ほぼなし ・Svelte 趣味程度に（経験者1人）
16. Copyright© M&Aクラウド Svelteって、実際どうなのか？ Svelteで開発するよ！と聞いた時の印象は？ いいじゃん！と思った チュートリアル見た感じ大丈夫そうな印象を受けた フロントエンドはReactのシェアが大きいので、あえての選 択という印象を受けた。（普通ならReact？） もっと盛り上がっていくことに期待！
17. Copyright© M&Aクラウド Svelteって、実際どうなのか？ Svelteは書きやすい？もう慣れた？ クセの強い書き方もないので書きやすい Vue.jsに近い印象。慣れるのに時間はかからなかった React経験者的には再描画までのライフサイクルに違和感が あった。いい感じにやってくれるので戸惑った
18. Copyright© M&Aクラウド Svelteって、実際どうなのか？ Svelte理解できたかな？と最初に思えたタイミングは？ 小さくコンポーネントを作成して、リアクティブを把握で きたところ ストアを含めて複数のコンポーネントを繋げて、値が変わ るところまで実装したところ
19. Copyright© M&Aクラウド じゃあ、何から始めていったら良いのか？ Svelteに触れてみようかな？と思ったら、 どこから始めていくといいのか？🏃‍♂️
20. Copyright© M&Aクラウド まずは何から始めていこう？ まずはチュートリアルをやってみよう！
21. Copyright© M&Aクラウド まずは何から始めていこう？ ・小さいコンポーネントから作成する StorybookやREPLで動きを確認できるものを作ってみる ・イベント、Props、リアクティブを利用するコンポーネントを作成する 主な機能を押さえることで、これまでの経験則と接続できる 例）Event forwarding
22. Copyright© M&Aクラウド 社内メンバーにSvelteの感想を聞いてみました デメリットを挙げるとしたら？
23. Copyright© M&Aクラウド 本日のおさらい • 特徴は ◦ １ Write less code（少ないコードで書ける） ◦ ２ No virtual DOM（仮想DOMは使わない） ◦ ３ Truly reactive（リアクティブに書ける） • まずは ◦ １ チュートリアルから始めよう ◦ ２ 小さくコンポーネントを作ってみよう
24. Copyright© M&Aクラウド まとめ Svelteは簡単で書きやすいよ！ すでにSvelteに触れたことがある人 ・周りの人にSvelteイケてるよ！と伝えられるように まだSvelteに触れたことがない人 ・Svelteイケてるじゃん！と感じてもらえるように
25. Copyright© M&Aクラウド 参考資料 • https://svelte.jp/ • https://speakerdeck.com/tomoam/sveltekitfalsejin-kuang-tojin-hou • https://www.sunapro.com/svelte/#index_id2 • https://blog.bitsrc.io/react-vs-sveltejs-the-war-between-virtual-and-real-dom- 59cbebbab9e9
26. Copyright© M&Aクラウド ありがとうございました！ 26