Zenn
🔖

Svelte Summit Spring 2021 簡易まとめ

2021/05/10に公開
1件
JavaScript
Svelte
Svelte Summit
idea

Svelteのコミュニティによるイベント「Svelte Summit」が2021/4/25(日)に開催されました。
前回は2020/10だったのでおよそ半年ぶりの開催となります。

https://sveltesummit.com/

イントロからはじまり、発表は5分〜30分と長短合わせて16セッション、間にパペットショーやクイズレクリエーションを挟み、最後はFAQ、およそ6時間超でした。

Youtubeでアーカイブを視聴することができます。
https://www.youtube.com/watch?v=fnr9XWvjJHw

日本時間22:00開始だったので中々しんどかったですが、Svelte日本のDiscordでみんなで実況しながら楽しく見れました(それでも眠くて途中で離脱しましたが)。Svelte日本のDiscordに、Svelte-NodeGUIをテーマに発表されたJamie Birchさんご本人が登場されて解説してくださるサプライズがあったりとても刺激的でした。

他の方に興味を持ってもらえるように、改めてYoutubeで見直して内容をざっくりまとめました。

※英語が聞き取れなかったところはアブストで補完していますが、内容が違っている場合はお知らせいただけると助かります

Intro

  • 0:00 - 6:24 (約6分)

Svelte Summitを主催しているコミュニティ Svelte Society のメンバーの方々がスポンサーの紹介やこのイベントの概要・おおまかな内容について説明しています。
このメンバーの方々が中心となって運営されており、このイベントのホストを務めています。

Generation Svelte – Our textbook will make Svelte the first language for Norwegian high schoolers

  • 6:25 - 16:26 (約10分)

概要

プログラミングは楽しくなければならないという理由から、高校生向けにプログラミングを教えるのにSvelteを採用するようノルウェー最大の教科書出版社を説得。過去の教科書の内容や、出版予定の書籍の内容となる例を紹介。

詳細と感想

発表者のEirikさんは、高校時代にもう1人の発表者であるGløerさんからFlashでプログラミングを教わっていて、そのときの楽しい思い出を語るところから始まります。
将来的にIT技術者の需要が高まる中で、プログラミングの第一印象がつまらないものではいけないという想いからSvelteを採用するよう出版社を説得したとのこと。

Svelteを採用する理由は3つ。

  1. Online REPLがあるためインストールが不要で、モバイルでもそれが使えること。
  2. 簡潔であること。教える側にとっても教えられる側にとっても良い。
  3. アニメーション。楽しい。

発表者のお二人からの熱意が伝わってくる素晴らしいセッションでした。以前の教科書の内容も少し写り、新しい内容に載る例も少し写ります。タイトルの「Generation Svelte」が指す意味はこのセッションの最後にわかります。

このセッション終了後の小休憩で、ホストの皆さんが「最初の言語は何だった？」「HTMLとjQueryだったよ。チャットにも…」みたいな会話があってとても素敵でした。

Interactive Data Science Widgets with Svelte and Jupyter

  • 18:00 - 22:16 (約5分)

概要

  • Jupyter NotebookはインタラクティブなWidgetをサポートしているが、作るのは難しかった
  • Svelteを使えば簡単にJupyter Widgetを作成できる

詳細と感想

Svelteで作られたWidgetのコードと、それを使用したJupyter Notebookを写しながら説明されていて、とてもわかりやすい。そしてなによりデモのWidgetがとてもかっこいい。「seabornとかplotlyでは足りないので独自のWidgetを作成したい」という方におすすめ。時間は短いですが内容がぎゅっと詰まったセッションです。

コードはこちらに公開されています。

https://github.com/cabreraalex/widget-svelte-cookiecutter

Optimizing your Svelte Community Experience

  • 23:54 - 29:46 (約5分)

概要

  • Svelteで困ったらGitHubじゃなくてStack OverflowかDiscordで質問すると良い
  • 具体的な活用方法を紹介

