SolidJSが使いやすい
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ユーザーならかなり使い心地がいいと思います。
あまり知名度は高くなく、ライブラリや日本語情報は少なかったりしますが、だんだんと増えている感じがします。
かなりおすすめです！
Discussion