Svelte Summit Fall 2021 まとめ(draft)
tomoam前回のまとめのスクラップと同様、このスクラップは下書きです。ある程度書けたらこのスクラップを閉じて記事にします
tomoamSvelteのコミュニティによるイベント「Svelte Summit」が2021/11/20(土)に開催されました。
前回からおよそ半年ぶりの開催となります。
各セッションの発表はYoutubeで配信されつつ、NewYorkではwatch partyも開催され、作者のRich Harris氏だけでなくVercelのCEOのGuillermo Rauch氏も出席されていました。また、ドイツでもwatch partyが開催されたようでその様子がたまに中継されていました。
Youtubeでアーカイブが視聴できます。
前回のまとめと同様、他の方に興味を持ってもらえるように、内容をざっくりまとめました。
※英語が聞き取れなかったところはアブストで補完していますが、内容が違っている場合はお知らせいただけると助かります。
※この日に全てのセッションの発表がされたわけではなく、当日に配信されていないセッションについては逐次配信されるそうです。そちらも配信され次第まとめていきたいと思います
tomoamOpening
- 19:26 - 28:55 (約10分)
概要
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の支援により作者自らがフルタイムで取り組めるようになりました。
最後に、スポンサーやコミュニティ、運営、世界中のユーザーらに感謝を述べられました。
tomoamWhy 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分間にぎゅっと凝縮した素晴らしいセッションでした。
tomoam全てのセッションを↑くらいの粒度で書いてたら大変なので以降のセッションからはもっと短くまとめる予定です。
tomoamResponsive 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のリアクティビティって実際どうなってるの？と思われている方にはとてもおすすめです！
tomoamIntroducing 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のリンクを記載しておきます。
tomoamVercel + 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.」とのこと。かっこよすぎる。
2つ目はパフォーマンスです。Svelteはパフォーマンスのあらゆる側面(パッケージングやパブリッシングなども)が考慮されているとのこと。
次に、SveltekitのHMRが速いこと。
それ以外にも、コミュニティの話、Webの話など色々なエッセンスが入ったとても良い話が聞けるので、英語に自信のある方は是非！（むしろ英語に自信ある人に教えて欲しい）
tomoamSvelte 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の値をストアで使えるようにし、アプリ全体で使用できる方法をコードを写しながら説明してくれています。とてもわかりやすいです。
自分では中々気が付かないことをケアできる、非常に実用的なセッションだと思います。
コード例も載せてくれていてとても勉強になりますね。
tomoamTransforming data to and from storage areas using Svelte custom stores
- セッションは0:30~ (約5分)
概要
カスタムのstoreを作成し、データの変換やlocalStorageへの保存などを自動で行うデモと解説。
詳細
Svelteの状態管理といえば、組み込みでstoreを使うことがほとんどだと思います。
このセッションでは、svelteのwritable storeをラップする形でカスタムして独自のstoreを作成し、それを使用してデータの変換とlocalStorageへの保存を行うデモと解説を行っています。
セッション自体コンパクトですし、コードを書きながら解説してくれるので状態の永続化にお悩みの方は必見です。
tomoamBringing 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の組み合わせに興味がある方は是非ご覧ください。
完成済のソースコードは多分こちらだと思います。
tomoamThe '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 追記予定
tomoamFrom 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のお得な情報がありますので是非チェックしてみてください！
tomoamSvelte 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でも立ち上がりました。皆さんのご参加やご支援をお願い申し上げます！
tomoamまだ途中のものもありますが、一旦公開したのでCloseします