先に要点
- 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 ノードを更新する』</strong> 高速 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 連携 | パフォーマンス重視 / 中規模 |
要点は 性能の天井が違う』</strong> ことです。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』</strong>。React 経験を活かしたいチームは Solid のほうが移行コストが低く、完全に新しい書き方』 を歓迎するチームは Svelte が好まれる傾向です。
Q. Solid は本番運用に耐えますか？
A. 十分耐えます。Adobe / Cloudflare / Replit など、本番採用の事例は増えてきています。React ほど大規模事例がない』 のは確かで、採用するチームに学習意欲があるか』 が成否を分けます。
Q. React からの移行コストは？
A. 数日で書き始めるレベル』</strong>です。書き味は近いですが、関数コンポーネントが1度しか実行されない』 デストラクチャでシグナル接続が切れる』 など、React の癖を抜く』 のに最初の数日は手こずる場合があります。
Q. SolidStart は Next.js と比べてどうですか？
A. 機能の幅は Next.js のほうが広い、性能は SolidStart のほうが上』</strong>です。エコシステムの厚みを取るなら Next.js、性能と軽さを取るなら SolidStart』 という棲み分けです。`AI 系の React 専用ツール』 を多用するなら Next.js が圧倒的に有利、というのも判断材料です。
Q. Solid のエコシステム(ルーティング・状態管理・UI ライブラリ)は十分ですか？
A. 基本は揃っているが React ほどではない』</strong>。@solidjs/router』 @solidjs/store』 など公式の基盤と、Solid Aria(Adobe)』 Park UI』 Kobalte』 などコミュニティ UI ライブラリがあります。`React のあらゆるニッチに対応するライブラリ』 と比べると選択肢は少ない、と覚えておくと現実とのギャップが小さい。
Q. shadcn/ui の Solid 版はありますか？
A. shadcn-solid』</strong> という非公式のプロジェクトがあり、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 の学習コストです。