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

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

Kazuma Oe
March 24, 2023

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

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

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

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

Kazuma Oe

March 24, 2023
Tweet

More Decks by Kazuma Oe

Other Decks in Technology

Transcript

  1. © 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/
  2. © 2023 Ateam Inc. 5 • Write less code (より少ないコードで書ける)

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

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

    ◦ コード量が多ければ多いほど、バグの数も二次関数的に増える ◦ 読みやすさを犠牲にしてでもできるだけコードをコンパクトにするべきだ という思想ではない ◦ 学習コストが低い Svelteの概要/特徴
  5. © 2023 Ateam Inc. 8 • No virtual DOM(仮想DOMを使用しない) ◦

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

    仮想DOMを使用せず、コンパイル時に実行可能なコードを出力する ◦ フレームワークのコードが含まれないのでバンドルサイズが小さくなる ◦ コンパイル時に無限ループを検知したり、使用していないCSSを削ったりできる Svelteの概要/特徴 https://svelte.jp/blog/virtual-dom-is-pure-overhead
  7. © 2023 Ateam Inc. 10 • Truly reactive(真にリアクティブ) ◦ 独自のHooksを使用しない

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

    Svelteの概要/特徴 https://svelte.jp/blog/svelte-3-rethinking-reactivity
  9. © 2023 Ateam Inc. 12 • Truly reactive(真にリアクティブ) ◦ 独自のHooksを使用しない

    Svelteの概要/特徴 https://svelte.jp/blog/virtual-dom-is-pure-overhead
  10. © 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/
  11. © 2023 Ateam Inc. 15 • fast(高速) ◦ ビルドツールにViteを採用していて、HMRやビルドが高速 ◦

    Svelteを使っているのでビルドサイズが小さく、ページロードが高速 SvelteKitの概要/特徴
  12. © 2023 Ateam Inc. 17 • flexible(柔軟) ◦ SPA、 SSR、

    SSG、ISR全てに対応 ◦ ページ単位で設定可能 ◦ デプロイ先を選ばない(アプリの一部のルートだけでもエッジにデプロイできる) SvelteKitの概要/特徴
  13. © 2023 Ateam Inc. 22 • 使っているPHP/Symfonyに慣れているのでテンプレート型がいい • エンジニアとデザイナーが分業しやすいものがいい •

    デザイナーはJavaScriptをあまり書かないものがいい • 学習コストは低いほうがいい • TypeScriptは使えたほうが嬉しい Svelte/SvelteKitを採用した理由
  14. © 2023 Ateam Inc. 30 • 日本での採用実績がほぼない😣 ◦ 選定した2019年頃には採用実績が日本ではほぼありませんでした。 ◦

    Svelteの作者のRich Harris氏が働いていたNew York Timesでは採用されていましたし、既に大規模開発で使 われている実績はありました。 Svelte/SvelteKitを採用した理由
  15. © 2023 Ateam Inc. 32 • 2023年の採用実績 (敬称略) ◦ 海外

    ▪ New York Times ▪ Apple (Apple MusicのWeb版) ▪ Spotify ▪ Square ▪ Yahoo ▪ Bloomberg ▪ Facebook ▪ Brave • など Svelte/SvelteKitを採用した理由
  16. © 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
  17. © 2023 Ateam Inc. 35 • エコシステムが未成熟😣 ◦ 選定した2019年頃にはSvelteKitもありませんでした。 ◦

    ルーティングライブラリは? ◦ ESLint?Prettier? ◦ テスティングライブラリは? ◦ UIコンポーネントライブラリは? Svelte/SvelteKitを採用した理由
  18. © 2023 Ateam Inc. 36 • エコシステムが未成熟😣 ◦ ないなら自分たちで作ろう! ◦

    SEOのメタタグや構造化マークアップを管理できるライブラリを開発 Svelte/SvelteKitを採用した理由 https://github.com/oekazuma/svelte-meta-tags
  19. © 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
  20. © 2023 Ateam Inc. 40 • 日本語文献が少ない😣 ◦ 日本語文献がほぼないという状況が選定した2019年にはありました。 ◦

    Svelte Japanコミュニティができて、Svelteのドキュメントサイトに日本語翻訳が開始! Svelte/SvelteKitを採用した理由
  21. © 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を採用した理由
  22. © 2023 Ateam Inc. 43 • 2023年の日本語文献(2023年3月24日時点) ◦ Svelte Japanコミュニティ

    ▪ 約600人 ◦ 日本語で質問ができる ◦ 以下のメンバーが運営しています! Svelte/SvelteKitを採用した理由 @baseballyama_ @am_nimitz3 @oekazuma @_TheoSteiner @tomoam_mat @hmgchk @MonsieurTako myLifeAsaDog
  23. © 2023 Ateam Inc. 45 • 直近、SvelteKitはStreamingやsnapshots、ページ単位のデプロイ設定、ISRなどv1.0をリ リースして以降も機能追加をたくさんしています! 今後はi18n サポートや画像の最適化などを予定しているみたいです。

    • SvelteはSvelte4、Svelte5に向けての作業を行っていく予定のようです。 Svelte4は比較的マイナーなバージョンアップになるようですが、Svelte5はSvelteコン パイラの大部分を再実装してもっと速くしたり、Error Boundaryのような重要な機能を 追加していく予定みたいなので、今後のSvelteにも注目です! 最後にSvelteの今後