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

by Kazuma Oe

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

© 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/

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

© 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/

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

© 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

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

© 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

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

© 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を採用した理由

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

No content