Zenn
💻

Svelte, SolidJSを試してみた所感

2022/11/13に公開
Svelte
SolidJS
tech

これは何

最近のフロントエンドフレームワークに対する認識とお気持ちの整理 - console.lealog();を見てなんか最近話題のやつやってみっか！と思ってやってみたので感想

何した

これを書いた人

  • 現在はReactメイン
  • React歴は1年、Vue.js(2系のみ)歴2年、コーディング歴約15年、プログラミング歴10年

結論

  • Svelteは本当にシンプルで気持ち良い。プロトタイプとかに推せる。本番にはまだちょっと悩む。
  • SolidJSはコードの書き味という意味では、決定打に欠ける。が、React利用者は簡単に移行できると思うので、軽さ/速さ目的で採用の検討できると思う。

感想

Svelte

  • 今回作ったコード
    • viteのsvelte-tsをベースに作成
  • Vue.jsと同じくjs, html, cssを1ファイルにまとめるタイプ。全体的なシンプルさが特徴。
    • letで書いた変数が直接リアクティブな変数になる。これ以上なくシンプル。
    • storeも初期装備しており、簡単に利用ができる。楽。
    • if / elseもHTMLタグから独立していて、ifの中の親タグ1つ制約もないので最低限のコードで書ける。
  • 個人的に抵抗を感じるのはletを使わないといけないところ。ここが『本番でこれ使って大丈夫か？』と思う点。
  • Listに要素を追加した時に、若干『前の要素の残影』が見える事象があった。実装が良くない可能性が高そうではある。

SolidJS

  • 今回作ったコード
    -SolidJS公式のGetting Startedをベースに作成
  • Reactと同じく、tsxファイルで構成される。関数名や型名が異なるだけで、基本的にはReactと同じ書き方ができる印象。
    • ただ、再レンダリングがReactよりも強力に抑えられているので、正しく書かないと更新されない。上手く動かなくて困ったとこではあるが、良いところだと思う。
  • 個人的な推しポイントはSwitch/Matchタグなどの制御フローがあることで、HTMLテンプレート部からjsを極力排除できるところ。
    • React同様の書き方でも動くので、好みだろうか。制御フロー使うと軽いとかあるかもしれない。
  • 変数をリアクティブにするためのcreateSignalやcreateStoreがコンポーネントの外で定義できるので、これをexport/importすればバケツリレーをせずに済むのではないか、と思ったが、再レンダリングが上手く発火しなかったので、そういう乱用はできないっぽい
    • React同様ContextとProviderが存在するので、そちらを利用すると良さそう
    • 今回は階層が深くないため、普通にリレーした

お気持ち

  • Svelteはシンプルを極めてて本当に気持ちが良い。私も次プロトタイプ作るならこれにする。ただ、letへの抵抗がどうしてもあるので、本番プロダクトへの採用はまだもうちょっと考えたいところ。逆にいえばletへの抵抗くらいしか気になるところは今のところない。
  • SolidJSはコードの書き味という意味では、Reactとあまり変わらない。再レンダリングが強めに抑制されているのでReactよりちょっと厳しい印象があるが、そこは良いとこなのでﾖｼ。軽い/早い & Reactと似た気分で書けるので、移行/採用の検討結果はポジティブな結果になる可能性が高そう。
  • Svelteをやった後で、React/SolidJSに対して思うのがCSSの場所が悩ましいのが良くない。CSSについて悩まずに楽に始められるという点はVue.js/Sveleteの推せる点だと思う。
  • 言語自体の悪さではないが、SolidJSは検索性がちょっと微妙だった。単純に情報量が少ないのもあるかもだが、Solidって一般用語なので、SolidJSって言語がもっと定着すれば検索しやすくなるのかもしれない。
  • SvelteはState of JS 2021でRetentionが90%になる気持ちは本当にわかるくらいに使い勝手良くて心地良いに動かしやすい。隣のフロントエンドエンジニアに勧めたいくらい気持ちいい。ただ、フロントエンドエンジニアになりたい人に勧めるかというと、あえて勧めないかもしれない。動かしやすいのは良いとこだと思うのだが、Svelteの次のフレームワークは何を選んでもかなり辛い気がする。
    • 個人的には初心者にReactを推せる時代はまだしばらく続くと思う（2022年11月現在）

Discussion