Virtual DOMを基盤とする、React互換のモダンなコンポーネントAPIを備えた高速な約4kBのUIライブラリ。
solidjs/solid
Virtual DOMではなく、細粒度のリアクティビティでJSXを実際のDOM更新にコンパイルする宣言的なJavaScript UIライブラリ。
- スター
- 36,172
- フォーク
- 1,136
- 未解決の Issue
- 36
- 最終コミット
- 24 時間前
これは何?
Solidは、ユーザーインターフェースを構築するためのJavaScriptライブラリです。Virtual DOMの代わりに、JSXテンプレートを実際のDOMノードにコンパイルし、状態が変わると、その状態に依存する式だけを更新します。コンポーネントはビューをセットアップするために一度だけ実行される通常の関数で、その後の処理はシグナル、派生値、エフェクトが担います。
ContextとStoresによるグローバル状態管理のプリミティブに加え、サーバーデータの読み込みに使うResources、Suspense、並行レンダリングを備えています。また、ストリーミングと段階的なハイドレーションに対応したサーバーサイドレンダリング、Error Boundaries、Portalsもサポートしています。カスタムレンダラーも作成できるため、ブラウザー以外の環境も対象にできます。
SolidはJSXとTypeScriptを基盤とし、Viteと連携します。DOMに直接アクセスする設計のため、D3などの既存のネイティブJavaScriptライブラリと併用できます。ブラウザーのサポート対象は、デスクトップとモバイルの最新ブラウザーのうち、過去2年分です。
主な機能
- 01JSXテンプレートを実際のDOMノードにコンパイルし、細粒度で更新
- 02リアクティブなシグナルと派生値による依存関係の自動追跡
- 03グローバル状態管理のためのContextとStoresを標準搭載
- 04非同期データに対応するResources、Suspense、並行レンダリング
- 05ストリーミングと段階的なハイドレーションに対応したサーバーサイドレンダリング
- 06カスタム要素とカスタムレンダラーをサポート
ユースケース
- 細粒度のリアクティビティを活用した、クライアントレンダリングのシングルページアプリケーションの構築
- ストリーミングと段階的なハイドレーションが必要なサーバーレンダリングのWebアプリ開発
- 再利用可能なWebコンポーネントやカスタム要素の作成
- DOMへの直接アクセスを活用した、D3などの既存のネイティブJavaScriptライブラリとの連携
クイックスタート
- 1
degitでJavaScriptアプリのひな形を作成する
npx degit solidjs/templates/js my-app - 2
プロジェクトフォルダに移動する
cd my-app - 3
依存関係をインストールする
npm i - 4
開発サーバーを起動する
npm run dev
トピック
よくある質問
- solid とは?
- Virtual DOMではなく、細粒度のリアクティビティでJSXを実際のDOM更新にコンパイルする宣言的なJavaScript UIライブラリ。 Solidは、ユーザーインターフェースを構築するためのJavaScriptライブラリです。Virtual DOMの代わりに、JSXテンプレートを実際のDOMノードにコンパイルし、状態が変わると、その状態に依存する式だけを更新します。コンポーネントはビューをセットアップするために一度だけ実行される通常の関数で、その後の処理はシグナル、派生値、エフェクトが担います。
- solid は無料で使えますか?ライセンスは?
- solid は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
- solid は今もメンテナンスされていますか?
- 活発にメンテナンス中。solid の最終コミットは 2026年10月24日 です。
- solid は何に使えますか?
- 細粒度のリアクティビティを活用した、クライアントレンダリングのシングルページアプリケーションの構築 ストリーミングと段階的なハイドレーションが必要なサーバーレンダリングのWebアプリ開発 再利用可能なWebコンポーネントやカスタム要素の作成 DOMへの直接アクセスを活用した、D3などの既存のネイティブJavaScriptライブラリとの連携
- solid のインストール方法は?
- degitでJavaScriptアプリのひな形を作成する: npx degit solidjs/templates/js my-app プロジェクトフォルダに移動する: cd my-app 依存関係をインストールする: npm i 開発サーバーを起動する: npm run dev
- solid はどこで入手できますか?
- ソースコードとインストール手順は GitHub にあります:https://github.com/solidjs/solid
概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。
関連プロジェクト
Omiは、JSX、Signalベースのリアクティビティ、ルーター、Tailwind対応を備え、再利用可能なカスタム要素の構築を目指すWeb Componentsフレームワークです。
Web、サーバー、ネイティブの各プラットフォームで利用できる、組み合わせ可能なコンポーネントからインタラクティブなUIを構築するJavaScriptライブラリ。
HTMLに直接リアクティブな動作を追加できる、堅牢でミニマルなJavaScriptフレームワーク。
Nuxtは、Vue.jsを使ってフルスタックの本番品質なWebアプリケーションやWebサイトを構築するためのオープンソースフレームワークです。
クライアントとサーバーで高性能なユーザーインターフェースを構築するための、非常に高速なReact風JavaScriptライブラリです。