Repolode
solidjs

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. 1

    degitでJavaScriptアプリのひな形を作成する

    npx degit solidjs/templates/js my-app
  2. 2

    プロジェクトフォルダに移動する

    cd my-app
  3. 3

    依存関係をインストールする

    npm i
  4. 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 の数値は毎日更新されます。

関連プロジェクト