用語集 › 💻 プログラミング › SolidJS（ソリッドジェイエス）
【ソリッドジェイエス】

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の方が馴染みやすいと言われているね

ひよこ ひよこ

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

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

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

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