【ソリッドジェイエス】

SolidJS(ソリッドジェイエス) とは?

💡 仮想DOMなしで爆速、Reactそっくりの新星フレームワーク
📌 このページのポイント
仮想DOM vs Fine-Grained Reactivity React(仮想DOM) Virtual DOM 旧VDOM 新VDOM 差分計算(diffing) DOM Node 更新 DOM Node 更新 DOM Node 更新 DOM Node 更新 全ノード再チェック → まとめて更新 SolidJS(リアクティブ) Signal(状態) 直接購読 DOM Node 変更なし DOM Node 更新! DOM Node 変更なし DOM Node 変更なし 変更箇所だけピンポイント更新
仮想DOM vs Fine-Grained Reactivity の比較イメージ
ひよこ ひよこ

SolidJSってReactとそっくりに見えるけど何が違うの?

ペンギン先生 ペンギン先生

書き方はJSXでReactに似ているけど、裏側の仕組みが全く違うよ。React仮想DOMで差分を計算してから画面を更新するけど、SolidJSは変更があったDOM要素だけをピンポイントで直接書き換えるんだ

ひよこ ひよこ

仮想DOMがないと何がいいの?

ペンギン先生 ペンギン先生

仮想DOMの差分計算というステップが丸ごとなくなるから、その分速いよ。特にデータの更新が頻繁なアプリで差が出る。ベンチマークではバニラJSに迫るスコアを叩き出しているんだ

ひよこ ひよこ

コンポーネントが再レンダリングされない」ってどういうこと?

ペンギン先生 ペンギン先生

Reactではstate が変わるとコンポーネント関数が丸ごと再実行されるよね。SolidJSではコンポーネント関数は最初の1回だけ実行されて、あとはSignal(状態)に紐づいた部分だけが更新されるんだ。だからuseCallbackやuseMemoのような最適化テクニックが不要なんだよ

ひよこ ひよこ

Svelteとはどう違うの?

ペンギン先生 ペンギン先生

どちらも仮想DOMなしで高速だけど、Svelteコンパイラで独自構文を変換するアプローチ、SolidJSはJSXをそのまま使うアプローチだよ。React経験者にはSolidJSの方が馴染みやすいと言われているね

ひよこ ひよこ

本番プロジェクトで使っても大丈夫なの?

ペンギン先生 ペンギン先生

バンドルサイズも小さくパフォーマンスも折り紙付きだから技術的には十分実用的だよ。ただしReactVueほどエコシステムが大きくないから、ライブラリの選択肢が限られることはある。SolidStartの成熟とともに採用事例も増えてきているね

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「SolidJS」って出てきたら「仮想DOMなしで超高速なReactフレームワーク」と思えればだいたいOK!
📖 おまけ:英語の意味
「SolidJS」 = 堅実なJavaScript
💬 「solid(堅い・堅実な)」という名前の通り、無駄のない堅実なアーキテクチャで高パフォーマンスを追求しているよ
← 用語集にもどる