リアクティブシステム / Learch

リアクティブシステム

SolidJS のリアクティブシステムは、アプリケーションの状態が変更された際に自動的に UI を更新することを可能にします。このセクションでは、SolidJS のリアクティブプリミティブを用いた簡単な例を通じて、そのリアクティブシステムの基本を説明します。

リアクティブプリミティブの基本

SolidJS のリアクティブ性は、createSignalやcreateEffectなどのリアクティブプリミティブを通じて実現されます。これらのプリミティブを使用することで、データの変更を監視し、それに応じて自動的に UI を更新することができます。

createSignal の使用
createSignalは、リアクティブな値を作成するための関数です。以下の例では、createSignalを使用してカウンターの状態を管理する方法を示します。
```
import { createSignal } from 'solid-js';

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

  const increment = () => {
    setCount(count() + 1);
  };

  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;
```
このコードでは、countというリアクティブな値を持つCounterコンポーネントを作成しています。setCount関数を呼び出すことでcountの値を更新し、その結果 UI が自動的に反映されます。
createEffect の使用
createEffectは、リアクティブな値の変更を監視し、その値が変更されるたびに特定の副作用（効果）を実行するための関数です。以下の例では、createEffectを使用してリアクティブな値の変更を監視する方法を示します。
```
import { createSignal, createEffect } from 'solid-js';

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

  createEffect(() => {
    console.log(`The count is now: ${count()}`);
  });

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

export default App;
```
この例では、countの値が変更されるたびにコンソールにメッセージが表示されます。createEffectは、countの値に依存しているため、その値が変更されると自動的に関連する副作用が再評価されます。

依存関係の追跡と最適化

SolidJS のリアクティブシステムは、効率的な依存関係の追跡を通じて、必要な部分のみを更新することで高いパフォーマンスを実現します。createSignalとcreateEffectを適切に使用することで、アプリケーションの状態と UI の同期を保ちながら、無駄な計算やレンダリングを避けることができます。

Solidコンポーネント

Solidルーティング