詳細と感想

  • svelteのGitHubは機能改善とバグ報告のために使われてるし、リポジトリもいっぱいあって迷う
  • 公式のdocsとtutorialを参照すると良い、REPLも使うと良い
  • Stack Overflowでは rollup sapper svelte svelte-3 sveltekit あたりを見ると良い
  • Discordでは USERS セクションの下にあるチャンネルで質問すると良い
  • やるべきこと
    • 適切な詳細度で、複雑なコードはREPLで共有し、コンテキストを書いて、何をしたか示す
  • やってはいけないこと
    • チュートリアルをやらずに質問すること、詳細を書かないこと、長いコードを直接書くこと
  • Svelte SocietyのWebサイトも参照すると良い

Svelteは企業が主導しているわけではなく完全にコミュニティベースなので、適切なサポートを受けたいのならそのルールを守る必要があります。といっても難しいことはないですし、皆さん親切です。このセッションでは具体的な活用方法を絵付きで説明してくれるのでとてもわかりやすいです。Svelteに限らずサポートを求める上で大事なことを解説してくれているように思います。

Svelte NodeGUI (and How to Build a Custom Svelte Renderer)

  • 31:19 - 56:18 (約25分)

※スネイプ先生が出てきます

概要

  • Svelte-NodeGUIとは
  • 始め方、使い方
  • アーキテクチャ
  • カスタムのレンダラーを使うには
    • 題材：HTMLをmarkdownに変換する
  • 発表者の紹介

詳細と感想

突然スネイプ先生が登場してびっくり😆ですが、内容は非常に丁寧です。前半はNodeGUIについて説明したあとで実際にコマンドラインを叩いてSvelte-NodeGUIを実行してくれます。後半はコードを少しずつ変更してどのように書いていけば良いのか説明してくれます。また、カスタムのレンダラーをどう構築していくのか、HTMLをmarkdownに変換する例を用いて説明してくれます。

Svelteと同じ構文でネイティブアプリが簡単に作れるようになるのは魅力的ですし、ベースがQtなので大抵の場所で動作します。

https://github.com/nodegui/svelte-nodegui

余談ですが、この発表中に発表者のJamie BirchさんがSvelte日本のDiscordに来てくれて、より詳しい解説をしてくださいました。Jamieさんどうもありがとうございます！

さらにもう1つ余談ですが、このセッションの後の小休憩でホストの皆さんもパペットになって登場😂
Jamieさんもこの演出は知らなかったとのことです😁

Untangling Composition and Higher Order Components

  • 57:51 - 1:08:39 (約10分)

概要

  • Higher Order Component (HOC)とは
  • SvelteでHOCを実現する方法をコード付きで説明

詳細と感想

SvelteのREPLを使ってコードを編集しながらHOCの実装のコツを説明しています。雰囲気でprops、slotを使っている人(私です)は必見です。
再利用可能なコンポーネントを作るときに、propsをどう持たせるか、イベントハンドラはどのコンポーネントにバインドするべきかなど、迷ったことがある人(私です)なら何度も見ると良いでしょう。

説明の一言一言がためになるので内容が濃く、まだ私も全て理解できておらず、詳細を説明することができないので良さを上手く伝えることができませんが、「実務のために同僚に見せたいセッションはどれ？」と聞かれたら選びたいセッションです。

余談ですがsvelte:flagmentとかが入ってくるとまた変わってくるのかな、とも思いました。

Testing Svelte with Jest: Validate Your Components Quickly!

  • 1:09:58 - 1:18:17 (約10分)

概要

  • Jestの紹介、Unit Tests/Integration Tests/E2E Testsのメリット・デメリットの概要説明
  • デモ(※ここがメイン)
    • Simple DOM Tests
    • Snapshot Tests
    • E2E Tests

詳細と感想

Facebook Open Sourceチームの方の発表。Jestは良いぞ、テストの費用対効果は一般的にこうだぞ、というシンプルな説明のあと、3つのデモを行っています。ToDoアプリを題材にテストコードを書きながらそれぞれのテストについてデモを行うのですが、これがとてもわかりやすいです。フロントエンドのテストを雰囲気でやっている人（私です）におすすめ。
ちなみにTesting Libraryを使っていました。

発表で使用されたスライドとコードスニペットはこちらにあるとのことです。

https://github.com/dmitryvinn/jest-svelte-testing-talk

Declarative Data Visualization: Creating a bar chart race

  • 1:20:06 - 1:46:01 (約25分)

概要

  • 初めに
    • Bar Chart Raceの説明
    • Bar Chart Raceのコンポーネント構成（composition)
  • Topic
    • D3とSvelte
    • SVG vs HTML
    • Data flow
    • Timers & Animation

