Svelte Summit Fall 2021 まとめ
Svelteのコミュニティによるイベント「Svelte Summit」が2021/11/20(土)に開催されました。
前回からおよそ半年ぶりの開催となります。
各セッションの発表はYoutubeで配信されつつ、NewYorkではwatch partyも開催され、作者のRich Harris氏だけでなくVercelのCEOのGuillermo Rauch氏も出席されていました。また、ドイツでもwatch partyが開催されたようでその様子がたまに中継されていました。
Youtubeでアーカイブが視聴できます。
YouTubeのvideoIDが不正です
前回のまとめと同様、他の方に興味を持ってもらえるように、内容をざっくりまとめました。
※英語が聞き取れなかったところはアブストで補完していますが、内容が違っている場合はお知らせいただけると助かります。
※この日に全てのセッションの発表がされたわけではなく、当日に配信されていないセッションについては逐次配信されるそうです。そちらも配信され次第まとめていきたいと思います
State of the Sveltunion (5 Years of Svelte)
- セッションは0:30~ (約9分)
概要
Svelteのこれまでの歩み、そして感謝
詳細、感想など
はじめに、Svelteのコミュニティ「Svelte Society」のKevinさんが挨拶され、その後NYのパーティー会場のRich Harrisさんにつなぎます。
RichさんがSvelteの歴史を語ります。
（途中で映るBrooklynJSの写真はBrooklynJSのTwitterの写真かな？)
-
2016年
- Svelteが発表されました。当時の、HackerNewsの批判的なコメントなどを載せています。
-
2018年
- SvelteKitの前身であるSapperの発表があり、同年の後半にSvelteのv2が発表されました。
-
2019年
- 私達が知る現在のSvelteであるv3が発表されました。伝説のchangelogはこのときのものだったんですね。2019年の後半からnpmのダウンロード数がメキメキ伸びてきます。
-
2020年
- Svelteのコミュニティによるイベントが開催され、TypeScriptがサポートされました。
-
2021年
- StateOfJSで最も満足度の高いフレームワークに選ばれました。
- StackOverflow Surveyでは最も愛されているフレームワークに選ばれました。
- つい先日、Svelte Sirensという、女性やノンバイナリーの方のためのコミュニティが発足されました。
そして直近では、作者のRich HarrisさんがVercelにジョインし、フルタイムでSvelteにコミットしていくことが発表されました！このニュースはフロントエンド界隈を大分賑わせましたね。Svelteはこれまでコミュニティ主体で運営され、フルタイムのメンテナーがいませんでしたが、Vercelの支援により作者自らがフルタイムで取り組めるようになりました。
最後に、スポンサーやコミュニティ、運営、世界中のユーザーらに感謝を述べられました。
Why Svelte is the best framework for beginner and advanced developers alike
- セッションは0:30~ (約8分)
概要
Svelteが初学者にも熟練者にも最適なフレームワークである理由を、コードのシンタックスやドキュメント、ベンチマーク結果を見ながら説明しています。
詳細、感想など
スピーカーのSteph DietzさんはVercelのDeveloper Advocateで、Svelteが初学者にとっても熟練者にとっても優れたフレームワークであることを説明しています。
初学者から「最初に何をすればよいか」と聞かれたときにReactやVueを勧める人がいるが、JavaScriptの基礎もできておらずDOMが何かもわかっていない人にそれは厳しいとの論調。JavaScriptの基礎を学びながら最新のWebアプリケーションを作成できるようなちょうど良い物があれば・・・Svelteはまさにそうである。
Svelteではフレームワーク固有のボイラープレート構文が少なく、純粋なJavaScriptのように感じられる点や、学習曲線がほとんど存在しないにも関わらず他のフレームワークが備えている機能をカバーしていて、また非常に優れたドキュメントがあり、ステップで進めることができるチュートリアルがあり、ブラウザで使えるREPLもあることが素晴らしいとのこと。
こういった理由から、Svelteは初学者にとって素晴らしいものでありながら、最新のWebアプリを開発するのに必要な機能を全て提供していて、コード量が少なく、開発体験が良く、パフォーマンスが良いため熟練者にも適しているとのことです。
Svelte、Vue、Reactで同じアプリを作成し、バンドルサイズやFCP、TTIなどの全ての項目でSvelteのアプリが優れた結果を出しています。
(ベンチマークの詳細はこちらのブログに記載されています)
その他、特定の仮想DOMのAPIにも依存していないため既存のレガシープロジェクトに組み込むことができる点、Svelteが提供しているアニメーションや状態管理を使うことによりライブラリの依存を気にすることが少なくなる点も良い点として挙げています。
また、SvelteKitについても触れています。ReactにとってのNext.jsにあたるもので、Next.jsのようにWebアプリを開発するのに必要な面倒な作業を全て行ってくれます。また、アダプタという機能があり、各プラットフォームごとに最適化されたビルド成果物を出力してくれる、とのこと。
（ここでVercelの例が表示されます）
Svelteの利点や素晴らしさを8分間にぎゅっと凝縮した素晴らしいセッションでした。
Responsive Svelte (exploring Svelte's reactivity)
- セッションは0:30~ (約30分)
概要
Svelteのリアクティビティをより深く理解するためのセッション。いくつかのコードのサンプルを用いてリアクティビティを視覚化する。
資料・コードサンプル(REPL): https://bit.ly/r-svelte
詳細、感想など
Svelteのリアクティビティがどういうふうに動いているのか気になっている方もいらっしゃるのではないでしょうか。このセッションでは、console出力を使用した自作の関数を使ってそれを視覚化し、深く掘り下げています。
スピーカーのKevin BridgesさんはNetscapeとJavaScriptが登場してからずっとJavaScriptを使い続け、純粋なJavaScriptでリアクティビティを実現することに取り組んできたそうです。それからjQuery、そして2010年代に登場したAngular、React、Vueへ。
これら宣言型のフレームワークは、少ないコードで非常に多くのことができるので驚きの連続であったとのこと。そしてSvelteは、そこからシンプルに進化をしていて、それはつまり、これらの宣言型フレームワークでできることを肥大化したランタイムなしに実現している、ということなのだそう。
そして自作のデバッガを利用してSvelteのリアクティビティについて見ていっています。とても興味深い内容です。結論から書いてしまうと、Svelteのりアクティビティは非常に最適化されていて、依存しているコンテンツが実際に変更されたときにだけDOMの更新が行われるようになっていることがわかります。
Svelteのリアクティビティって実際どうなってるの？と思われている方にはとてもおすすめです！
Introducing Primo: a Svelter, all-in-one way to build and manage static sites
- セッションは0:30~ (約7分)
概要
PrimoというオープンソースのStatic Site Generatorの紹介とデモ。Primoはデスクトップアプリで、ほとんどGUIベースでサイトを作成できる。
詳細、感想など
このセッションを見た感想は 「すごい、めっちゃ便利そう！」 です。
PrimoというOSSのSSGツールで、デスクトップアプリとして動作するのですが、多くのことがGUIベースで行えます。また、もちろんソースを変更することもできます。作成されるサイトはSveltekitで構築され、パフォーマンスは最適化されるようです。
このセッションは実演デモがメインなので英語が聞き取れなくても内容を把握するのは簡単です、百聞は一見にしかず、是非セッションを見てみることをおすすめします。
現在はオープンアルファとのことです。公式サイトとGitHubのリンクを記載しておきます。
Vercel + Svelte
- 1:12:55 - 1:30:17 (約17分)
概要
まさかのGuillermo Rauch氏(VercelのCEO)が登壇。SvelteとVercel、Svelteの良いところなどについて語る。
詳細、感想など
※元々リスニングが得意なわけではないのですが、テーマが決まっているトークではないこと、また音声が乱れていることから、より一層聞き間違いが多くなっていると思います、ご了承ください。
mystery speakerの登壇があることは発表されていましたが、それが誰なのかは秘密にされていました。このツイートまでは・・・
というわけでまさかのVercel CEOの登壇。
最初にメタバースに関するジョークで場を和ませたあと、Rich HarrisさんがVercelにジョインしたことについて話しています。やはり非常に大きな反響があったようです。Svelteにはより大きく成長してほしいとのこと。VercelのミッションはWebをより良いものにすることで、より多くの学びをシェアしていけるとのこと。（この辺は特に聞き取りに自信ないです・・・すみません）
後半、Rauch氏がSvelteの良いところについて語ります。
まず1つ目。「Rich Harris. He is awesome.」 とのこと。かっこよすぎる。(1:26:38~)
2つ目はパフォーマンスです。Svelteはパフォーマンスのあらゆる側面(パッケージングやパブリッシングなども)が考慮されているとのこと。
次に、SveltekitのHMRが速いこと。
それ以外にも、コミュニティの話、Webの話など色々なエッセンスが入ったとても良い話が聞けるので、英語に自信のある方は是非！（むしろ英語に自信ある人に教えて欲しい）
Svelte Transitions and Accessibility
- セッションは0:30~ (約10分)
概要
Svelteはアニメーションが組み込まれているため、スライドさせたりスケールさせたりすることが簡単にできるが、ユーザーの乗り物酔い(motion sickness)を引き起こさないようにする必要がある。
アクセシビリティの問題を引き起こす可能性のあるトランジションと、ユーザーのモーション設定を守る方法について解説。
詳細、感想など
Svelteのアニメーションはとても素晴らしいが、誤用するとユーザーに問題を引き起こしてしまう。Svelteの組み込みのどのアニメーションが問題を引き起こしやすいか、またユーザーのモーション設定を守る方法と、さらにそこから発展して具体的な実装例を挙げてくださっています。
まず、アニメーションによって引き起こされる問題（頭痛・めまい・吐き気など）と、どのくらいの人に影響があるのか（アメリカの成人のうち4%）を示しています。そして、Svelteの組み込みのアニメーションのうち、Fly、Slide、Scale、Draw、Crossfadeが問題を引き起こしやすいとのこと。
では、どう対応するのが良いのでしょうか？
各OSプラットフォームにはアニメーションを削減する設定項目があると思います。それをCSSのprefers-reduced-motionで検出し、CSSでアニメーションを削減する方法をコード付きで実演しています。
そこから発展して、prefers-reduced-motionの値をStoreで使えるようにし、アプリ全体で使用できる方法をコードを写しながら説明してくれています。とてもわかりやすいです。
自分では中々気が付かないことをケアできる、非常に実用的なセッションだと思います。
コード例も載せてくれていてとても勉強になりますね。
Transforming data to and from storage areas using Svelte custom stores
- セッションは0:30~ (約5分)
概要
カスタムのstoreを作成し、データの変換やlocalStorageへの保存などを自動で行うデモと解説。
詳細、感想など
Svelteの状態管理といえば、組み込みでstoreを使うことがほとんどだと思います。
このセッションでは、svelteのwritable storeをラップする形でカスタムして独自のstoreを作成し、それを使用してデータの変換とlocalStorageへの保存を行うデモと解説を行っています。
セッション自体コンパクトですし、コードを書きながら解説してくれるので状態の永続化にお悩みの方は必見です。
Bringing Svelte to 40% of the Web: Using Wordpress to Power Svelte
- セッションは0:30~ (約21分)
概要
WordpressをHeadless CMSとして使用し、GraphQLとSveltekitを組み合わせて、Podcastプレイヤー付きのブログサイトを作成するデモ
詳細、感想など
「あなたはWeb開発者で、あるクライアント向けの新しいWebアプリの構築を任されました」という導入から始まります。マーケチームがWordpressを気に入っていて、さらに2つの要件について説明されます。
1つ目は、複数のクライアントサポート。iOS、Androidアプリも将来的に立ち上げる予定であるとのこと。2つ目は、Podcastプレイヤー。サイト内を移動してもずっと再生し続けられること。
さて、どうしましょうか。このセッションでは、WordpressをHeadless CMSとして使用し、SveltekitのWebアプリを組合わわせるPoCを紹介しています。
Wordpressは Local にGraphQLプラグインを入れるところから、Sveltekitアプリは npm init svelte@next を実行してスケルトンプロジェクトが作成された直後から始まり、どんどん作っていきます。
いくつかの部分は完成済のプロジェクトからのコピペですが、要所要所のポイントは丁寧に説明しながらコードを書いてくれるので、わかりやすいと思います。Wordpress、またはその他のHeadless CMSとSveltekitの組み合わせに興味がある方は是非ご覧ください。
完成済のソースコードは多分こちらだと思います。
The 'how' and 'why' of islands architecture with Svelte + Slinkity
- 2:17:15 - 2:40:20 (約23分)
概要
Jamstackとアイランドアーキテクチャ、Svelteがアイランドアーキテクチャに向いている理由、そして11ty の拡張プラグインである Slinkity をそれぞれ解説。
詳細、感想など
まず最初に、Jamstackが持つ二面性、UXとDX(Developer Experienceのほう)にまたがるスペクトルについて説明しています。
※TODO このセッションは個別の動画がまだ公開されていないので、公開され次第追記します
From React to Svelte
- セッションは0:30~ (約21分)
概要
プラットフォーム全体をReactからSvelteに書き直した事例。その移行の背景と、移行のコツ、得られた教訓について。
詳細、感想など
スピーカーのScott TolinskiさんはLevel Up Tutorialsの作者で、Level Up TutorialsをReactからSvelteに全て書き換えて至福を得られた(軽々しく話しているわけではない、とのこと)らしく、このセッションでは書き換えの実践的なテクニックやコツなどについて説明されています。
まず自己紹介と、Level Up Tutorialsについて説明があります。2012年に立ち上げ、Youtubeチャンネルから始まり、Drupal、Meteorを経て、Fastify + Reactになったという移行の歴史があったとのこと。
※ちなみにScottさんとLevel Up TutorialsについてはHoneypotがショートドキュメンタリーを作成しています
最初になぜReactから移行したのか、という説明があります。2015年からReactのコンポーネントには基本的に変更がないため、React.createComponent -> class components -> hooksを用いたfunction components に全て書き換えていかなければならず、これはただReactについていくためだけにやらなければならず、ページが速くなるわけではないので、メリットがないとのこと。
（つまり全て書き換えなければならないのなら、Reactに縛られる必要がない、という文脈かもしれません。ちょっとこのあたりスピードが速く聞き取れませんでした。）
ずっとReactを仕事で使ってきておりReactを悪く言うつもりはなく、Vueも好きでVueをファンタスティックだと思っているけれど、SvelteとSveltekitのシンプルさに価値を感じたとのこと。
Sveltekitのチュートリアルコースを作成したことがあり、その素晴らしさが既にわかっていたようです。とはいえ大きいコードベースなので、「これで書き直したらどうなるだろう。これで毎日仕事ができたら最高じゃないか」「いやでもそんなことはできっこない」と考えが繰り返し巡り、同僚に相談しても「いいアイデアとは思えない」と言われてしまったそうです。
とりあえず、短期間でハックしてみることにしたそうです。すると、動作するページが出来上がり、認証も出来ており、コード分割もできていたとのこと。短期間でこれだけのことが成し遂げられるなら、可能であると考えたとのこと。その後3ヶ月ほどかけて、ほとんど書き直したそうです。同僚のみんなから「今までよりずっと作業しやすい」と言われたそうです。
後半は、コードを見ながら移行のコツについて教えてくれます。シンプルなコンポーネント、発展的なコンポーネント、ステートの管理、Apolloクライアントの組み込み方、テストの考え方など。
そして最後にセッションの総まとめがあります。
ReactからSvelteに移行した具体的な事例でした。考え方からコードまで、移行を考えている人には必見のセッションです。
また、最後まで見ると、Level Up Tutorialsのお得な情報がありますので是非チェックしてみてください！
Svelte Sirens
- 3:50:24 - 3:54:50 (約4分)
概要
Svelte Sirens発足！
詳細、感想など
NYのwatch partyにて、Svelte Sirensというコミュニティの発足について発表がありました。
Svelte Sirensは、女性やノンバイナリーの方々をサポートすることに重点を置いたSvelte Society(Svelteコミュニティのこと)です。
毎日、世界中の全ての国で、女性やノンバイナリーの方々は差別や不平等に直面しており、サポートが必要です。他のテック系コミュニティやイベント(Woman Who Goや、Woman Developer Summitなど)でもこういった活動が進められていますが、Svelteでも立ち上がりました。皆さんのご参加やご支援をお願い申し上げます！
Svelte Cubed
- セッションは0:30~ (約10分)
概要
ライブラリ構築フレームワークとしてのSveltekitについて、そしてSveltekitで作られたライブラリ「Svelte Cubed」の紹介
詳細、感想など
Rich Harrisさんのセッションです。
WebアプリケーションフレームワークとしてのSveltekitについてはご存知の方が多いかと思いますが、実はSveltekitには他のフレームワークには中々ない機能があります。それはライブラリ構築ができるということです。
ライブラリとそのデモアプリを作る場合、ある一方でライブラリを構築してnpm linkでデモアプリのプロジェクトにリンクしたり、又はモノレポにしたりします。でも、果たしてそんな別々のワークフローが望ましいでしょうか？ 同時に構築し、ライブラリのリリースとアプリのデプロイを選択してできるようにすればいいのでは？ Sveltekitではそれができます。
セッションでは実際にSveltekitのスケルトンプロジェクトからそれを実演しています。svelte.config.jsに設定を追加する部分なども説明してくれるのでわかりやすいです。
そしてセッションの後半では、この方法で作られた Svelte Cubed というライブラリを紹介しています。
これは3Dグラフィックを作成するライブラリで、Three.jsを使用しています。SvelteとSveltekitがWeb開発の開発体験を飛躍的に向上させたのと同様に、このライブラリは3Dグラフィック開発に素晴らしい開発体験をもたらします。
Svelte Cubedのデモもセッションにあります。すごい勢いで3Dグラフィックが簡単に作られている（ように見える）ので、使って見たくなること間違い有りません。
SveltekitのVersion1.0のアナウンスを期待していた方にはお望みの内容ではなかったかもしれませんが、Sveltekitのライブラリ構築の方法とSvelte Cubedはフロントエンド開発者ならとてもワクワクする内容です、是非セッションをご覧ください。
A State Machine walks into a Svelte Component
- セッションは0:30~ (約8分)
概要
Svelteの有限状態機械ライブラリ Svelte FSM の紹介
詳細、感想など
Svelteとステートマシンが大好きだが、XState や Machina.js をSvelteに組み込んで使うと、Svelteに比べて冗長に見えてしまうため、Svelte FSMというライブラリを作成されたとのこと。
前半に、ドリル(物理)を使用して、有限状態機械について丁寧に説明してくださっています。
そして、Svelteがコードを少なく、コードを理解しやすく、小さく、速いビルドにしてくれるのと同様に、Svelte-FSMは有限状態機械にその哲学をもたらすとのことです。ライブラリサイズは1キロバイトで、非常にシンプルに作られているとのこと。
例として、フォームを有限オートマトンに見立てて実装をしています。その内容と利点について説明したあと、最後にいくつかのFAQがあります。
ステートマシンが好きな方、XStateを使ってお悩みの方におすすめのセッションです。セッションの説明の進行もステートになっていたり、ドリルの説明が面白かったりするので気軽に見ても楽しめると思います。
Skipping Scales to Make Music: Svelte as an Instructional Tool
- セッションは0:30~ (約8分)
概要
Reactの学習に失敗したあとで、Svelteのシンプルさに救われた話。
詳細、感想など
「ギターは基礎が重要だとインターネット上の見知らぬ人から言われたけど、それから楽しくなくなった、自分の好きな曲を弾きたかっただけなのに。」
Web開発でもTwitterの思想家たちは同じような言葉を初心者に投げかけるとのこと。もちろん基礎は大事だけれど、初心者には小さな成功体験が必要で、そこが難しいとのこと。
スピーカーのAustin Crimさんが静的なWebサイトからインタラクティブなサイトに移行しようとしたとき、バーンアウトしそうになっていることに気が付いたそうです。vanillaJSで疲弊したのでReactに立ち寄ったものの、HTMLやCSSをメモ帳+αで書いていたのでReactが外国語のように思えたとのこと。
そのときSvelteに出会い、Svelteによってモチベーションを維持しながら新しいことを学習し、クールなものを早く作ることができたそうです。
セッションの中盤で、なぜ初心者にとってSvelteが適しているかコードを写しながら説明しています。おもしろいのが、最初にvanillaJSで書くと初心者がどうなるか実演しているところです。初心者のメンタルモデルをとてもよく理解しているデモだと思います。その次にSvelteで同じことを行い、Svelteがいかに簡潔に書けるか説明しています。
他にもいくつかの点でSvelteとReactを比較しています。
結びに、Webの基礎が大事であるとしながらも、Svelteによってすぐに成果がでるのはモチベーションになり、それが重要であることを協調しています。
初心者のメンタルモデルをとてもよく理解されている良いセッションだと思います。
Adding Svelte to your legacy projects
- セッションは0:30~ (約25分)
概要
レガシーなプロジェクトにSvelteを組み込む具体的な方法について解説
詳細、感想など
このセッションを見終わった感想は「成る程ッッそれがあったかァ〜〜ッッ」です。
Svelteを学びその素晴らしさに気が付いても、月曜日には仕事でレガシーなPHPアプリや巨大なReactアプリのメンテに直面して嫌気がさしているような状況でも、Svelteを組み込むことができることをこのセッションでは説明しています。
前半はレガシーなPHPアプリです。サーバーサイドでテンプレートエンジンを使用して生成されるUIにSvelteを組み込むことなんてできないと思っていると度肝を抜かれます。コードを書いていくとみるみるうちにSvelteがPHP上で動作します。
落ち着いて考えるとそりゃー動くよなーと思いますが、こんな方法を思い浮かばなかったので本当に驚きました。後半はReactアプリに対して行っています。
また、ある程度Svelteコンポーネントで置き換えたら、今度はSvelte内でReactコンポーネントを使用できます。そのためのライブラリを紹介されています。
Dreaming of Theming with Svelte using Plenti
- セッションは0:30~ (約8分)
概要
PlentiというSSGツールと、そのテーマ設定について。
詳細、感想など
PlentiはSvelteのオープンソースのSSGツールです。
スピーカーの一人であるJim Fiskさんは一年前のSvelte SummitでPlentiを発表されていますね。
今回のセッションではテーマ設定について説明されています。
前半は、Hugoから移植したテーマとその使い方をデモで説明されています。
後半はより詳細な使い方として、テーマのカスタマイズや、他のSSGだと困ってしまうケース（テーマのアップデートなど）に対してPlentiがそれをどう解決したか、などについてやはりデモで説明されています。
個人的な感想ですが、SSGツールはSvelteに限らず非常に多くのツールが存在する中で、Plentiは実用的な機能に特化している印象です。興味がある方は是非セッションをご覧ください。
Up your form validation game with Vest
- セッションは0:30~ (約20分)
概要
バリデーションライブラリ Vest の紹介とデモ
詳細、感想など
どのフレームワークでも使用できるバリデーションライブラリ Vest の紹介とデモです。スピーカーのEvyatar AlushさんはMeta社のエンジニアであり、Vestの作者でもあります。
セッションの最初にVestについて説明しています。Vestはどのフレームワークでも使用できるバリデーションライブラリで、JestやMochaにインスパイアされているとのこと。バリデーションが機能のコードに密結合してしまうとコードが読みにくくなってしまうし、後で修正しにくいし、テストがしにくくなってしまうという課題に対し、理想的なバリデーションとはなにか、という点を考えて作られたとのこと。
セッションの2/3はVestをSvelteに組み込んだデモです。VestにはReact用のチュートリアルがあるのですが、そのチュートリアルの前半部分をSvelteに移植して行っているような内容となっており、usernameとpasswordとsubmitボタンで構成された小さいフォームに対し、Vestでバリデーションを行っています。画面とコードを同時に写していてわかりやすいです。
Sveltable Vector Graphics
- セッションは0:30~ (約6分)
概要
Svelteでunplugin-icons を使い、100000個を超えるIconが使えるようになる！
詳細、感想など
Iconライブラリはいくつかありますが、一般的にはそれらを個別にインストールする必要があり、またAPIは共通でなく、切り替えるときにコードを修正する必要があるとのこと。
そこで unplugin-icons！
Viteでconfigを設定することで、Svelteでも使用できるとのこと。ちゃんとコンパイルされ、最適化されるようです。素晴らしい！ セッションでは実際の使い方についてもデモで説明されています。
unplugin-iconsがSvelteでも使えるの知らなかった！ 個人的には超超超有益なセッションです！
その他のセッションについて
11/20(土)当日のセッションは以上ですが、Svelte Sirens のイベントや、Svelte Summit Mini Edition: Stockholm、Svelte Summit Mini Edition: London の発表もあり、Svelte Summitととしてはまだまだ続いているようです。
それらのセッションもYoutubeに公開されていく予定ですので、いくつかピックアップして記載していくと思います。
Discussion