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

Transcript

1. Copyright© M&Aクラウド
   今日からSvelteで開発だ！
   どうする？何から始める？
   Nextbeat Tech Bar：SvelteKit導入企業2社による本音LT会
   

   View Slide

2. Copyright© M&Aクラウド 2
   自己紹介
   塚原彰仁
   AkitoTsukahara
   株式会社M&Aクラウド
   AkitoTsukahara
   akito_tsukahara
   

   View Slide

3. Copyright© M&Aクラウド
   M&Aクラウドでは
   今年の夏からSvelteKitでの
   プロダクト開発が始まりました🎉
   3
   

   View Slide

4. Copyright© M&Aクラウド 4
   馴染みのない「Svelte」と
   上手くやっていけるのか
   不安でした...🫤
   

   View Slide

5. Copyright© M&Aクラウド
   想像以上に
   Svelteは書きやすくて、
   今ではお気に入りの
   フレームワークです😁
   5
   

   View Slide

6. Copyright© M&Aクラウド
   この資料でお伝えしたいこと
   Svelteは簡単で書きやすいよ！
   すでにSvelteに触れたことがある人
   ・周りの人にSvelteイケてるよ！と伝えられるように
   まだSvelteに触れたことがない人
   ・Svelteイケてるじゃん！と感じてもらえるように
   

   View Slide

7. Copyright© M&Aクラウド
   Svelteの特徴は？
   

   View Slide

8. Copyright© M&Aクラウド
   Write less code
   Svelte
   

   View Slide

9. Copyright© M&Aクラウド
   Write less code
   Vue.js
   

   View Slide

10. Copyright© M&Aクラウド
    Write less code
    React
    

    View Slide

11. Copyright© M&Aクラウド
    No virtual DOM
    仮想DOMは速いんじゃないの？
    引用：仮想DOMのメリット
    

    View Slide

12. Copyright© M&Aクラウド
    No virtual DOM
    仮想DOMは速いんじゃないの？
    引用：React vs. Svelte: The War Between Virtual and Real DOM
    

    View Slide

13. Copyright© M&Aクラウド
    Truly reactive
    ← $: というJSラベル構文
    

    View Slide

14. Copyright© M&Aクラウド
    Svelteって、実際どうなのか？
    実際のところはどうなのか？
    弊社メンバーにSvelteで
    開発してみた印象をインタビューしてみました🙋‍♂️
    

    View Slide

15. Copyright© M&Aクラウド
    Svelteって、実際どうなのか？
    チームメンバーの前提知識
    HTML/CSS/JavaScriptは問題なく扱える
    ・Vue.js 3年~、Nuxt.js ~3年
    ・React 0 ~ 3年（経験者1人）、Next.js ほぼなし
    ・Svelte 趣味程度に（経験者1人）
    

    View Slide

16. Copyright© M&Aクラウド
    Svelteって、実際どうなのか？
    Svelteで開発するよ！と聞いた時の印象は？
    いいじゃん！と思った
    チュートリアル見た感じ大丈夫そうな印象を受けた
    フロントエンドはReactのシェアが大きいので、あえての選
    択という印象を受けた。（普通ならReact？）
    もっと盛り上がっていくことに期待！
    

    View Slide

17. Copyright© M&Aクラウド
    Svelteって、実際どうなのか？
    Svelteは書きやすい？もう慣れた？
    クセの強い書き方もないので書きやすい
    Vue.jsに近い印象。慣れるのに時間はかからなかった
    React経験者的には再描画までのライフサイクルに違和感が
    あった。いい感じにやってくれるので戸惑った
    

    View Slide

18. Copyright© M&Aクラウド
    Svelteって、実際どうなのか？
    Svelte理解できたかな？と最初に思えたタイミングは？
    小さくコンポーネントを作成して、リアクティブを把握で
    きたところ
    ストアを含めて複数のコンポーネントを繋げて、値が変わ
    るところまで実装したところ
    

    View Slide

19. Copyright© M&Aクラウド
    じゃあ、何から始めていったら良いのか？
    Svelteに触れてみようかな？と思ったら、
    どこから始めていくといいのか？🏃‍♂️
    

    View Slide

20. Copyright© M&Aクラウド
    まずは何から始めていこう？
    まずはチュートリアルをやってみよう！
    

    View Slide

21. Copyright© M&Aクラウド
    まずは何から始めていこう？
    ・小さいコンポーネントから作成する
    StorybookやREPLで動きを確認できるものを作ってみる
    ・イベント、Props、リアクティブを利用するコンポーネントを作成する
    主な機能を押さえることで、これまでの経験則と接続できる
    例）Event forwarding
    

    View Slide

22. Copyright© M&Aクラウド
    社内メンバーにSvelteの感想を聞いてみました
    デメリットを挙げるとしたら？
    

    View Slide

23. Copyright© M&Aクラウド
    本日のおさらい
    ● 特徴は
    ○ １ Write less code（少ないコードで書ける）
    ○ ２ No virtual DOM（仮想DOMは使わない）
    ○ ３ Truly reactive（リアクティブに書ける）
    ● まずは
    ○ １ チュートリアルから始めよう
    ○ ２ 小さくコンポーネントを作ってみよう
    

    View Slide

24. Copyright© M&Aクラウド
    まとめ
    Svelteは簡単で書きやすいよ！
    すでにSvelteに触れたことがある人
    ・周りの人にSvelteイケてるよ！と伝えられるように
    まだSvelteに触れたことがない人
    ・Svelteイケてるじゃん！と感じてもらえるように
    

    View Slide

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
    

    View Slide

26. Copyright© M&Aクラウド
    ありがとうございました！
    26
    

    View Slide