SolidJS - Fine-Grained Reactivityの基本

2026.07.11

公式ドキュメント
JS

SolidJSとは

SolidJSはJSXを使うUIライブラリです。コンポーネント関数を状態更新のたびに再実行するのではなく、Signalを参照した箇所を追跡し、必要なDOMだけを更新するFine-Grained Reactivityを採用しています。

Reactと見た目が似ていても、状態やライフサイクルの挙動は同じではありません。React向けの知識をそのまま当てはめず、SolidJSのリアクティビティを理解することが重要です。

Signalの基本

import { createSignal, createEffect } from 'solid-js';

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

  createEffect(() => {
    console.log(count());
  });

  return (
    <button onClick={() => setCount((value) => value + 1)}>
      Count: {count()}
    </button>
  );
}

Signalは読み取り関数と更新関数の組です。リアクティブな文脈で読み取ると依存関係が記録され、値が変わったときにその利用箇所だけが更新されます。

主な仕組み

  • createSignal: 小さな状態を保持する
  • createMemo: Signalから派生する計算結果を保持する
  • createEffect: 状態変化に応じた副作用を実行する
  • createResource: 非同期データをリアクティブに扱う
  • createStore: ネストしたオブジェクトや配列を扱う

採用時の注意

JSXの類似だけでReact互換とは判断できません。コンポーネント関数の実行時期、propsの分割代入、Signalの読み取り方にSolidJS固有のルールがあります。また、性能は画面構造や測定条件に左右されるため、他ライブラリとの固定的な倍率ではなく、対象アプリで計測します。

参照

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR