先に要点
- Solid.js は JSX で書くが仮想 DOM を持たない UI フレームワーク。`シグナル(「createSignal」)」 ベースで 依存している DOM ノードだけが更新 される細粒度なリアクティビティが特徴。
- React と書き味は似ているが、関数コンポーネントは初回 1 度しか実行されない という設計上の大きな違いがある。「再レンダーで関数が走り直す」 React の前提が成り立たない代わりに、性能と予測可能性が高い。
- SolidStart(Vite ベースのメタフレームワーク)で SSR / SSG / Edge にデプロイ可能。「Next.js / SvelteKit の Solid 版」 という位置づけ。
- 本命の使い所は パフォーマンスを最優先したい中規模アプリ。Svelte と並んで 「React の重さに疲れたチーム」 の代替候補で、特に 細かい状態が多いダッシュボード・エディタ・グラフ系 で強い。
Solid.js ってよく聞くけど、React と何が違うの？ 仮想 DOM がないって、どうやって動いてるの？ 「シグナルって何？」 ── 2021 年に v1.0 が出てからじわじわ存在感を増した Solid.js は、「高速 UI フレームワークの代表格」 として一定の地位を確立しました。
ざっくり言うと、Solid.js は JSX を書くが、内部は仮想 DOM を経由せず、シグナルが直接 DOM ノードを更新する 高速 UI フレームワークです。 React の書き味に近いまま、「再レンダーの無駄を構造的に排除した」 設計で、Web の UI ベンチマークでは 長年トップクラス の性能を維持しています。
この記事では、2026 年 5 月時点の Solid.js v1 系をベースに、仕組み・React との違い・SolidStart・採用判断軸 を整理します。 仕様は活発に変化しているので、最終確認は 公式 を見るのが安全です。
Solid.js の核 — シグナルと細粒度更新
「Solid が React とどう違うか」 を理解する鍵が シグナル(Signals) です。
import { createSignal, createEffect } from 'solid-js';
function Counter() {
const [count, setCount] = createSignal(0);
createEffect(() => {
console.log('count changed:', count());
});
return (
<button onClick={() => setCount(count() + 1)}>
クリック: {count()}
</button>
);
}
「createSignal」
「 値 + 取得用関数 + 更新用関数」 のセット。「 count() を呼ぶと、そのコードが count に依存していると Solid が記録する」。
DOM への直接バインド
JSX 内の 「{count()}」 は 該当する DOM テキストノードへの直接バインド。「count」 が変わったら、その1ノードだけが更新される。再レンダーは起きない。
関数は1度だけ実行
「Counter」 関数は 初回マウント時に1回だけ実行。それ以降は 「シグナルが値を更新 → 関連 DOM ノードだけ更新」 が動く。「useState の再実行」 のような感覚は通用しない。
「createEffect」
「 依存しているシグナルが変わったら再実行される副作用」。React の 「useEffect」 に近いが、依存配列を書かなくていい。
`React の書き味で、「再レンダー」 のコストを払わない」 のが Solid の体感を一言で表す部分です。
React との対応関係
React 経験者向けに、「各概念がどう変換されるか」 を表で並べます。
| React | Solid.js | 備考 |
|---|---|---|
| 「useState」 | 「createSignal」 | シグナルは 「count()」 のように関数呼び出し |
| 「useEffect」 | 「createEffect」 | 依存配列不要(自動追跡) |
| 「useMemo」 | 「createMemo」 | 派生値を作る |
| 「useContext」 | 「createContext」 / 「useContext」 | 使い方は同じ |
| 「useRef」 | 「let ref!: HTMLElement」 + 「ref={...}」 | 普通の変数として持てる |
| 条件分岐 | 「 |
三項演算子も可だが Show が推奨 |
| リスト | 「 |
「map」 でも動くが For が最適化される |
| 関数コンポーネント | 関数コンポーネント | 1度だけ実行されることに注意 |
「書き方の見た目はほぼ同じ、内部の動作モデルが違う」 のが Solid の特徴をよく表す対応関係です。
React との比較
「Solid と React、どう違う？」 を全体軸で並べます。
| 軸 | React | Solid.js |
|---|---|---|
| UI 記述 | JSX | JSX(ほぼ同じ) |
| 更新方式 | 仮想 DOM 差分計算 | シグナル → 該当 DOM 直接更新 |
| 関数コンポーネント | 状態変化のたびに再実行 | 初回 1 度のみ実行 |
| パフォーマンス | 標準的(Compiler で改善中) | 常時トップクラス |
| バンドルサイズ | 大きい | 小さい |
| エコシステム | 圧倒的 | 急成長中 |
| 学習コスト | 大きい(再レンダーの罠など) | 中(「関数 1 度実行」 の概念に慣れる必要) |
| 主な選び所 | 大規模 / エコシステム重視 / AI 連携 | パフォーマンス重視 / 中規模 |
要点は 性能の天井が違う ことです。Solid は仕様レベルで 「無駄な更新を発生させない」 ので、「頑張れば React でも出せる速度」 を 「デフォルトで」 出します。
SolidStart — メタフレームワーク
「Solid 単体だけ」 では 「Vite + Solid」 でローカルアプリを作るのが中心ですが、「実用アプリに育てる」 ためのメタフレームワークが SolidStart です。
Server Functions
` 「use server」 ディレクティブで、クライアントから関数として呼べるサーバ処理」 を書ける。Server Actions と同じ思想。
マルチデプロイ
「 adapter」 で Node / Vercel / Cloudflare Workers / Netlify / Deno Deploy / 静的サイト に出せる。SvelteKit と同じ柔軟性。
「Solid を採用するなら SolidStart」 が事実上の標準的なルートです。
どんな案件で効くか
「Solid を選ぶ価値が出る案件」 を整理します。
向いている
① パフォーマンスが UX の核(ダッシュボード / エディタ / 大量データ表示)、② 細かい状態が多いアプリ(グラフ / フォーム / リアルタイム可視化)、③ React の重さに疲れた中規模アプリ、④ 軽量なバンドルで配りたい組み込み UI。
慎重に
① 既存 React チームでの再採用、② エコシステム最重視(MUI / Tanstack 系の充実度差を許容できるか)、③ AI 系の React 専用ツール群(v0 / shadcn 等)を使いたい。
学習
「 React の useState 感覚で書いて、関数が1度しか実行されないことに混乱する」 のが初学者の最大の罠。関数 = テンプレ宣言、リアクティビティ = シグナル という対比で頭を切り替える。
Svelte との比較
Svelte も 「仮想 DOM なし」 系。「Svelte = 独自構文」 「Solid = JSX」 という棲み分け。「React 経験を活かしたい」 なら Solid のほうが移行コストは低い。
「性能の天井を高くしたい中規模アプリ」 で、Solid は React の有力な代替になります。
どこで詰まりやすいか
実務で踏みやすい注意点も整理します。
①関数コンポーネントの 1 度実行
「 console.log を Counter 内に書いて、再実行されない」 ことで戸惑う。再実行が必要な処理は 「createEffect」 に入れる ルールが重要。
② デストラクチャの罠
「 const { name } = props」 と書くと、シグナルとの接続が切れる。props.name のまま使う がベストプラクティス。
③ 条件レンダリング
「 {show &&
④ ストアと createStore
「 ネストしたオブジェクトの状態管理」 は 「createStore」 を使う。「createSignal だけで全部済む」 と思って書くと、ネスト変更で更新が走らない罠にハマる。
「React と書き味は近いが、内部モデルは別物」 という前提を理解して書くと、Solid のパワーをフル活用できます。
AI 時代の Solid.js
AI 連携の文脈では、Solid は 「静かにいい立ち位置」 にいます。
AI ダッシュボードとの相性
「 AI が大量のデータを表示するダッシュボード」 で、Solid の性能が活きる。「細かい更新が頻発する UI」 で React より明確に有利。
React 専用 AI ツールは使えない
[v0](/articles/what-is-v0-vercel-ai-ui-generator-usage) の出力は React + shadcn ベース。「Solid に直接コピペ」 はできない。「AI 出力を Solid 流に書き換える」 一手間が必要。
エッジで動かす
SolidStart + Cloudflare Workers / Vercel Edge の組み合わせは軽量で速い。「AI 応答ストリーミング」 と組み合わせて低遅延 UI を作りやすい。
プロンプトに含めやすい
JSX 構文なので、AI への指示で 「React 風に書いて」 とほぼ同じ言語で伝えられる。出力の品質が比較的安定する。
「AI 系の重い React UI に疲れて、軽くて速いものに乗り換えたい」 という動機で Solid を選ぶケースが少しずつ増えている、というのが2026年現在の景色です。
Solid.js に関するよくある質問
Q. Solid と Svelte、どちらを選ぶべきですか？
A. JSX 派なら Solid、独自構文を受け入れるなら Svelte。React 経験を活かしたいチームは Solid のほうが移行コストが低く、「完全に新しい書き方」 を歓迎するチームは Svelte が好まれる傾向です。
Q. Solid は本番運用に耐えますか？
A. 十分耐えます。Adobe / Cloudflare / Replit など、本番採用の事例は増えてきています。「React ほど大規模事例がない」 のは確かで、「採用するチームに学習意欲があるか」 が成否を分けます。
Q. React からの移行コストは？
A. 数日で書き始めるレベルです。書き味は近いですが、「関数コンポーネントが1度しか実行されない」 「デストラクチャでシグナル接続が切れる」 など、「React の癖を抜く」 のに最初の数日は手こずる場合があります。
Q. SolidStart は Next.js と比べてどうですか？
A. 機能の幅は Next.js のほうが広い、性能は SolidStart のほうが上です。「エコシステムの厚みを取るなら Next.js、性能と軽さを取るなら SolidStart」 という棲み分けです。「AI 系の React 専用ツール」 を多用するなら Next.js が圧倒的に有利、というのも判断材料です。
Q. Solid のエコシステム(ルーティング・状態管理・UI ライブラリ)は十分ですか？
A. 基本は揃っているが React ほどではない。「@solidjs/router」 「@solidjs/store」 など公式の基盤と、「Solid Aria(Adobe)」 「Park UI」 「Kobalte」 などコミュニティ UI ライブラリがあります。「React のあらゆるニッチに対応するライブラリ」 と比べると選択肢は少ない、と覚えておくと現実とのギャップが小さい。
Q. shadcn/ui の Solid 版はありますか？
A. shadcn-solid という非公式のプロジェクトがあり、Solid + Tailwind + Radix UI 系コンポーネントの体験を提供します。「React 版の完全互換ではない」 ものの、「shadcn の体験を Solid で再現したい」 案件で使われています。
Q. Solid を学ぶ最短ルートは？
A. ① 公式チュートリアル(「solidjs.com/tutorial」)を 1 セット、② 「createSignal / createEffect / createMemo / createStore」 の4つを使う小アプリを書く、③ 「Show / For」 で条件・リスト描画、④ SolidStart で SSR を試す、の4ステップが王道です。「React 経験者なら半日で読める」 のが Solid の学習コストです。