ウェブサイト• API ドキュメント•機能のチュートリアル•プレイグラウンド• Discord

Solid は、ユーザー インターフェイスを作成するための宣言型 JavaScript ライブラリです。仮想 DOM を使用する代わりに、テンプレートを実際の DOM ノードにコンパイルし、きめの細かい反応でそれらを更新します。状態を宣言してアプリ全体で使用すると、状態の一部が変更されたときに、それに依存するコードのみが再実行されます。紹介ビデオをチェックするか、読み進めてください!

主な機能

• 実際の DOM に対するきめの細かい更新
• 宣言型データ: リアクティブ プリミティブを使用して状態をシステムとしてモデル化する
• 1 回レンダリングのメンタル モデル: コンポーネントは、ビューをセットアップするために 1 回実行される通常の JavaScript 関数です。
• 自動依存関係追跡: 反応状態にアクセスすると、それがサブスクライブされます
• 小さくて速い
• シンプル: 再利用、結合、構築できるいくつかの強力な概念を学びます。
• JSX、フラグメント、コンテキスト、ポータル、サスペンス、ストリーミング SSR、プログレッシブ ハイドレーション、エラー境界、同時レンダリングなどの最新のフレームワーク機能を提供します。
• 自然にデバッグ可能: A

  <div>

  は実際の div であるため、ブラウザーの開発ツールを使用してレンダリングを検査できます。
• Web コンポーネントとの親和性が高く、カスタム要素を作成できます
• アイソモルフィック: クライアントとサーバーでコンポーネントをレンダリングします
• ユニバーサル:カスタム レンダラーを記述して、Solid をどこでも使用できるようにします
• アクティブなコアチームのサポートにより成長するコミュニティとエコシステム

> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm

> npx degit solidjs/templates/ts my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm

> npm install solid-js babel-preset-solid

babel-preset-solid

.babelrc

"presets": ["solid"]

.tsconfig

"compilerOptions": {
  "jsx": "preserve",
  "jsxImportSource": "solid-js",
}

なぜソリッド?

パフォーマンス

パフォーマンスのために細心の注意を払って設計され、その背後にある 5 年間の研究により、Solid のパフォーマンスは、最適化された標準の JavaScript とほとんど見分けがつきません ( JS フレームワーク ベンチマークの Solid を参照してください)。Solid は小さく、完全にツリー シェイキング可能で、サーバー上でのレンダリングも高速です。完全にクライアント レンダリングされた SPA を作成している場合でも、サーバー レンダリングされたアプリを作成している場合でも、ユーザーはこれまで以上に高速に表示されます。(ライブラリの作成者によるSolid のパフォーマンスの詳細をお読みください。)

パワフル

Solid は、最新のフレームワークに期待できるすべての機能を備えています。パフォーマンスの高い状態管理は Context と Stores に組み込まれています。グローバルな状態を管理するためにサード パーティのライブラリにアクセスする必要はありません (そうしたくない場合)。リソースを使用すると、サーバーからロードされたデータを他の状態と同じように使用し、サスペンスと同時レンダリングのおかげで応答性の高い UI を構築できます。サーバーに移行する準備ができたら、Solid は SSR とサーバーレスを完全にサポートし、ストリーミングとプログレッシブ ハイドレーションを使用して、できるだけ早くインタラクティブに移行します。(完全なインタラクティブ機能のウォークスルーをご覧ください。)

実用的な

より少ないリソースでより多くのことを行う: 隠れたルールや落とし穴のないシンプルで構成可能なプリミティブを使用します。Solid では、コンポーネントは関数にすぎません。レンダリングは、状態がどのように使用されるかによってのみ決定されます。そのため、コードを好きなように自由に編成でき、新しいレンダリング システムを学ぶ必要はありません。Solid は、プロジェクトの保守性を維持するのに役立つ宣言型コードや読み取りと書き込みの分離などのパターンを推奨しますが、邪魔になるほど独断的ではありません。

生産的

Solid は、JSX や TypeScript などの確立されたツールに基づいて構築されており、Vite エコシステムと統合されています。Solid のベアメタルで最小限の抽象化により、DOM に直接アクセスできるため、D3 などのお気に入りのネイティブ JavaScript ライブラリを簡単に使用できます。また、Solid エコシステムは急速に成長しており、新しい方法で Solid コードを記述できるカスタム プリミティブ、コンポーネント ライブラリ、およびビルド時ユーティリティが使用されています。

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

// A component is just a function that (optionally) accepts properties and returns a DOM node
const Counter = props => {
  // Create a piece of reactive state, giving us a accessor, count(), and a setter, setCount()
  const [count, setCount] = createSignal(props.startingCount || 1);

  // The increment function calls the setter
  const increment = () => setCount(count() + 1);

  console.log(
    "The body of the function runs once, like you'd expect from calling any other function, so you only ever see this console log once."
  );

  // JSX allows us to write HTML within our JavaScript function and include dynamic expressions using the { } syntax
  // The only part of this that will ever rerender is the count() text.
  return (
    <button type="button" onClick={increment}>
      Increment {count()}
    </button>
  );
};

// The render function mounts a component onto your page
render(() => <Counter startingCount={2} />, document.getElementById("app"));

createSignal

import { render, createComponent, delegateEvents, insert, template } from "solid-js/web";
import { createSignal } from "solid-js";

const _tmpl$ = /*#__PURE__*/ template(`<button type="button">Increment </button>`, 2);

const Counter = props => {
  const [count, setCount] = createSignal(props.startingCount || 1);
  const increment = () => setCount(count() + 1);

  console.log("The body of the function runs once . . .");

  return (() => {
    //_el$ is a real DOM node!
    const _el$ = _tmpl$.cloneNode(true);
    _el$.firstChild;

    _el$.$$click = increment;

    //This inserts the count as a child of the button in a way that allows count to update without rerendering the whole button
    insert(_el$, count, null);

    return _el$;
  })();
};

render(
  () =>
    createComponent(Counter, {
      startingCount: 2
    }),
  document.getElementById("app")
);

delegateEvents(["click"]);

もっと

公式ドキュメントを確認するか、いくつかの例を参照してください

ブラウザのサポート

SolidJS Core は、過去 2 年間、Firefox、Safari、Chrome、Edge (デスクトップおよびモバイル デバイス用) を含む最新のブラウザーのサポートに取り組んでいます。IE または類似のサンセット ブラウザはサポートされていません。サーバー環境では、Node LTS と最新の Deno および Cloudflare Worker ランタイムをサポートしています。

コミュニティ

Discordで私たちとチャットしてください！Solid の作成者とその他のコア チームはそこで活発に活動しており、私たちは常に貢献を求めています。

寄稿者

コレクティブを開く

寄付で私たちをサポートし、私たちの活動を継続してください。[貢献]

スポンサー

スポンサーになって、GitHub の README であなたのロゴとあなたのサイトへのリンクを入手してください。【スポンサーになる】