今噂のSolidJSとは！？

記事は既にいくつかありますが、Reactを業務でよく使う私としては
今更ながら試したくて仕方なく・・つい記事にもしていまいました笑

SolidJSはReactに非常に似た記法であり
パフォーマンスを向上させることが可能です！

コードが似ている・・！？

適当なカウンターアプリの一部を例にします。
完成イメージは下の図になります！

シンプルに、表示している数字を+1 or -1できるだけです。

React

counter.ts

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

counter-solid.ts

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;

INFO

とりあえず両者が似ていることだけイメージ
いただければとりあえずOKです！

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の仕組み

仮想DOM (React)

UIが更新される
仮想DOMを作成 (DOMのコピーのようなもの)
Componentを変更
変更前と後の差分を検出！
差分をDOMに反映させ、実際のUIを更新

SolidJSの場合

UIが更新される
更新された部分を検出
DOMを直接操作し、UIを更新！

仮想DOMを作成する手間が省ける分、
パフォーマンスに差が出るということですね！

再レンダリングの有無

Reactって、無駄な再レンダリングを防ぐための実装が苦労したりしませんか？
MEMO化するなどして再レンダリング防止を図ったりしますが・・

SolidJSの場合はそもそもこの再レンダリングが発生しないことから、
実装の難易度も下がると言えます！

再レンダリングについて

話がSolidJSと少し逸れます。

上記で話した再レンダリングですが、
どのように確認すればいいかご存知でしょうか？

ここで、「React Developer Tools」という
拡張機能が活躍します！

React Developer Toolsの使用方法

まずは拡張機能をインストールしましょう。

Chromeのディベロッパーツールが必要

インストールしたら、chromeを開いてみましょう。
右上の方にReactのマークがあるのが分かりますでしょうか？

これが存在していれば、拡張機能のインストールが正しく実施されてます！
ではディベロッパーツールを開きましょう。

見慣れたネットワークタブやコンソールタブがあると思いますが、
右の方に「Components」というタブが追加されています。

開いておきましょう！

レンダリング箇所を確認

任意のテキストエリアに文字を入力するなどして、
UIを更新しましょう。

少々見づらいかもしれませんが、文字を入力する度に
画面全体が光ってることが分かりますでしょうか？

ここがレンダリングされている範囲になります！

React

Reactの場合、実装によっては画面全体が
レンダリングされてしまいます・・

SolidJS

SolidJSではこのようなリスクが
ないのは楽ですね！

使用したソースコード

私の方で準備したコードを使用しました。
クローンするなり、自由にお使いいただいて大丈夫です！

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のデメリット

パフォーマンスについて色々話しましたが、個人的な
デメリットも一応記載しておきます。

SolidJSのデメリット

まだ情報が少ない (2021年にリリースされたばかり)
メジャーアップデートの例がない (アップデート対応どうなりますかね・・)
UIライブラリの量はReactに劣る (Reactは20種類以上選択肢があったはず)

まとめ

処理速度、パフォーマンスはSolid.JS
情報量やライブラリはReactが圧倒
まだ歴が短いので、今後の情報に期待出来る！？

まだまだ登場したばかりのSolidJSですが、
今後の情報に期待できるとも言えそうですね！

色々な意見があると思いますが、
技術選定や個人開発の参考になれば幸いです！

公式にはチュートリアルも用意されているので、
興味のある方は是非チャレンジしてみてください！

参考文献