SOLID JSってなんだ

リアクティブJabascriptライブラリです。

React Vueが日本だと有名だと思います。Vueはフレームワークだぞという突っ込みが飛んでくるかも知れませんが、細かいことは置いといてフロントエンドでモダンなものといえば、この二つもしくは派生されたNext Nuxtと答える人が大半なのではないでしょうか？Solidもそれの一部だということです。

React Vueで開発体験最強！これ以上非の打ち所がないと思っている人も中にはいるかも知れませんが、2021年の世界のトレンドのJSを知る上で参考になる資料として有名なstate of jsにおいて使ってみた上でもう一度使いたいと答えた人が90%も超える結果となりました（2022年版は12月21日現在だと発表されていませんでした、ぜひ皆さんの目で確かめてみてください)

なぜこんなにもう一度使いたいと思う人がいるのでしょうか？必ずReact Vueとの違いがあるはずです。

高いパフォーマンス

公式によるとなんだが、早いようです。ただ、これは今年、viteよりturbopackは10倍早いのか問題があったように公式サイトに載っているからいって我々は簡単に信じていいはずはないはずです(正直どっちも早いから個人的にはどうでもいい気がしますが...)

JavascriptのPerformanceをまとめた表がありました!（このサイトの信憑性について疑う人は目を瞑ってください...)

絞り込みしないとLibrary盛り沢山なので、とりあえず私が知っていたり聞いたことあるやつのみの最新のもので絞り込みました

solid js　優勝!!!!

(あれ思ってたよりVueもすごくね？..(笑))

パフォーマンスを重視しない場合でも、複雑な DX のコストは必要ありません。Solid のパフォーマンス向上は、タダで手に入るものと考えてください。頑張らなくても速くなるということです。

しかも公式には頑張らなくても早いよって書いてました笑

なぜ早いのか？

1. 仮想DOMではない

Reactや Vueでは仮想DOMが用いられています。仮想DOMを操作しリアルDOM と同期させ、その差分のみ反映させる仕組みです。

仮想DOMは、ブラウザが持っていたDOMツリーを、JavaScriptのオブジェクト（仮想DOMツリー）として表現します。そして、メモリ上の仮想DOMツリーを用いて差分検知を行い、必要最低限の差分のみをリアルDOMに反映するため、一般的にパフォーマンスが向上すると言われています。

しかし、solid JSは別の方法でそのようなリアルDOMが遅い現実を変える方法を見つけ出しました。テンプレートを実際のDOMノードにコンパイルし、更新をきめ細かい反応でラップすることです。

きめ細かいリアクティビティにより、少ない労力でより多くのことを実現します。
Solid は、ユーザーランドのコードから JSX ビューへの効率的なリアクティブプリミティブで構築されています。

これにより、DOM バインディングレベルでも、何をいつ更新するかを完全に制御できます。コストのかかる仮想 DOM を超えて、Solid は必要以上の作業を行いません。
このように、状態が更新されると、それに依存するコードのみが実行されます。

Solid のリアクティビティについての全体的なアプローチは、リアクティビティの計算をすべて関数でラップし、依存関係が更新されたときにその関数を再実行することです。

また、仮想DOMにはdiffを計算するアルゴリズムがある以上DOMツリーの構造が大きくなればなるほど、差分検知の計算量が増え、結果的に遅くなってしまうこともあります。また、ほんのわずかなdiffであっても、全てのNodeを見比べるのはスマートではない気がします。加えて、仮想DOMをランタイムでレンダリングするプロセスもブラウザに負担をかけているのではないでしょうか？

2. コンポーネントが一度しか呼ばれない

Reactのようにコンポーネントが再レンダリングしません。Reactとは異なり、コンポーネントは1回だけレンダリングされ、コンポーネントで使用されているJSX式とプリミティブのみが更新されます。しかし、コンポーネント内部で発生する変更を必ず追跡します。

Solid の JSX コンパイラーは、ほとんどの JSX 式（中括弧内のコード）を関数でラップし、依存関係が変更されたときに自動的に更新 (および対応する DOM 更新のトリガー) します。

続く

今回は少し調査して疲れたので、次回以降にsolid.jsの素晴らしい点を述べていきたいと思います。それではpart2で