Zenn
Open6

Solid.jsってな～に！

TypeScript
Web
SolidJS
泡沫京水泡沫京水

Solid.jsってそもそもどんなのよ

ReactとKnockoutの合いの子らしい
Reactとの違いは、仮想DOMを運用しないこと。さらに、
UIを最初に初期化して、状態として扱われている値だけ変化するようになっている。
そのパフォーマンスはとんでもなく速い。

ベンチマークの結果として
Reactはもちろん、Vue,Svelteよりも良いパフォーマンスを発揮したことがわかっている

泡沫京水泡沫京水

基本的なSolid.jsのHooksの種類を見てみよう

Signal （useState相当）

const [count,setCount] = createSignal(0)

Effect （言わずもがなuseEffect相当）

createEffect(() => console.log(count()))

Memo （言わずもがなuseMemo相当）

createMemo(() => `${firstName()} ${lastName()}`)
泡沫京水泡沫京水

上のコードを見て、ちょっとツッコみたくなった方々は熱心なReactコーダーなのでしょう。
みなさんの考える通り、以下の点がReactのHooksと異なります。

  1. Stateの値となるcountが関数になっていること
  2. EffectもMemoも第二引数をとっていないこと

これは、みなさんの期待通りに動作します。
つまり、Effectは更新時にのみ動作し、Memoはメモ化された値として動作します。

泡沫京水泡沫京水

ちょっと基本的なHooksの中身がみてみた～い！！

createSignal

function createSignal<T>(
  initialValue: T,
  options?: { equals?: false | ((prev: T, next: T) => boolean) }
): [get: () => T, set: (v: T) => T];

createEffect

function createEffect<T>(fn: (v: T) => T, value?: T): void;

createMemo

function createMemo<T>(
  fn: (v: T) => T,
  value?: T,
  options?: { equals?: false | ((prev: T, next: T) => boolean) }
): () => T;
泡沫京水泡沫京水

上記の定義からわかること

  • createSignalはGetter・Setterを返す。
  • createEffectの第二引数はOptionalであるため、設定してもしなくてもよいことがわかる
  • createMemoは第一、第二引数までがcreateEffectと同一であり、第三引数はcreateSignalのoptionsと同一である
泡沫京水泡沫京水

基本的なHooksの詳細

createSignal

これは、状態として変化する値を追跡するための関数
つまり、追跡する状態を作成する関数である。
初期値を与えて「作成」し、配列として戻り値を受け取り、

  • 最初の要素が現在値を返す関数

  • その次の要素が値を更新するための関数

    optionとして存在するequalsは新しくセットしようとした値が、これまでの値と異なっていた時にだけ
    更新させることも可能。

    また、equalsに関数を渡すことによって、等価性テストを自分でカスタマイズすることができる

    createEffect

    これは、副作用と呼ばれる部類の処理を実行するために用いる。
    例えば、DOMに関する直接的な操作はそれにあたる。

    何かしらの状態値が変化した際に、与えた関数が実行されるようにプログラムを書く。