Svelte/SvelteKitを採用した理由とその魅力

2023/03/24に開催された「エイチーム×レバレジーズ フロントエンド勉強会」で発表した資料です。

https://ateam.connpass.com/event/276968/

発表者：oekazuma
Twitter: oekazuma
GitHub: oekazuma
Qiita: oekazuma

Transcript

1. © 2023 Ateam Inc.
   Svelte/SvelteKitを採用した理由とその魅力
   2023/03/24 エイチーム×レバレジーズ フロントエンド勉強会
   株式会社エイチームライフデザイン シニアエンジニア
   大江 和摩
   

   View Slide

2. © 2023 Ateam Inc.
   株式会社エイチームライフデザイン
   シニアエンジニア
   大江 和摩（おおえ かずま）
   2
   自己紹介
   @oekazuma
   

   View Slide

3. © 2022 Ateam Inc. 3
   Svelteの概要/特徴
   

   View Slide

4. © 2023 Ateam Inc.
   4
   ● UIを構築する為のコンポーネントフレームワーク
   ● 特徴
   ○ Write less code （より少ないコードで書ける）
   ○ No virtual DOM（仮想DOMを使用しない）
   ○ Truly reactive（真にリアクティブ）
   Svelteとは
   State of JS 2022 満足度ランキング
   Vercelがスポンサー
   https://2022.stateofjs.com/ja-JP/libraries/front-end-frameworks/
   

   View Slide

5. © 2023 Ateam Inc.
   5
   ● Write less code （より少ないコードで書ける）
   ○ コード量が多ければ多いほど、バグの数は二次関数的に増える
   ○ 読みやすさを犠牲にしてでもできるだけコードをコンパクトにするべきだ という思想ではない
   ○ 学習コストが低い
   Svelteの概要/特徴
   https://svelte.jp/blog/write-less-code
   

   View Slide

6. © 2023 Ateam Inc.
   6
   ● Write less code （より少ないコードで書ける）
   ○ コード量が多ければ多いほど、バグの数は二次関数的に増える
   ○ 読みやすさを犠牲にしてでもできるだけコードをコンパクトにするべきだ という思想ではない
   ○ 学習コストが低い
   Svelteの概要/特徴
   

   View Slide

7. © 2023 Ateam Inc.
   7
   ● Write less code （より少ないコードで書ける）
   ○ コード量が多ければ多いほど、バグの数も二次関数的に増える
   ○ 読みやすさを犠牲にしてでもできるだけコードをコンパクトにするべきだ という思想ではない
   ○ 学習コストが低い
   Svelteの概要/特徴
   

   View Slide

8. © 2023 Ateam Inc.
   8
   ● No virtual DOM（仮想DOMを使用しない）
   ○ 仮想DOMを使用せず、コンパイル時に実行可能なコードを出力する
   ○ フレームワークのコードが含まれないのでバンドルサイズが小さくなる
   ○ コンパイル時に無限ループを検知したり、使用していないCSSを削ったりできる
   Svelteの概要/特徴
   コンポーネント数
   https://dev.to/this-is-learning/javascript-framework-todomvc-size-comparison-504f
   

   View Slide

9. © 2023 Ateam Inc.
   9
   ● No virtual DOM（仮想DOMを使用しない）
   ○ 仮想DOMを使用せず、コンパイル時に実行可能なコードを出力する
   ○ フレームワークのコードが含まれないのでバンドルサイズが小さくなる
   ○ コンパイル時に無限ループを検知したり、使用していないCSSを削ったりできる
   Svelteの概要/特徴
   https://svelte.jp/blog/virtual-dom-is-pure-overhead
   

   View Slide

10. © 2023 Ateam Inc.
    10
    ● Truly reactive（真にリアクティブ）
    ○ 独自のHooksを使用しない
    Svelteの概要/特徴
    https://svelte.jp/blog/svelte-3-rethinking-reactivity
    

    View Slide

11. © 2023 Ateam Inc.
    11
    ● Truly reactive（真にリアクティブ）
    ○ 独自のHooksを使用しない
    Svelteの概要/特徴
    https://svelte.jp/blog/svelte-3-rethinking-reactivity
    

    View Slide

12. © 2023 Ateam Inc.
    12
    ● Truly reactive（真にリアクティブ）
    ○ 独自のHooksを使用しない
    Svelteの概要/特徴
    https://svelte.jp/blog/virtual-dom-is-pure-overhead
    

    View Slide

13. © 2022 Ateam Inc. 13
    SvelteKitの概要/特徴
    

    View Slide

14. © 2023 Ateam Inc.
    14
    ● Svelteチームが開発しているSvelteがベースになっているWebアプリを構築するためのフレームワーク
    ● 特徴
    ○ fast（高速)
    ○ fun（楽しい)
    ○ flexible（柔軟）
    SvelteKitとは
    State of JS 2022 満足度ランキング
    Vercelがスポンサー https://2022.stateofjs.com/ja-JP/libraries/rendering-frameworks/
    

    View Slide

