SolidJSで、Reactプロジェクトを進化させませんか？

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

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

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

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

![スクリーンショット 2024-12-17 19.53.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/945342/2f9fc473-e58f-91bd-589e-6b69902899e6.png)

シンプルに、表示している数字を+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;
```

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

## SolidJSの歴史
- 2021年6月が始まりなので、歴史はまだまだ浅い
- 2024年11月現在、最新Verは1.9.3
- JSの開発者であるRyan Carniato氏によって開発される

Ryan Carniatoさんが開発したんですね・・・
ちなみに、実際に記事にしている企業さんもいらっしゃいます！

https://note.shiftinc.jp/n/nfa8c00379e7d?gs=14ff20f0350c

https://yumemi.connpass.com/event/266656/


## SolidJSの特徴
次に、SolidJSの特徴を見ていきましょう！

### とにかくパフォーマンス！
他のフロントエンドフレームワークと比較して、とにかく速いというのが
最大の特徴です。
(Svelteよりも速い・・・！)
![スクリーンショット 2024-12-17 20.00.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/945342/0b495d18-04dc-2c58-f8a0-9d9dca06e423.png)

### コードがReactと類似
ここは上記で記載した、Reactと似ている特徴になります。

### 仮想DOMを使用しない

次の章で詳しく話します。
パフォーマンス向上の理由になります！

## SolidJSの仕組み

SolidJSは、仮想DOMを使用しません。
仮想DOMの仕組みを復習がてら、Reactとの違いを見ていきましょう。

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

### SolidJSの場合

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

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

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

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

## 再レンダリングについて
話がSolidJSと少し逸れます。

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

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

### React Developer Toolsの使用方法

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

https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

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

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

![スクリーンショット 2024-12-17 20.18.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/945342/c6d65592-496c-8cb6-9a27-c80c2ad5d583.png)

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

![スクリーンショット 2024-12-17 20.17.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/945342/30f4d14d-6ecc-e1a6-0abf-4f721d3dabef.png)

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

開いておきましょう！

### レンダリング箇所を確認

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

![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/945342/b8a29324-ff69-b67f-9d80-16328888e121.gif)

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

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

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

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

### 使用したソースコード

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

https://github.com/railgun-0402/mypage-clone-ts


## 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へリンクします！

興味があれば・・・

![スクリーンショット 2024-12-17 20.34.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/945342/647a05f1-839e-375a-c105-341fe56eee3b.png)

https://github.com/solidjs/solid


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

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

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

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

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

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

## 参考文献

https://www.solidjs.com/

https://qiita.com/Yametaro/items/621bfd8c894f8fd36539#reactmemo%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E3%83%A1%E3%83%A2%E5%8C%96%E3%81%97%E3%82%88%E3%81%86