SolidJS（ソリッドジェイエス） とは？

どちらもJSXでUIを書けるけど、更新の仕組みが違うよ。Reactは状態更新でコンポーネントを再実行し、表示の差分をDOMへ反映する。Solidは値を読む場所への依存を追跡して更新するんだ。Reactも、毎回すべてのDOMを書き換えるわけではないよ。

基本の一つがSignalだよ。createSignalは、値を読むgetterと値を変えるsetterを返す。たとえばcount()で読み、setCount(1)で変える。JSXやeffectなどの追跡される場所で読んだ値が変わると、その値に依存する表示や処理へ更新が伝わるんだ。

各コンポーネントが初めて表示されるとき、関数を実行して反応性の仕組みを準備するよ。その後の状態更新では、関数全体を再実行せず、依存する部分を更新する。ただし、取り除いた部品を新しく作るときは、また最初の準備を行う。アプリ全体で一度しか実行しない、という意味ではないよ。

SolidにもJSXを変換するビルド処理があるよ。公式のBabelプリセットは、JSXをSolidの実行処理の呼び出しへ変換する。見た目がReactに似ていても、同じコードが同じ更新方法で動くと考えず、Signalやコンポーネントの仕組みを理解することが大切なんだ。

必要な機能や対応するライブラリ、運用環境を確認し、実際のアプリで速度を測ろう。SolidStartはSolidを使ってクライアントとサーバーを含むアプリを組み立てる枠組みだよ。細かな更新は計算を減らす助けになるけど、どんなアプリでも最速だと保証するものではないんだ。