Zenn
🐈

React使いが、SolidJS -> solid-start使ってみた感想【SolidJS】【React】

2023/07/26に公開
React
TypeScript
tech
SolidJS
SolidStart
tech

はじめに

こんにちは、白色です。現在、ベンチャーでフロントエンドエンジニアとして活動しています。
今回が7回目の投稿です。

なんでSolidJS？

  • 基本的にReactと同じように書けて受け入れやすい
  • 仮想DOMレスなので、パフォーマンスが良い
  • State　of JS 2022 １位
  • 会社のReactからのリプレイス候補として挙げている（自分が）
  • スポンサーが良い感じ(7/26現在)
    スポンサー

結論

  • 賛否ありますが、書き味はReact/NextJSライクで書きやすい
  • パフォーマンスも良く、レンダリングが早い
  • 再レンダリングがReactよりも強力に抑えられているので、普通に書いたらReactみたいに何回もレンダリングされているコードが生まれにくい
  • 軽いし早いし、めちゃ良いやん

どこがReactと似ているの？

基本的な構文を紹介します。

useState → createSignal

// { equals: false } を使用すると、オブジェクトを適切に変更できます。
// オブジェクトは変更前と変更後で同じ ID を持っているので、
// 通常これは更新とはみなされません。
const [object, setObject] = createSignal({ count: 0 }, { equals: false });
setObject((current) => {
  current.count += 1;
  current.updated = new Date();
  return current;
});

// { equals: false } の Signal を値なしのトリガーとして使用:
const [depend, rerun] = createSignal(undefined, { equals: false });
// 追跡スコープで depend() を呼び出すと、rerun() が呼ばれるたびに
// そのスコープが再実行されるようになりました

// 文字列の長さに基づいて「等しいかどうか」を定義する:
const [myString, setMyString] = createSignal("string", {
  equals: (newVal, oldVal) => newVal.length === oldVal.length,
});

setMyString("strung"); // 最後の値と等しいと見なされ、更新は発生しません
setMyString("stranger"); // 異なると見なされ、更新が発生します

solid-startって？

  • SolidJSのフレームワークです。

機能

  • Next.jsのようなファイルシステムベースのルーティング
  • レンダリングのサポート
    • クライアントサイド レンダリング (CSR)
    • サーバーサイド レンダリング (SSR)
    • ストリーミングSSR
    • 静的サイト生成 (SSG)
  • テンプレートを提供しているので、サクッと起動できます。
  • CSSモジュール使用できます。(人気な一部を紹介)
    • styled-components
    • tailwind css
  • Viteの上に乗っているので、アダプターが豊富
    • Netlify、Vercel、AWS、Cloudflareなど基本的になんでも使えます。
  • TypeScript使用しやすい

SolidJSとReactの違い

ReactとSolidJS、似てると解説しましたが、一体何が違うんでしょう？ 以下にまとめてみました。

状態管理について

ReactではuseStateやuseEffectのような「hooks」でアプリケーションの状態を管理しています。SolidJSでは違いがあります。「reactive primitives」という考え方を提供しています。

これは、状態変更の追跡と反応が直感的に行え、副作用の管理が楽になります。記事中で触れたcreateSignalもその一例なんです。
具体的には公式ドキュメントをみてください！

レンダリングパフォーマンスについて

Reactとは違い、SolidJSは仮想DOMを使わないので、パフォーマンスを最大限引き出せるます。結果として、CPU時間やメモリ消費量を減らすことができます。

まとめ

  • SolidJSはReactにかなり似ていて、比較的にフロントエンドエンジニアの方は受け入れやすくReactからの移行、リプレイスはやりやすいように感じました。
  • solid-startも使用しやすく、Next.js同様の手軽さに加えて、豊富なレンダリングオプションとファイルシステムに基づくルーティングがあるので、使いやすいです。 問題はまだベータ版だということくらいですかね・・・
  • Reactとの親和性、高いパフォーマンス、そしてsolid-startの強力な機能。この３つの要素によって、SolidJSはこれからますます注目を浴びる可能性があるんじゃないかと思います！！

Discussion