詳細と感想

最初にBar Chart Raceについて説明があり、その後compositionについてざっくり説明があります。まずこのcompositionが参考になります。

ここからは各Topicを掘り下げます。まずはD3について説明があります。

次にSVGとHTMLのどちらが良いか説明されています。この発表では、例えばBarコンポーネントはdiv、Labelはdivとp(つまりHTML)で実装されています。SVGとHTMLの特徴をそれぞれ説明し、その上で今回はHTMLを使用しているとのことです。意思決定の理由が説明されていてとても勉強になります。

次にData flowについて説明があります。コードを見ながら、データがどのように流れていくかわかりやすく説明してくれます。contextとstoreの実用的な使い方がこれで学べます。

そしてその次にTimerとAnimationの説明があります。Bar Chart Raceは時間が経過するにつれてチャートがどんどん変わっていきますが、その仕組みが説明されます。「なるほど、なるほど、なるほどー！」ってなります。

最後にラップアップです。各Topicをおさらいします。

可視化ってかっこいい。控えめに言って最高のセッションです！
リポジトリはこちらです。

https://github.com/russellgoldenberg/svelte-bar-chart-race

A signal engine for audio and music in your Svelte app

  • 1:47:50 - 1:57:40 (約10分)

概要

  • sema-engineというモダンなWebアプリ向けのAudio Engineの紹介
    • デモ
    • 仕組みの説明

詳細と感想

良い意味で衝撃的。 リアルタイムで見ているときに眠気がぶっ飛びました。
Audioは全然わからないのでなんて説明したらよいかわからないのですが、ブラウザでドラムンベースみたいなことをやっています。ブラウザでこんなことできるんですね。Svelte云々を別にしてもこのデモは一見の価値あり。

リポジトリはこちらです。

https://github.com/frantic0/sema-engine

Breakfast/Lunch/Dinner Break and Meetball session

約45分休憩です。日本時間は0:00-0:45だったので中々眠い時間でしたが、Svelte日本のDiscordでチャット雑談して過ごしていました。
興味深い雑談トピックとして、ドイツ政府のCOVID-19のサイトにはSvelteが使われていることを教えてもらいました。

余談ですが、この休憩時間には音楽が流れておらず、Svelte本家のDiscordではそのことを残念がる方がいらっしゃったそうです。音楽が生活に密着している文化を感じますね。

Svelte can compile and so can you

  • 2:46:48 - 2:53:49 (約7分)

概要

  • 最初にSvelteアプリを作成したとき速さとサイズの小ささに感動した
  • i18nを追加したらサイズが大きくなった
    • 今までだったら気にならない増加量だがSvelteだと気になる
  • Svelteはコンパイルによって最適化される、i18nでも可能では？
    • svelte-intl-precompile を開発
      • svelte-i18nのAPIと互換
      • 速くなり、サイズも小さくなった
  • Svelteのアイデアは他の場所にも活かせる！

詳細と感想

概要に細かく書きすぎたので感想のみ記載します。

Svelteでi18nといえば、svelte-i18nが有名で、svelte-preprocessの作者が開発されていることもあり信頼度が高い(と勝手に思ってます)です。Svelteの日本語翻訳プロジェクトでもこれを使用しています。
これを使用すると確かに10KBちょっと増えてしまいます。他のフレームワークでは気にならないサイズかもしれませんが、Svelteだと気になるという発表者の方の気持ちはわかります。

発表者のMiguelさんは、Svelteの「コンパイルによって最適化する」というコンセプトがライブラリにも適用できるのではないかというアイデアから、新しいi18nライブラリを開発し、見事パフォーマンスの向上を達成しました。

こういうふうにあるアイデアやコンセプトを別の領域にも適用できるのではないか、という思考って大事ですし、それをやってのけるのって素晴らしいですよね。
開発されたsvelte-intl-precompile、試してみたいです。

リポジトリはこちらです。
https://github.com/cibernox/svelte-intl-precompile
https://github.com/cibernox/rollup-plugin-precompile-intl

Svelte without the JavaScript

  • ２:54:00 - 3:21:01 (約25分)

