2022年10月の「TechFeed Night #4 - フロントエンドアーキテクチャを語る」でSvelte/SvelteKitのユースケースやReactやVue.jsとの併用について紹介してくれた山下裕一朗さんはSvelteのメンテナーとしても活動中です。日々、Svelteの情報発信をひたすら続けている山下さんに、なぜSvelteにそこまで入れ込むのか、Svelteの魅力はどこにあるのか、Svelteへのアツい思いをあますところなく語っていただきます!
今回話を伺ったエキスパート
フォローしよう！
Attention!
本記事では何度かVue.jsとの比較が登場します。Vue.jsと比較する理由は以下の2点です。
- 私が業務で Vue.jsを使用しておりある程度わかるから
- 読者の皆さんもよく知っているであろうVue.jsとSvelteを比較することで理解を促進できるであろうから
この記事でVue.jsよりSvelteが優れているのような主張の意図はいっさいありません。
--はじめに簡単に自己紹介をお願いします。
山下と申します。Svelteのメンテナーです。
株式会社フライルでプロダクトマネジメントを支援するプラットフォームを開発しています。業務のフロントエンド開発では TypeScript / Vue.js / Svelte を使用しています。私の TwitterとGitHubをフォローしていただけると嬉しいです。また、現在弊社はエンジニア採用強化中です。弊社にご興味がある方はTwitterからDMをいただけると嬉しいです。
Svelteとの出会い - きっかけは”仮想DOM”へのギモン
--山下さんがSvelte/SvelteKitに出会われたのはいつごろで、どういったきっかけだったのでしょうか。
2015年にAngularJSを知ったとき、「仮想DOMによって性能が良くなる」といった趣旨の文章を読みました。そのとき私は、このような感想を持ちました。
- 「仮想DOM」という新しいレイヤーを増やしたにも関わらず性能が良くなるというのはどういう原理なんだろうか
- 「仮想DOM」なしの方が性能が良くなるのでは?
- でも世界中の頭の良い人たちが考えた仕組みなんだから自分の知らない凄い仕組みがあるのだろう
しかし当時の私はバックエンド専業だったので、フロントエンドの情報をキャッチアップすることもなく時間が過ぎていきました。
そして、2020年4月に現在の株式会社フライルに転職をしました。創業と同時に入社したため(社員番号は1です)フロントエンド/バックエンドともに担当する必要がありました。前職ではOSSを活用する機会はほとんどなかったのですが、フライルでは多くのOSSを使用しています。OSSのおかげでサービスを提供できているという状況に対して、「OSS を使うばっかりだと悪いから、自分も何か貢献した方が良いのではないか」という気持ちが芽生えました。
そして 2021年7月8日でした。たまたまYouTubeでSvelteについて語っている人の動画を見て衝撃を受けました。2015年に感じた「仮想DOM」に対する違和感の答えを見つけた瞬間でした。
[補足] Svelteは仮想DOMを持たない宣言的UIフレームワークです。
このとき、上記の2点(OSSへの貢献の思いとSvelteを知った衝撃)が重なり、Svelteに貢献してみようと思いました。その3日後にはじめてのPRを提出しました。
--そのときのSvelteの第一印象はいかがだったでしょうか。また、いま振り返ってそのときの印象と変わっているところはありますか。
第一印象は、とにかくシンタックスがわかりやすいと感じました。各宣言的UIを実現するフレームワーク(例 : React / Vue.js / Svelte)の違いのひとつとして、リアクティビティの実現方法が挙げられます。Reactは useEffect などを使用し、Vueでは ref や watchEffect などを使用します。
一方、Svelteは $: だけです。$: のみでリアクティビリティを実現します。複数の選択肢で迷う必要がありません。これは 「1個のことを実現する方法は常に1個である」というSvelteの設計思想が表れている象徴的な箇所です。
シンプルこそがSvelteの本質 - コアチームは複雑さがお嫌い
--Svelteにハマっていった経緯を教えてください。
「イージー VSシンプル」みたいな論争があると思います。ここでのイージーとシンプルの定義は以下です。
- イージー : 多くの便利な機能を駆使して短いコードで要件を実現できる
- シンプル : 単一の責務を果たす機能を組み合わせて要件を実現できる
理由は割愛しますが私はシンプルを好んでいます。Svelteはまさにシンプルを体現したフレームワークだと感じています。
たとえば、Vue.jsではリアクティビティを実現するための方法として、 ref / computed / watch / watchEffect など多くの関数がありますが、Svelteは $: というラベルだけです。別の例では、HTMLテンプレートでIF文を実装する際、Vueでは <div v-if="isApple"> などと書きますが、Svelteでは {#if isApple} と書きます。つまり、SvelteはHTMLとロジックを分離して記述します。まさに単一の責務を果たす機能を組み合わせている例です。この分離によりSvelteのほうが格段に読みやすいと個人的には感じています。
このシンプルさの多くは、Svelteの作者であるリッチ・ハリス(Rich Harris)の考えから生まれています。リッチはインタビューで「Svelteコアチームは複雑さが嫌いだし、とくに私はその閾値が図抜けて低い」と話しています。
別の例を紹介します。2019年にリッチは「Rethinking Reactivity 」という講演をしました。ここでは「リアクティビティはスプレッドシートのようであるべきだ」と表現しました。ひとことで言えば「スプレッドシートで計算式を書く際に、useEffect を書かなくても自動で再計算される、リアクティビティとはそうあるべきである」という講演です。
私はリッチのシンブルを追求する考え方とそれを実際に実装する能力に驚愕し、自分もそれに関わりたいと思うようになりました。
「React / Vue.jsでいいじゃん」「日本語の情報が少ない」への反論
--Svelteがいまいち日本では知名度が高くない理由はどのへんにあると思われますか。また、その解決索として何か考えていること、実行しようとしていることはありますか。
知名度自体は高いと思います。最近の調査である「State Of Frontend 2022」でもSvelteは知っている前提の調査だったように思いますし、React / Vue.js / Svelteで比較されることも多いと思います。
一方で、実際に日本でSvelteを導入している企業はまだまだ少ないのが現状だと思います。理由としては2点あると思っています。
1点目は、React / Vue.jsでいいじゃん派閥の存在です。「Svelteが速いのはわかったけどReact / Vue.jsの性能でも実際には問題ないことが多いし、シンプルな文法は魅力的だけどReact / Vue.jsだって実際にはみんな使えているのだから最初だけの問題だろう。一方、Svelteは情報が少ないから技術的に詰まったときにどうしようもないかもしれない。だからReact / Vue.js のどちらかを採用しよう」派閥です。
2点目は、SvelteのエコシステムがReact / Vue.jsのそれと比較して弱い(と思われている)点です。
1点目に関してはとても理解できますし、一定同意します。しかしせっかくの機会なので、今回はこれに反論しておきたいと思います。
まず、性能が悪いということは、基本的にはそれだけ多くのJavaScriptが動いていると言って良いと思います。多くの JavaScriptが動いているということは、それだけバグに遭遇する確率が(指数関数的に)増えると言えます。また、本質的に性能が悪いものを高性能にすることはできません。もしスケールするソフトウェアを作るのであれば、本質的に高性能なフレームワークを選択するべきです。そうすれば、そのソフトウェアが遅くなったとき、その原因は常にあなたのコードにあるので、あなたのコードを改善することで解決できます。
次にReact / Vue.jsが本当にみんな正しく使えているのかという疑問です。たとえば、私はVue.jsの watchEffect を使いこなせていません。何回も無限ループのコードを書いてしまいました。watchEffect で呼んでいる関数の先でリアクティブ変数を更新した場合、再度 watchEffect が発火する、のような間違いを何度も犯しました。つまり、フレームワークの使い方を理解をしたとしても、意図せず間違って使ってしまうこともあるわけです。
一方、Svelteの場合は $: を記述したブロックで使用している変数のみが監視対象なので、すぐに無限ループの原因を理解することができます。加えてSvelteコンパイラには、このような無限ループを検知する機能があり、コンパイル時にこれに気づくことができます。また、これをさらに強化するために、ESLintにそのようなルールを実装することもできるかもしれません)。
「正しく使う = バグを埋め込まない」と捉えると、バグを埋め込まない方法はコードを書かないことです。プログラムのバグ発生率はプログラム規模に応じて指数関数的に増大します。Svelteは他のフレームワークと比較して明らかに短く記述することができます。(こちらの記事を参照ください)正しく使う = バグを埋め込まない と捉えると、Svelteは短くシンプルに記述できるという意味で他のフレームワークよりも継続的に高品質のコードを記述できるはずです。
最後に「Svelteは情報が少ないから技術的に詰まったときにどうしようもない」についてです。これは、公式のDiscordで質問するとたいてい誰かが答えてくれるので解決できます。英語で質問する必要がありますが、DeepLを使うなりすればどうにかなると思います。また日本語のDiscord もあります(ついでに、Svelteは日本語の公式サイトもあります)。
--もうひとつの課題とされるSvelteのエコシステムについては現状どうなっているのでしょうか。
現時点ではSvelteエコシステムは充分実用に耐えられるほどに発展してきたのではないかと思います。メジャーなエコシステムに関してはこの記事の最下部に列挙したのでご参考になれば嬉しいです。
今後実行しようとしていることに関しては、TechFeedさんにお尻を叩かれながらいろいろ視点からの記事/発表を量産することでしょうか? (笑) (←やりましょう！)
フロントエンドは、SPA全盛の時代から、エッジコンピューティング/アイランドアーキテクチャ/resumableなどのキーワードからもわかるように、新時代に突入しつつあると思います。Svelte / SvelteKitはその一角で独自の視点からこれらを解決しようとしています。継続的に記事や発表を続けることで、この時代の変化とその変化の中における Svelte / SvelteKit の良さが広まっていけばいいなと思っています。
Svelteのススメ - 5年10年先を見据えた技術選択を!
--いろいろ熱く語っていただきましたが、そのほか、Svelte/SvelteKitについて語りたいことがあれば好きなだけお願いします。
3点あります。
1点目はSvelteKitが1.0 RC版になったことをお伝えしたいです。Svelteを起点に捉えると、これまで、Svelteはコンパイラという特性上、大規模なアプリになるほどReactやVue.jsと比較してバンドルサイズの増加率が高いという指摘がありました(私の過去の発表から詳細を追っていくことができます)。しかし、SvelteKitが1.0 RC版になったことで、これが実際の問題ではなくなりました。つまり、必要な情報のみ適宜ロードすることで、最初に大量のリソースをロードする必要がなくなりました。また、Webフレームワークとして、優れたファイルシステムルーターやクライアント側のJavaScriptなしで扱えるフォームなど、優れた機能がたくさん実装されているので、ぜひ一度入門することをお勧めします。StackBlitz上ですぐに試すことができます。
2点目は、Svelteのメジャーバージョンアップに向けた議論も開始していることです。ここでは、ランタイムの大幅なサイズ縮小やエラー境界などが議論されています。こちらはまだ公開された情報がないですが、今後さらなる飛躍的な進化を遂げると思います。
3点目は、ぜひ多くの企業でSvelteを使っていただきたいと思っています。以前、TechFeed主催のイベントで、Svelteを既存のスタックと共存する方法について解説しました。
既存の技術スタックを変更せずともSvelteを導入できるのもSvelteの強みのひとつだと思います。State Of Frontend 2022では、約50%の開発者が次に学習したいフレームワークとしてSvelteを選択しています。5年から10年先の技術スタックに向けて、今からSvelteを実運用してみてはいかがでしょうか。そして、そこで感じた課題はぜひ共有いただきたいと思います。それを元に継続的に改善を続けていこうと思います。
メジャーなエコシステムの一覧
| エコシステム | ツール |
|---|---|
| 言語サポート (Babel / CoffeeScript / TypeScript / PostCSS / SugarSS / Less / Sass / Pug / Stylus) | Svelte Preprocess |
| 状態管理 | 組み込み |
| Webフレームワーク(ルーティング含) | Svelte Kit |
| モジュールバンドラー(Vite) | Vite Plugin Svelte |
| モジュールバンドラー(Rollup) | Rollup Plugin Svelte |
| モジュールバンドラー(Webpack) | Svelte Loader |
| エディターサポート(VSCode) | 言語ツール |
| エディターサポート(Atom) | Svelte Atom |
| UIコンポーネント | Svelte Societyにたくさん掲載されています |
| UIコンポーネントテスト(Testing Library) | Testing Library |
| UIコンポーネントテスト(Storybook) | Storybook |
| UIコンポーネントテスト(Cypress) | Cypress |
| コード整形(Prettier) | prettier-plugin-svelte |
| リンター(ESLint) | eslint-plugin-svelte |
| リンター(Stylelint) (プラグイン不要で使えます) | Stylelint |
| Chrome Devtools (ただし改修が必要なようです) | Svelte DevTools |
| ホスティング(Vercel / netlify / cloudflare / cloudflare workersなど) | Svelte Kit Adapters |
| Denoサポート | Svelte Adapter Deno |
| プレイグラウンド | Svelte REPL |
そのほかにも、Svelte Societyのページからさまざまなエコシステムを探すことができます。