15. © 2023 Ateam Inc.
    15
    ● fast（高速)
    ○ ビルドツールにViteを採用していて、HMRやビルドが高速
    ○ Svelteを使っているのでビルドサイズが小さく、ページロードが高速
    SvelteKitの概要/特徴
    

    View Slide

16. © 2023 Ateam Inc.
    16
    ● fun（楽しい)
    ○ バンドラーのコンフィグやルーティング、SSR、CSP、デプロイの設定などの退屈な作業に費やす必要はなく、
    コーディングに集中できる
    ○ TypeScript、Prettier、ESLint、Vitest、PlaywrightをCLIで自動設定
    SvelteKitの概要/特徴
    

    View Slide

17. © 2023 Ateam Inc.
    17
    ● flexible（柔軟）
    ○ SPA、 SSR、 SSG、ISR全てに対応
    ○ ページ単位で設定可能
    ○ デプロイ先を選ばない（アプリの一部のルートだけでもエッジにデプロイできる)
    SvelteKitの概要/特徴
    

    View Slide

18. © 2022 Ateam Inc. 18
    Svelte/SvelteKitを採用した理由
    

    View Slide

19. © 2023 Ateam Inc.
    19
    Svelte/SvelteKitを採用した理由
    エンジニア デザイナー
    マークアップ以外の開発業務を担当 Webデザインとマークアップを担当
    

    View Slide

20. © 2023 Ateam Inc.
    20
    ● PHP/Symfony、jQueryのレガシーなシステム構成をリプレイスしたい
    ● フロントエンドの技術選定は何がいいか？
    Svelte/SvelteKitを採用した理由
    

    View Slide

21. © 2023 Ateam Inc.
    21
    Svelte/SvelteKitを採用した理由
    自分たちに一番合っているものは何か？🤔
    

    View Slide

22. © 2023 Ateam Inc.
    22
    ● 使っているPHP/Symfonyに慣れているのでテンプレート型がいい
    ● エンジニアとデザイナーが分業しやすいものがいい
    ● デザイナーはJavaScriptをあまり書かないものがいい
    ● 学習コストは低いほうがいい
    ● TypeScriptは使えたほうが嬉しい
    Svelte/SvelteKitを採用した理由
    

    View Slide

23. © 2023 Ateam Inc.
    23
    Svelte/SvelteKitを採用した理由
    

    View Slide

24. © 2023 Ateam Inc.
    24
    Svelte/SvelteKitを採用した理由
    「ハナユメ」の結婚指輪情報サービス
    https://hana-yume.net/ring/
    

    View Slide

25. © 2023 Ateam Inc.
    25
    Svelte/SvelteKitを採用した理由
    「ハナユメ」のウエディング診断サービス
    https://wedding-types.hana-yume.net/
    

    View Slide

26. © 2023 Ateam Inc.
    26
    Svelte/SvelteKitを採用した理由
    「ハナユメ」の結婚式準備サービス
    

    View Slide

27. © 2023 Ateam Inc.
    27
    Svelte/SvelteKitを採用した理由
    既に3つのサイトがSvelteKit 🎉
    

    View Slide

28. © 2023 Ateam Inc.
    28
    Svelte/SvelteKitを採用した理由
    ここまで来るのに大変なことはなかったの？🤔
    

    View Slide

29. © 2023 Ateam Inc.
    29
    Svelte/SvelteKitを採用した理由
    日本での採用実績がほぼない😣
    

    View Slide

30. © 2023 Ateam Inc.
    30
    ● 日本での採用実績がほぼない😣
    ○ 選定した2019年頃には採用実績が日本ではほぼありませんでした。
    ○ Svelteの作者のRich Harris氏が働いていたNew York Timesでは採用されていましたし、既に大規模開発で使
    われている実績はありました。
    Svelte/SvelteKitを採用した理由
    

    View Slide

31. © 2023 Ateam Inc.
    31
    Svelte/SvelteKitを採用した理由
    現在の採用実績は？🤔
    

    View Slide

32. © 2023 Ateam Inc.
    32
    ● 2023年の採用実績 (敬称略)
    ○ 海外
    ■ New York Times
    ■ Apple (Apple MusicのWeb版)
    ■ Spotify
    ■ Square
    ■ Yahoo
    ■ Bloomberg
    ■ Facebook
    ■ Brave
    ● など
    Svelte/SvelteKitを採用した理由
    

    View Slide