概要

  • Astroの紹介
    • モダンなSSR
    • Bring Your Own Framework - Svelte, React, Preact, Vue, Web Components
    • ZERO client-side JavaScript
    • Partial Hydration via Islands Architecture
  • Islands Architectureとは
  • Partial Hydarationとは
  • JavaScript vs Static HTML
  • Web Applications vs Websites
  • Demo

詳細と感想

日本でも NextのJSぜんぶ抜く や NuxtのJS全部抜く が話題になっていましたね。これらの記事は私も大好きです。
まさかそれのSvelte版がSvelte Summitで見られるとは。しかも発表者はSnowpackなどの開発者として知られるFred Schottさん。

Astroというフレームワークによって実現したそうで、Svelteだけでなく他のフレームワークもサポートしているとのこと。そのあとIslands ArchitectureやPartial Hydarationについて説明されています。

そして、JavaScriptと静的なHTML、WebアプリとWebサイトの比較やトレードオフについて説明されています。Astroによってそれぞれの良いとこ取りができるそうです。

後半はデモです。ブログシステムを題材として実際にコードを書き、ブラウザではNetworkタブを開きながらJavaScriptがないことを確認します(何度かJavaScriptが落ちてきますが、それは開発モード(開発中？)だからとのこと)。

現在はEarly Previewで、サイトはこちらです。
https://astro.build

Design Ñgineering: Writing a Design System in Spanish for our team in Mexican cultural public sector

  • 3:22:49 - 3:46:42 (約25分)

※一部スペイン語ですが英語の字幕があります。

概要

  • CENTRO DECULTURA DIGITALというメキシコの公共組織・機関
  • Svelteを使用してスペイン語でデザインシステムを開発
    • 高い設計基準がある
    • 年間複数のプロジェクトが走るが、一貫したデザイン品質が求められる
  • エンジニアやプロジェクトマネージャーによるそのデザインシステムの説明や成果、感想

詳細と感想

組織として一貫したデザイン・品質にするため、より少ない手数で構築するためにデザインシステムを作っているところは非常に多いと思います。この発表者の方々はメキシコの公共文化部門で仕事をされており、そこでSvelteを使用したデザインシステムを開発されたとのことです。

最初にデザインシステムを開発する背景や、Svelteを使用すること、スペイン語で作ることなどの意思決定について説明があります。「インターンからシニアレベルまで...」という話、わかる。

そしてこのプロジェクトメンバーの方々がこのデザインシステム自体の説明や開発に至る経緯や背景、効果・成果を説明してくれます。

デザインシステムのコードやStorybookを写しながら説明してくれるのですが、コンポーネントの名前がTituloやTextoのようにスペイン語になっています。実際にこのデザインシステムを使う人たちが開発を進める上で認知不可が低くなるように、認識の齟齬を生まないようになっています。生産性と品質を上げるためにはとても重要なことです。この判断はすごい。

それ以外にも、このデザインシステムを開発するに至る経緯や背景、デザインを作るに当たってユーザーが持つコンテキストの話、Figma、a11y、デジタル・ディバイドを小さくする話など興味深い話が続きます。

公共のデジタル部門で働いている人や、組織全体の生産性を上げるための活動をしている人におすすめのセッションです。

Quiz time!!

  • 3:50:52 - 4:05:54 (約15分)

レクリエーションのクイズです、こういう試みはとっても面白いですよね！
面白いのでぜひ視聴してみてください、Youtubeのチャットのリプレイにて大喜利している人を観測できます。

Compile for accessibility with Svelte

  • 4:07:43 - 4:16:29 (約10分)

概要

お気に入りのフロントエンドフレームワークが、アクセシブルなWebアプリケーションの作成に（本当に）役立つとしたら？
甘い夢でしょうか？ いえ、もう夢ではありません。Svelteはアクセシビリティに関するチェックをコンパイラに直接インテグレーションしています。
どのようにこの機能が実現されているのか、その利点と制限を一緒に考えてみましょう。
(※アブストの意訳)

詳細と感想

Svelteの素晴らしいところとして、コンパイラにa11yチェッカーが実装されているという意見がよく挙げられます。私も同感です。
これはSvelteの作者のRich Harris氏や他のコミュニティのメンバーの意見が強く反映されたもので、a11yは開発者がオプトアウトできるようにすべきではなく、むしろ開発者を教育すべきだという信念に基づいています。

