NIFTY Tech Talk #09 SvelteKitをサービスに導入してみた！

Transcript

1. NIFTY Tech Talk #9
   SvelteKitをサービスに導入してみた！
   By Takeroid
   

   View Slide

2. Hello! I am Takeroid!
   

   View Slide

3. Hello! I am Takeroid!
   My hobby is FF14
   

   View Slide

4. View Slide

5. View Slide

6. 2022年11月 開発着手
   2023年1月β版
   2023年2月6日 リリース👏
   アドクリーナー 申し込みフォーム
   

   View Slide

7. View Slide

8. SvelteKitで
   できているんです！！
   

   View Slide

9. SvelteKitで
   できているんです！！
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. 高速
    楽しい
    柔軟
    

    View Slide

15. 高速
    楽しい
    柔軟 V1.0.0リリース
    

    View Slide

16. Svelteで
    HelloWorld！
    Let’s 体験
    

    View Slide

17. たったこれだけ
    <br/>let name = 'world';<br/>
    Hello {name}!
    

    View Slide

18. たったこれだけ
    <br/>let name = 'world';<br/>
    Hello {name}!
    Vue Likeな書き方
    サイコー
    

    View Slide

19. Vue Likeな書き方
    サイコー
    

    View Slide

20. …
    

    View Slide

21. なんと Vueは Nuxt3を連れて
    なかまに なりたそうに
    こちらをみている！
    > はい
    いいえ
    

    View Slide

22. なんと Vueは Nuxt3を連れて
    なかまに なりたそうに
    こちらをみている！
    はい
    > いいえ
    

    View Slide

23. なんと Vueは Nuxt3を連れて
    なかまに なりたそうに
    こちらをみている！
    > はい
    いいえ
    

    View Slide

24. なんと Vueは Nuxt3を連れて
    なかまに なりたそうに
    こちらをみている！
    はい
    > いいえ
    

    View Slide

25. Svelteはコンパイラ
    

    View Slide

26. 仮想DOMを使わない
    だからより速い
    

    View Slide

27. もっと手軽に
    もっと簡潔に
    もっともっともっと…
    

    View Slide

28. バンドルサイズが小さい
    コード記述量が少ない
    JSにビルドされ速い
    状態管理は標準備え付け
    学習コストが低い
    

    View Slide

29. 選ばれたのはSvelteKitでした
    

    View Slide

30. すこし気になってきた？👀
    

    View Slide

31. HTMLを分割しやすい
    

    View Slide

32. コピペで分割
    

    View Slide

33. 慣れ親しんだTemplate構文
    

    View Slide

34. 慣れ親しんだTemplate構文
    

    View Slide

35. 慣れ親しんだTemplate構文
    

    View Slide

36. 慣れ親しんだTemplate構文
    

    View Slide

37. よくないところ
    

    View Slide

38. 情報収集が大変
    

    View Slide

39. トンネルを抜けると
    トンネルだった
    

    View Slide

40. トンネルを抜けると
    トンネルだった
    ❗
    

    View Slide

41. 公式ドキュメント and
    Github is
    最強
    

    View Slide

42. まとめ
    

    View Slide

43. 高速
    楽しい
    柔軟
    

    View Slide

44. 高速
    楽しい
    柔軟 体験してみよう！
    

    View Slide