いうフロントエンド・ライブライリーが話題になっているので調べてみました。生産的と書かれていますが、ホームページを読んだり簡単なコードを書いて私がSolidに感じたのは超高速Reactライクです、これから説明していきます。https://www.solidjs.comより超高速らしいホームページにはいろいろなフロントエンド・ライブライリーとの速度比較(ベンチマーク)結果のグラフが掲載されています。1番上のVanillaはライブラリー等は使わずにJavasciptと標準のAPIのみを使って書いたコードで、この速度を基準(1.0)にしています。下の方を見るとVueは1.54、Reactは1.93と出ています、まあそんなものかなと思います。APIだけを使って書くのは結構たいへんだと思います。頑張って書き換えれば2倍ちかい性能になるということですね。頑張っても2倍にしかならないとも言えます。そこから上にあがって行くと以前取り上げたPreactやSvelteが出てきます。Preactは軽量なReact互換ライブラリーです、またSvelteは仮想DOMを使わずにDOMを書き換えるコードを自動生成するライブライリーです。InfernoはSolid同様にReactライクで高速性をうたっているライブラリーです。Infernoのホームページにもベンチマーク結果ページがあり興味深いですね。JSは1.05でほぼVanillaに接近する性能をほこっています。性能に付いての考察は次回のブログで検討していみたいと思います。ホームページによるとSolidはSvelte同様にデータ等の変更に対応してDOMを書き換えるコードを自動生成するそうです。Reactライクなライブラリーさて、Solidのもう1つの特徴はReactにとても近いということでしょうか。次のコードはUPボタンを押すとカウンターが増えて行くReactのコードです。App;そして、同じ機能をSolidで書いたものが下になります。遠目で眺めると同じように見えます。App;しかし注意深く見ると、Signal値の参照はcount()関数呼び出しです。Reactではcountは変数(定数)ですよね。ReactではStateの値が変わるとコンポーネント(関数)が再描画(再実行)されますが、Solidでは再描画(再実行)は行われずにcount()対応するDOM(HTML)のみ書き換えられます。Reactでも仮想DOMがあるので画面の書き換えはcountの部分のみななりますが、仮想DOMを作ったり変更分を検出する処理は再描画の度に実行されます。それがないSolidの高速性になりそうですね。いつものジャンケンのコードをSolidで書いてみたVue3に入門してみた(TypeScriptを使ったReactとVue3の比較)、Svelteに入門してみた(React/Vueとの違い)などで使ったジャンケンアプリをSolidで書いてみました。メインまずはメインのコンポーネント。上で説明したように遠目に見るとほぼ同じです。ボタングー・チョキ・パーのボタンが並ぶコンポーネントも、遠目に見るとほぼ同じです。14"のように文字列で指定できます。styled-componentsをインストールしなくても従来のHTMLと同様に書けます(React同様にオブジェクトで指定できます)。対戦結果の表を表示するコンポーネントは、遠目にみても少し違いが見えます。表の行を表示する繰り返しは、map関数ではなく<For>という専用のタグを導入しています。ドキュメントによるとmap関数でも表示できるようですが、非効率だそうです。<For>以外にも条件で表示を切り替える<Switch>などの制御フロー用タグが用意されています。従来のテンプレート言語に近いですね。ScoreBox動かなかったコード最初Reactから単純に置き換えたら、結果表示がまったく行われませんでした。その時のコードは以下のようになっていました。each={scores}>{SolidはReactのように引数(props)が変更されても再描画(関数の再実行)を行わないので、このコードでは結果は表示されません。書くことで結果が表示できるようになりました。JSの特徴は超高速Reactライクです。ReactライクはReact互換ではありません、Reactのように再描画が起きないことはコードの書き方に影響を与えます。そこでreact2solidというReactからSolidに変換するツールも開発されいるようです。😊また、Solidでテンプレート言語のように制御タグが導入されています。Vueのように標準の状態管理ストアなども用意されています。ReactはSimpleだがEasyではないと言われますが、SolidはEasyの方にも舵をきっているように思えます。SolidなどのReactライクなライブラリーが複数あることを知りました。Reactが無くなってしまっても安心ですね。