いつもは Vue.js をやってるけど、たまには他のものも触ってみたい。 React も触ってるけど、もっといい感じのやつがほしい。
と思っていたところにいい感じのやつを発見（前から知ってたけど）。
SolidJS とは
View ライブラリ。 React みたいに JSX を使うけど、Svelte みたいに仮想 DOM を使わない系のやつ。
ドキュメントはここ。
他 FW との比較
大体この辺に載ってる。
React とは設計哲学は一緒だけど動作は全く違う。 コンポーネントは一回だけ実行される。
Vue.js とはアプローチが一緒で、Proxy を使用した Reactive System を搭載している。
仮想 DOM は使ってない。
Getting Started
実際にやってみるのが一番手っ取り早い。
環境構築
テンプレ一覧。
tailwindcss template + basic file base routing がよさそうやんけ。
$ npx degit solidjs/templates/ts-router my-solid-project $ cd my-solid-project $ npm install
こうなった。
.gitignore README.md index.html node_modules package-lock.json package.json pnpm-lock.yaml postcss.config.js src tailwind.config.ts tsconfig.json vite.config.ts
Prettier の設定が欲しかったので、別のリポジトリからコピーした。
src の中身はこう。
├── app.tsx ├── errors │ └── 404.tsx ├── index.css ├── index.tsx ├── pages │ ├── about.data.ts │ ├── about.tsx │ └── home.tsx └── routes.ts
おもむろに npm start。
簡単なカウンターアプリが画面に表示された。
おー。
触ってみる
とりあえずページを追加してみる。
pages に mypage.tsx を配置して、routes.ts にそれをいい感じに定義。
// src/pages/mypage.tsx
const MyPage = () => {
return <div>My Page</div>
}
export default MyPage
// routes.ts
// 略
{
path: '/mypage',
component: lazy(() => import('./pages/mypage')),
},
// 略
アクセスしたら表示された。 ブラウザで作ったページが表示されている。
実際に色々試してみる
state とかを見てみたいので、入力フォーム（input）を配置してみようかな。 リストで表示させるか。 せっかくだし createResource も使いたいな。 Suspense もいいな。
ってやってったらコードが大量になっちゃったのでこちらで。 せっかくのチュートリアルをガン無視である。
完成形の UI はこちら。
やってみた感想
楽しい。 個人開発で使っていきたい。
見た目はほぼ React だけど（JSX だから）、Reactive System は Vue に近いから馴染みやすかった（かも？）。 再レンダリングについて気にしなくて良いのがめーーーっちゃ快適。
useSWR 相当の createResource がデフォルトで入っててよき。 Suspense と ErrorBoundary 楽だなー Vue にも来ないかなー。
Show とか For とか書くのが違和感あったけど、Vue も template + ディレクティブで書いたりするしこんなもんか。 構文のキモさみたいなのはあまりなくて、個人的には Svelte よりとっつきやすいかも。 エコシステムが充実してきたら乗り換えが多発してもおかしくない。 結構 Vue と同じ動作をするから、その注意点とかは引きずってそう（props の分割代入とか）。
ただ、メタフレームワークの SolidStart がまだベータなのと、採用数が少なめで知見が少ないのがネックかな。 適当に Vite で開発すりゃいいので、SSR しない限りはあんま困らなそう（個人の感想）。
あと本当かどうかは知らないけど、コンポーネントが増えると重くなるという話もあるらしい（リプライで否定されてるけど）。
svelte のパフォーマンス面の損益分岐点はかなり早い段階にあり、ライブラリが薄く自分が書いたコードに応じてコードを生成する方式なので、React のJSX系とは違い自分が書いたコード量に比例しやすい。昔管理画面を svelte で作ろうとしたときはコンポーネントを20個作った段階でひどく重くなった
— mizchi (@mizchi) 2023年9月6日
いい感じの記事を最後の最後に見つけてしまったので貼っておく。
