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 エイチーム×レバレジーズ フロントエンド勉強会 株式会社エイチームライフデザイン シニアエンジニア 大江 和摩
2. © 2023 Ateam Inc. 株式会社エイチームライフデザイン シニアエンジニア 大江 和摩（おおえ かずま） 2 自己紹介 @oekazuma
3. © 2022 Ateam Inc. 3 Svelteの概要/特徴
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/
5. © 2023 Ateam Inc. 5 • Write less code （より少ないコードで書ける） ◦ コード量が多ければ多いほど、バグの数は二次関数的に増える ◦ 読みやすさを犠牲にしてでもできるだけコードをコンパクトにするべきだ という思想ではない ◦ 学習コストが低い Svelteの概要/特徴 https://svelte.jp/blog/write-less-code
6. © 2023 Ateam Inc. 6 • Write less code （より少ないコードで書ける） ◦ コード量が多ければ多いほど、バグの数は二次関数的に増える ◦ 読みやすさを犠牲にしてでもできるだけコードをコンパクトにするべきだ という思想ではない ◦ 学習コストが低い Svelteの概要/特徴
7. © 2023 Ateam Inc. 7 • Write less code （より少ないコードで書ける） ◦ コード量が多ければ多いほど、バグの数も二次関数的に増える ◦ 読みやすさを犠牲にしてでもできるだけコードをコンパクトにするべきだ という思想ではない ◦ 学習コストが低い Svelteの概要/特徴
8. © 2023 Ateam Inc. 8 • No virtual DOM（仮想DOMを使用しない） ◦ 仮想DOMを使用せず、コンパイル時に実行可能なコードを出力する ◦ フレームワークのコードが含まれないのでバンドルサイズが小さくなる ◦ コンパイル時に無限ループを検知したり、使用していないCSSを削ったりできる Svelteの概要/特徴 コンポーネント数 https://dev.to/this-is-learning/javascript-framework-todomvc-size-comparison-504f
9. © 2023 Ateam Inc. 9 • No virtual DOM（仮想DOMを使用しない） ◦ 仮想DOMを使用せず、コンパイル時に実行可能なコードを出力する ◦ フレームワークのコードが含まれないのでバンドルサイズが小さくなる ◦ コンパイル時に無限ループを検知したり、使用していないCSSを削ったりできる Svelteの概要/特徴 https://svelte.jp/blog/virtual-dom-is-pure-overhead
10. © 2023 Ateam Inc. 10 • Truly reactive（真にリアクティブ） ◦ 独自のHooksを使用しない Svelteの概要/特徴 https://svelte.jp/blog/svelte-3-rethinking-reactivity
11. © 2023 Ateam Inc. 11 • Truly reactive（真にリアクティブ） ◦ 独自のHooksを使用しない Svelteの概要/特徴 https://svelte.jp/blog/svelte-3-rethinking-reactivity
12. © 2023 Ateam Inc. 12 • Truly reactive（真にリアクティブ） ◦ 独自のHooksを使用しない Svelteの概要/特徴 https://svelte.jp/blog/virtual-dom-is-pure-overhead
13. © 2022 Ateam Inc. 13 SvelteKitの概要/特徴
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/
15. © 2023 Ateam Inc. 15 • fast（高速) ◦ ビルドツールにViteを採用していて、HMRやビルドが高速 ◦ Svelteを使っているのでビルドサイズが小さく、ページロードが高速 SvelteKitの概要/特徴
16. © 2023 Ateam Inc. 16 • fun（楽しい) ◦ バンドラーのコンフィグやルーティング、SSR、CSP、デプロイの設定などの退屈な作業に費やす必要はなく、 コーディングに集中できる ◦ TypeScript、Prettier、ESLint、Vitest、PlaywrightをCLIで自動設定 SvelteKitの概要/特徴
17. © 2023 Ateam Inc. 17 • flexible（柔軟） ◦ SPA、 SSR、 SSG、ISR全てに対応 ◦ ページ単位で設定可能 ◦ デプロイ先を選ばない（アプリの一部のルートだけでもエッジにデプロイできる) SvelteKitの概要/特徴
18. © 2022 Ateam Inc. 18 Svelte/SvelteKitを採用した理由
19. © 2023 Ateam Inc. 19 Svelte/SvelteKitを採用した理由 エンジニア デザイナー マークアップ以外の開発業務を担当 Webデザインとマークアップを担当
20. © 2023 Ateam Inc. 20 • PHP/Symfony、jQueryのレガシーなシステム構成をリプレイスしたい • フロントエンドの技術選定は何がいいか？ Svelte/SvelteKitを採用した理由
21. © 2023 Ateam Inc. 21 Svelte/SvelteKitを採用した理由 自分たちに一番合っているものは何か？🤔
22. © 2023 Ateam Inc. 22 • 使っているPHP/Symfonyに慣れているのでテンプレート型がいい • エンジニアとデザイナーが分業しやすいものがいい • デザイナーはJavaScriptをあまり書かないものがいい • 学習コストは低いほうがいい • TypeScriptは使えたほうが嬉しい Svelte/SvelteKitを採用した理由
23. © 2023 Ateam Inc. 23 Svelte/SvelteKitを採用した理由
24. © 2023 Ateam Inc. 24 Svelte/SvelteKitを採用した理由 「ハナユメ」の結婚指輪情報サービス https://hana-yume.net/ring/
25. © 2023 Ateam Inc. 25 Svelte/SvelteKitを採用した理由 「ハナユメ」のウエディング診断サービス https://wedding-types.hana-yume.net/
26. © 2023 Ateam Inc. 26 Svelte/SvelteKitを採用した理由 「ハナユメ」の結婚式準備サービス
27. © 2023 Ateam Inc. 27 Svelte/SvelteKitを採用した理由 既に3つのサイトがSvelteKit 🎉
28. © 2023 Ateam Inc. 28 Svelte/SvelteKitを採用した理由 ここまで来るのに大変なことはなかったの？🤔
29. © 2023 Ateam Inc. 29 Svelte/SvelteKitを採用した理由 日本での採用実績がほぼない😣
30. © 2023 Ateam Inc. 30 • 日本での採用実績がほぼない😣 ◦ 選定した2019年頃には採用実績が日本ではほぼありませんでした。 ◦ Svelteの作者のRich Harris氏が働いていたNew York Timesでは採用されていましたし、既に大規模開発で使 われている実績はありました。 Svelte/SvelteKitを採用した理由
31. © 2023 Ateam Inc. 31 Svelte/SvelteKitを採用した理由 現在の採用実績は？🤔
32. © 2023 Ateam Inc. 32 • 2023年の採用実績 (敬称略) ◦ 海外 ▪ New York Times ▪ Apple (Apple MusicのWeb版) ▪ Spotify ▪ Square ▪ Yahoo ▪ Bloomberg ▪ Facebook ▪ Brave • など Svelte/SvelteKitを採用した理由
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
34. © 2023 Ateam Inc. 34 Svelte/SvelteKitを採用した理由 エコシステムが未成熟😣
35. © 2023 Ateam Inc. 35 • エコシステムが未成熟😣 ◦ 選定した2019年頃にはSvelteKitもありませんでした。 ◦ ルーティングライブラリは？ ◦ ESLint？Prettier？ ◦ テスティングライブラリは？ ◦ UIコンポーネントライブラリは？ Svelte/SvelteKitを採用した理由
36. © 2023 Ateam Inc. 36 • エコシステムが未成熟😣 ◦ ないなら自分たちで作ろう！ ◦ SEOのメタタグや構造化マークアップを管理できるライブラリを開発 Svelte/SvelteKitを採用した理由 https://github.com/oekazuma/svelte-meta-tags
37. © 2023 Ateam Inc. 37 Svelte/SvelteKitを採用した理由 現在のエコシステムは？🤔
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
39. © 2023 Ateam Inc. 39 Svelte/SvelteKitを採用した理由 日本語文献が少ない😣
40. © 2023 Ateam Inc. 40 • 日本語文献が少ない😣 ◦ 日本語文献がほぼないという状況が選定した2019年にはありました。 ◦ Svelte Japanコミュニティができて、Svelteのドキュメントサイトに日本語翻訳が開始！ Svelte/SvelteKitを採用した理由
41. © 2023 Ateam Inc. 41 Svelte/SvelteKitを採用した理由 現在の日本語文献は？🤔
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を採用した理由
43. © 2023 Ateam Inc. 43 • 2023年の日本語文献(2023年3月24日時点) ◦ Svelte Japanコミュニティ ▪ 約600人 ◦ 日本語で質問ができる ◦ 以下のメンバーが運営しています！ Svelte/SvelteKitを採用した理由 @baseballyama_ @am_nimitz3 @oekazuma @_TheoSteiner @tomoam_mat @hmgchk @MonsieurTako myLifeAsaDog
44. © 2022 Ateam Inc. 44 最後にSvelteの今後
45. © 2023 Ateam Inc. 45 • 直近、SvelteKitはStreamingやsnapshots、ページ単位のデプロイ設定、ISRなどv1.0をリ リースして以降も機能追加をたくさんしています！ 今後はi18n サポートや画像の最適化などを予定しているみたいです。 • SvelteはSvelte4、Svelte5に向けての作業を行っていく予定のようです。 Svelte4は比較的マイナーなバージョンアップになるようですが、Svelte5はSvelteコン パイラの大部分を再実装してもっと速くしたり、Error Boundaryのような重要な機能を 追加していく予定みたいなので、今後のSvelteにも注目です！ 最後にSvelteの今後