33. © 2023 Ateam Inc.
    33
    ● 2023年の採用実績 (敬称略)
    ○ 日本
    ■ LINE
    ■ note
    ■ ニフティ
    ■ ネクストビート
    ■ M&Aクラウド
    ■ プレイド
    ■ フライル
    ■ エイチーム
    ● など
    Svelte/SvelteKitを採用した理由
    参考：https://docs.google.com/presentation/d/16GCSVB-h_TlZtyq-CQ98_fUux5fpKy8QCybMsgH4SsI/edit#slide=id.g20e65406401_0_65
    

    View Slide

34. © 2023 Ateam Inc.
    34
    Svelte/SvelteKitを採用した理由
    エコシステムが未成熟😣
    

    View Slide

35. © 2023 Ateam Inc.
    35
    ● エコシステムが未成熟😣
    ○ 選定した2019年頃にはSvelteKitもありませんでした。
    ○ ルーティングライブラリは？
    ○ ESLint？Prettier？
    ○ テスティングライブラリは？
    ○ UIコンポーネントライブラリは？
    Svelte/SvelteKitを採用した理由
    

    View Slide

36. © 2023 Ateam Inc.
    36
    ● エコシステムが未成熟😣
    ○ ないなら自分たちで作ろう！
    ○ SEOのメタタグや構造化マークアップを管理できるライブラリを開発
    Svelte/SvelteKitを採用した理由
    https://github.com/oekazuma/svelte-meta-tags
    

    View Slide

37. © 2023 Ateam Inc.
    37
    Svelte/SvelteKitを採用した理由
    現在のエコシステムは？🤔
    

    View Slide

38. © 2023 Ateam Inc.
    38
    ● 2023年のエコシステム
    ○ フルスタックフレームワーク
    ■ SvelteKit
    ○ ビルドツール
    ■ Vite
    ○ テスティングライブラリ
    ■ Vitest
    ■ Playwright
    ■ StoryBook
    ○ コード整形/リンター
    ■ prettier-plugin-svelte
    ■ eslint-plugin-svelte
    Svelte/SvelteKitを採用した理由
    ○ スライダー
    ■ Splide
    ○ UIコンポーネントライブラリ
    ■ Svelte Material UI
    ■ Skeleton
    ■ Flowbite Svelte
    ● など
    ○ エディタ
    ■ Svelte for VS Code
    ■ Svelte for Atom
    ○ 静的診断ツール
    ■ svelte-check
    

    View Slide

39. © 2023 Ateam Inc.
    39
    Svelte/SvelteKitを採用した理由
    日本語文献が少ない😣
    

    View Slide

40. © 2023 Ateam Inc.
    40
    ● 日本語文献が少ない😣
    ○ 日本語文献がほぼないという状況が選定した2019年にはありました。
    ○ Svelte Japanコミュニティができて、Svelteのドキュメントサイトに日本語翻訳が開始！
    Svelte/SvelteKitを採用した理由
    

    View Slide

41. © 2023 Ateam Inc.
    41
    Svelte/SvelteKitを採用した理由
    現在の日本語文献は？🤔
    

    View Slide

42. © 2023 Ateam Inc.
    42
    ● 2023年の日本語文献(2023年3月24日時点)
    ○ Qiita
    ■ 336記事
    ○ Zenn
    ■ 136 Articles
    ■ 7 Books
    ■ 59 Scraps
    ○ Svelte 日本語ドキュメント
    ■ https://svelte.jp/
    ○ SvelteKit 日本語ドキュメント
    ■ https://kit.svelte.jp/
    ○ Svelte/SvelteKitチュートリアル(β版)
    ■ https://learn.svelte.jp/
    Svelte/SvelteKitを採用した理由
    

    View Slide

43. © 2023 Ateam Inc.
    43
    ● 2023年の日本語文献(2023年3月24日時点)
    ○ Svelte Japanコミュニティ
    ■ 約600人
    ○ 日本語で質問ができる
    ○ 以下のメンバーが運営しています！
    Svelte/SvelteKitを採用した理由
    @baseballyama_
    @am_nimitz3
    @oekazuma
    @_TheoSteiner
    @tomoam_mat
    @hmgchk
    @MonsieurTako myLifeAsaDog
    

    View Slide

44. © 2022 Ateam Inc. 44
    最後にSvelteの今後
    

    View Slide

45. © 2023 Ateam Inc.
    45
    ● 直近、SvelteKitはStreamingやsnapshots、ページ単位のデプロイ設定、ISRなどv1.0をリ
    リースして以降も機能追加をたくさんしています！
    今後はi18n サポートや画像の最適化などを予定しているみたいです。
    ● SvelteはSvelte4、Svelte5に向けての作業を行っていく予定のようです。
    Svelte4は比較的マイナーなバージョンアップになるようですが、Svelte5はSvelteコン
    パイラの大部分を再実装してもっと速くしたり、Error Boundaryのような重要な機能を
    追加していく予定みたいなので、今後のSvelteにも注目です！
    最後にSvelteの今後
    

    View Slide

46. View Slide