Solid.js入門：仮想DOMなしで「爆速」を実現するJavaScriptフレームワーク

5分で体験するSolid.js

Reactの経験がある方なら、お馴染みのJSX構文のおかげでSolid.jsを非常に親しみやすく感じるでしょう。しかし、見た目に騙されてはいけません。本当の秘密はその内部構造にあります。まずは、セットアップ時間を節約するために公式のViteテンプレートを使ってみましょう。

# プロジェクトの初期化
npx degit solidjs/templates/ts my-solid-app

# ディレクトリ移動とインストール
cd my-solid-app
npm install

# 起動
npm run dev

localhost:3000にアクセスしたら、App.tsxの内容を以下のカウンターコードに書き換えてみてください。

import { createSignal } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);

  return (
    <button onClick={() => setCount(count() + 1)}>
      クリック回数: {count()}
    </button>
  );
}

export default Counter;

重要な注意点： ここでのcountは関数（getter）です。変数を直接使うのではなく、count()を呼び出して値を取得する必要があります。これにより、Solidは推測に頼ることなく、UIのどこを更新すべきかを正確に追跡します。

速度の謎を解く：なぜSolid.jsはReactを凌駕するのか？

React開発者共通の悩みは、不必要な再レンダリング（re-render）を防ぐためにuseMemoやuseCallbackを駆使しなければならないことです。Solid.jsは仮想DOM（Virtual DOM）を完全に排除することで、この問題を根本から解決しました。

Share: