今噂のSolidJSとは！？
記事は既にいくつかありますが、Reactを業務でよく使う私としては
今更ながら試したくて仕方なく・・つい記事にもしていまいました笑
SolidJSはReactに非常に似た記法であり
パフォーマンスを向上させることが可能です！
コードが似ている・・！？
適当なカウンターアプリの一部を例にします。
完成イメージは下の図になります！
シンプルに、表示している数字を+1 or -1できるだけです。
React
import React, { useState } from 'react';
const Counter = () => {
// useStateで状態管理する
const [count, setCount] = useState(0);
return (
<div>
h1titile
<p>現在のカウント: {count}</p>
{/* setCountが呼び出されると、再レンダリングされる */}
<button onClick={() => setCount(count + 1)}>増加</button>
<button onClick={() => setCount(count - 1)}>減少</button>
</div>
);
};
export default Counter;
SolidJS
import { createSignal } from 'solid-js';
const Counter = () => {
// createSignalで状態管理する
const [count, setCount] = createSignal(0);
return (
<div>
<p>現在のカウント: {count()}</p>
{/* setCountが呼び出されると、差分箇所の変更が実行 */}
<button onClick={() => setCount(count() + 1)}>増加</button>
<button onClick={() => setCount(count() - 1)}>減少</button>
</div>
);
};
export default Counter;
SolidJSの歴史
- 2021年6月が始まりなので、歴史はまだまだ浅い
- 2024年11月現在、最新Verは1.9.3
- JSの開発者であるRyan Carniato氏によって開発される
Ryan Carniatoさんが開発したんですね・・・
ちなみに、実際に記事にしている企業さんもいらっしゃいます！
SolidJSの特徴
次に、SolidJSの特徴を見ていきましょう！
とにかくパフォーマンス！
他のフロントエンドフレームワークと比較して、とにかく速いというのが
最大の特徴です。
(Svelteよりも速い・・・！)
コードがReactと類似
ここは上記で記載した、Reactと似ている特徴になります。
仮想DOMを使用しない
次の章で詳しく話します。
パフォーマンス向上の理由になります！
SolidJSの仕組み
SolidJSは、仮想DOMを使用しません。
仮想DOMの仕組みを復習がてら、Reactとの違いを見ていきましょう。
仮想DOMの仕組み
SolidJSの場合
- UIが更新される
- 更新された部分を検出
- DOMを直接操作し、UIを更新！
仮想DOMを作成する手間が省ける分、
パフォーマンスに差が出るということですね！
再レンダリングの有無
Reactって、無駄な再レンダリングを防ぐための実装が苦労したりしませんか？
MEMO化するなどして再レンダリング防止を図ったりしますが・・
SolidJSの場合はそもそもこの再レンダリングが発生しないことから、
実装の難易度も下がると言えます！
再レンダリングについて
話がSolidJSと少し逸れます。
上記で話した再レンダリングですが、
どのように確認すればいいかご存知でしょうか？
ここで、「React Developer Tools」という
拡張機能が活躍します！
React Developer Toolsの使用方法
まずは拡張機能をインストールしましょう。
Chromeのディベロッパーツールが必要
インストールしたら、chromeを開いてみましょう。
右上の方にReactのマークがあるのが分かりますでしょうか？
これが存在していれば、拡張機能のインストールが正しく実施されてます！
ではディベロッパーツールを開きましょう。
見慣れたネットワークタブやコンソールタブがあると思いますが、
右の方に「Components」というタブが追加されています。
開いておきましょう！
レンダリング箇所を確認
任意のテキストエリアに文字を入力するなどして、
UIを更新しましょう。
少々見づらいかもしれませんが、文字を入力する度に
画面全体が光ってることが分かりますでしょうか？
ここがレンダリングされている範囲になります！
使用したソースコード
私の方で準備したコードを使用しました。
クローンするなり、自由にお使いいただいて大丈夫です！
SolidJSのプロジェクトを作成
では実際にSolidJSのプロジェクトを作成してみましょう！
javascriptの場合
npx degit solidjs/templates/js {プロジェクト名}
typescriptの場合
npx degit solidjs/templates/ts {プロジェクト名}
プロジェクト作成の時間も、Reactと比べて速く感じるのは
流石に気のせいですかね・・？笑
ビルドする！
「npm install」を忘れずに！
npm install
npm run start
ついにSolidJS起動！
因みに「Learn Solid」リンクを押下すると
SolidJSのGithubへリンクします！
興味があれば・・・
SolidJSのデメリット
パフォーマンスについて色々話しましたが、個人的な
デメリットも一応記載しておきます。
まとめ
- 処理速度、パフォーマンスはSolid.JS
- 情報量やライブラリはReactが圧倒
- まだ歴が短いので、今後の情報に期待出来る！？
まだまだ登場したばかりのSolidJSですが、
今後の情報に期待できるとも言えそうですね！
色々な意見があると思いますが、
技術選定や個人開発の参考になれば幸いです！
公式にはチュートリアルも用意されているので、
興味のある方は是非チャレンジしてみてください！
参考文献