https://github.com/sveltejs/svelte/issues/374
https://github.com/sveltejs/svelte/issues/622

私の英語力が足りないため、このセッションの内容を把握してサマリすることができませんでした。セッションではeslint-plugin-jsx-a11yを使用して色々やっているのでとても興味深いと思います。アクセシビリティに注目されている方は発表をご覧ください。

Reactive Forms with Svelte

  • 4:17:34 - 4:28:46 (約10分)

概要

  • Formulaというライブラリの紹介
    • HTML5 forms、Svelte Action、Svelte Storeを使用
    • ゼロコンフィグ
  • デモ

詳細と感想

他のフレームワークだとFormに関するライブラリは結構一般的ですし、デザインシステムに組み込まれていたりしますよね。Svelteでは皆さん使っているのかな？ なくても簡単な処理ならすぐに書けるのもSvelteの良さではありますが面倒といえば面倒です。このセッションではそのあたりを宣言的に書いて実装できるFormulaというライブラリを紹介しています。

公式サイトはこちらです。
https://formula.svelte.codes/

Building the Next Generation of Low Code with Svelte

  • 4:29:57 - 4:53:33 (約25分)

概要

  • ローコードとは
  • Budibaseというオープンソースのローコードプラットフォームの紹介
    • Svelteを使用している
  • Svelteを使用している理由
    • No Runtime、軽量、ポータブル、パフォーマンスが良い、シンプル、etc...
  • Svelte、Spectrum CSS、Routify、Viteを使用
  • デモ
  • 将来、SvelteKitで動作するようにする予定

詳細と感想

個人的な意見ですが、ローコード/ノーコードのツールはOSSか商用に限らず結構制約があるイメージがあって、特にフロントエンドに関して言うと表現力はもちろんパフォーマンスが問題になる印象を受けます。
このBudibaseではフロントエンドにSvelteを使用しているので、もしかしたらパフォーマンスは良いのかも？まだ使用したことがないのでわかりませんが、期待はできそうですね。オープンソースなのもとても嬉しいところです(どうやってマネタイズしていくつもりなのかも気になるところ)。

公式サイトはこちらです。
https://www.budibase.com/

Zwoosh YEAHHH Shabam! 🤯 Whimsy in motion

  • 4:55:54 - 5:15:44 (約20分)

概要

Svelteにおけるアニメーションの実装とデモ

詳細と感想

概要を短く書いてしまいましたが、中身はとても濃いです。セッションのほとんどの時間、コードを書きながらアニメーションの作り方を実演していてとても参考になります。Svelteの motion や easing、transition、animate、さらに store を組み合わせるとこんなにも色んな動きをつけられるんですね、見ていて楽しいセッションでもあります。

このセッションで作成されたページはこちらのURLから閲覧できます。
https://ronvert.pages.dev/

ソースはこちらです。
https://github.com/ronvoluted/ronvert

SvelteKit status update

  • 5:18:21 - 5:48:59 (約30分)

概要

  • SvelteKitの状況について
  • SvelteKitとは何か
  • SvelteKitのフィロソフィー
  • デモ

詳細と感想

Sveltekitの状況について

  • まだ1.0ではない (※4/25の発表時点)
  • Svelte Summitに間に合わせたかったが、まだやるべきことがある
  • 待つ価値はある
  • これまでに貢献してくれた方々に感謝

SvelteKitとは何か

  • Svelteでどのようにアプリを作るのか、という問いに対してこれまでは:

    • svelte-template
      • 柔軟だがやらなければいけないことが多い
    • Sapper
      • 少し柔軟性に欠ける、opinionated過ぎた

  • Sveltekitはこのギャップを埋めてSvelteでアプリを構築するデファクトスタンダードを提供する


  • ReactのNext、VueのNuxtのようにサードパーティがアプリを構築する方法を提供するケース
    • これら自体はとても良い
    • 何か問題が起きたときに、React/Vueで開発しているがNext/Nuxtを使用していない人たちと同じようには解決できないかもしれない
  • AngularやEmberは元々アプリのフレームワークである
    • 柔軟性に欠ける
    • コミュニティを盛り上げるサードパーティもいない
  • Svelteは両方を兼ね備えたい
    • 様々なプロジェクトで使用できる柔軟なコア(Jungle、Plentico、Elder、Routify)
    • 迅速に開発できること


  • Sveltekitはパワフルで柔軟性がある
    • 直感的なfile-systemベースのルーティング
    • 簡単なプロジェクト構造
    • 共通のタスク処理
  • 開発者はアプリケーション固有の作業に多くの時間を費やすことができるようになる
    • いろんなコンフィグを書いて時間を無駄にすることがなくなる


  • 様々な環境にデプロイするためのソリューションもある (※adapterを指していると推測)
  • スケールアップだけでなくスケールダウンにも対応
    • 内蔵のルーターを無効にできる
  • そもそもSvelteなのでフレームワークのコストもない

