Zenn
🎨

SolidJSが使いやすい

2023/10/20に公開
TypeScript
Vite
SolidJS
tech

SolidJSというフロントエンドUIライブラリがかなりいいので紹介します。

SolidJSとは？

Reactって知っていますよね？Reactは、UIライブラリです。Solidも、Reactと同じ立場です。

百聞は一見にしかずということで、コードを見てみましょう。カウンターのコードです。

import { createSignal } from 'solid-js'

export const App = () => {
  const [count, setCount] = createSignal(0)

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

コードからわかる通り、JSXを使っています。VueやSvelteのように独自言語ではないです。JSXはJavaScriptベースですし、個人的にはそこがポイント高いです。

Reactユーザーならかなり見覚えがあり、読みやすいコードだと思います。

createSignalで状態を作成し、onClickでclickイベントを購読しています。Reactそっくりですね。
このコードのポイントは、countの取得時にcount()と、関数として呼び出している点です。これは、後に書く「シンプルさ」と関係しています。

シンプル

Solidはシンプルです。コードが綺麗です。

その中でも、「コンポーネント関数が一回しか実行されない」がかなりいいです。

コンポーネント関数が一回しか実行されない

1秒ごとにカウントアップするコンポーネントを作りたいとします。
Reactでは、以下のように書くでしょう:

import { useState, useEffect } from 'solid-js'

export const App = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    setInterval(() => setCount(count + 1), 1000)
  }, [])
  return <div>{ count }</div>
}

Reactでは、再描画時にコンポーネントの関数が実行されるため、setIntervalを直で書いたらものすごいことになってしまいます。
setIntervalが1度しか実行されないようにするために、useEffectを使わなければいけません。

一方、SolidJSの場合は、以下のようなコードになります:

import { createSignal } from 'solid-js'

export const App = () => {
  const [count, setCount] = createSignal(0)

  setInterval(() => setCount(count + 1), 1000)
  
  return <div>{ count() }</div>
}

コンポーネントが最初の一回でしか実行されないので、Reactの例で挙げたuseEffectのようなコードを書く必要はありません。

countの取得時にcount()と書くのは、これを実現する都合上です。

MemoやEffectが楽

どういうことでしょうか。
例えば、以下のような「ステートdataが変更されたら出力する」を考えてみましょう。

Reactなら、

import { useEffect } from 'react'

useEffect(() => {
  console.log(data)
}, [data])

ですね。依存する状態の一覧を配列にして渡しています。

Solidなら、

import { createEffect } from 'react'

createEffect(() => {
  console.log(data())
})

でいいんです。依存する状態を指定する必要はありません。シンプルですね。

ReactのuseMemoも同じように、依存状態の配列はいりません。自動でやってくれます。いいですね。

stateがコンポーネント外でも使える！

useState含めたReact Hooksはコンポーネント外で作れませんが、createSignal()はコンポーネント外でも使えます！
これがどんなことに使えるかというと、グローバルなストアを作りたい時とかに使えます。

store.tsを以下のようにし、

// store.ts
import { createSignal } from 'solid-js'

export const [count, setCount] = createSignal(0)

ここから

import { count, setCount } from './store.ts'

のようにすると、どのコンポーネントからでも値を変更できるグローバルな状態管理が簡単に実現できます！

その他のメリット

速い

SolidJSはReactやVueなどの仮想DOMは使わず、直でDOMを操作するため、高速です。
SolidJSのサイトには、VueやSvelteより高速というデータが載っています。(2023年10月20日21時現在)

個人的には、速度はあまり気にしなくてもいい気がしますが...

サイトが日本語対応している

本家のサイトが一部日本語対応です。かなりありがたいです。

伝えたいこと

SolidJS、Reactユーザーならかなり使い心地がいいと思います。
あまり知名度は高くなく、ライブラリや日本語情報は少なかったりしますが、だんだんと増えている感じがします。

かなりおすすめです！

GitHubで編集を提案

Discussion