Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

ニフティ株式会社

March 08, 2023
Tweet

More Decks by ニフティ株式会社

Other Decks in Programming

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