SvelteKitのフィロソフィー

  • 「モダンなフロントエンド開発は複雑で脆い」と主張する人たちは3つの派閥に分類できる
    • HTMLとCSSへの原点回帰派。あらゆるツールを否定する
      • このグループのことを真剣に受け止めていない、この人たちは結局ツールを使っている(バージョン管理、エディタなど)
      • 自分たちがツールだと考えるものとそうでないものを恣意的に分けているだけ
    • Phoenix LiveViewのようにサーバーがWebsocketで差分を送る派
      • クライアント側でロジックを実行する必要がない
      • 超クール。このコンセプトを知っておくことをおすすめする
      • しかし欠点もある
        • オフラインで動作しない
        • ネットワーク経由のデータには遅延があるため60fpsのアニメーションには適さない
        • 未調査だが、帯域幅も多く使うのではないかと考えられる
      • とはいえ興味深い
    • Railsのような伝統的なフレームワークと少しのJavaScriptを使う派
      • 最も声が大きく説得力もある人たち
      • しかし根本的な限界がある
        • 代表例 : Hey(Basecampのメールサービス)
          • 製品の哲学は大好き。アイデアは素晴らしい。アプリは好きではない、UIがsticky
          • ニュージーランドやオーストラリアにいる人にとって基本的に使い物にならないと聞く
            • 全ての操作にサーバーとの通信が必要なため
          • Lighthouseのスコアは高いが、逆にそれが優れたUXとは関係ないことがわかった
        • もう1つの例 : GitHub
          • 使用しているものの中でもっともバグが多いものの1つ
          • 信用できないので常にハードリフレッシュ
      • このアプローチのもう1つの問題 : フロントエンドとバックエンドで2つの言語に分かれる
        • 生産性が壊滅的になることも


  • アプリをユーザーの近くで動作させることにはメリットがある
    • 瞬時のインタラクション
    • クライアントストレージに保管
    • まだ探索できていないがこのことによるメリットが受けられそうな部分がまだある


  • モダンなフロントエンドに対する正当な批判もある
    • JavaScriptの使いすぎ
      • SSRを使用していなければSEOや初期ページのパフォーマンスに悪影響
      • JavaScriptの使用を強制している


  • SvelteKitはこれらの批判や欠点に対応していく
  • 単一のページから野心的なアプリケーションまで幅広く対応し、伝統的なWeb開発の制限から解放しつつ、モダンなフロントエンド開発の欠点はない

デモ

SvelteKitのドキュメントサイトに従ってプロジェクトを作成し、いくつかコードを記載し、Vercelにデプロイするデモ

※デモは文章にするより視聴したほうが非常にわかりやすいので詳細を省略。

End notes and Discord Stage hangout!

  • 5:49:34 - (約10分)

概要

  • Discordやyoutubeチャットから質問を拾って回答

詳細と感想

  • SvelteKit 1.0のリリースはいつになりますか？
  • なぜ「hooks」？
  • もっと多くのadapterが提供されますか？
    etc...

Rich Harrisさんと進行を務めるコミュニティの方々が、1つ1つの質問に対して背景の説明や深い洞察を交えた回答をしてくれます。話の流れで「Cloudflare workersに期待している」であるとか、「JavaScriptを使って何かを作っていればJavaScriptを持たないユーザーのことは気にしなくて良い、ということに慣れてしまっている。私たちはもっとうまくやるべき。」とかも聞けてとても勉強になります。

いくつかピックアップして回答もここに記載しようかと考えていましたが、回答の細かい部分に良さそうなエッセンスが詰まっていて書ききれないので、実際のセッションを視聴することをおすすめします。

Discussion