はじめに
はじめまして、WEB フロントエンドエンジニアの nuintee です。
この度かねてより関心があった SolidJS に入門する覚悟が出来たので、
その学習過程をアドベントカレンダーにしてみました。
SolidJS に少しでも興味のある方は、ぜひご覧ください。
フロントエンドの世界 2024 について
「フロントエンドの世界 2024」は普段 Next.js を書いている筆者が、同じフロントエンドライブラリである Svelte(Kit), Remix ,SolidJS, Qwik(City)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。
もくじ
- はじめに
- フロントエンドの世界 2024 について
- もくじ
- SolidJS とは？
- React との主な違い
- SolidJS の Hello World
- SolidJS のメリット・デメリット
- 参考
- おわりに
SolidJS とは？
SolidJS は、React にインスパイアされた UI 構築のためのフロントエンドライブラリです。
仮想 DOM を使用せず、直接 DOM を操作することで高いパフォーマンスを実現しています。
また、JSX 記法を採用しており、React 開発者にとって学習コストが低い点も特徴です。
React との主な違い
1. 仮想 DOM の有無
React は仮想 DOM を使用して UI を更新しますが、SolidJS は仮想 DOM を使用せず、直接実際の DOM を操作します。これにより、メモリ使用量や処理のオーバーヘッドを削減し、高速なレンダリングを実現しています。
2. よりシンプルな hooks
React の useState や useEffect に相当する機能として、SolidJS では createSignal や createEffect を使用します。これらは依存配列を必要とせず、状態の変化を自動的に追跡し、関連する部分のみを更新します。
SolidJS の Hello World
SolidJS で Hello World を表示するミニマムなコード例です。
1. プロジェクトのセットアップ
SolidJS プロジェクトを始めるには、以下のコマンドを実行します。
npx degit solidjs/templates/ts my-solid-app
cd my-solid-app
npm install
npm run dev
2. App.tsx の編集
プロジェクトの src/App.tsx ファイルを以下のように編集します。
import type { Component } from "solid-js";
const App: Component = () => {
const name = "SolidJS";
return <div>Hello {name}</div>;
};
export default App;
3. 動作確認
ブラウザで http://localhost:3003 を開くと、Hello SolidJS と表示されます。
SolidJS のメリット・デメリット
メリット
-
軽量かつ高パフォーマンス
SolidJS は仮想 DOM を使用せず、直接実際の DOM を操作します。
これにより、メモリ使用量や処理のオーバーヘッドを削減し、高速なレンダリングが実現可能です。
-
React ベース
既存の React 知識を活かして開発を進められるため、React や Next.js 開発者の学習コストが低いです。
-
開発体験の良さ
SolidJS は、React に似た JSX 記法を採用しつつ、より直感的でシンプルな API を提供しています。例えば、状態管理には React の
useStateに相当するcreateSignalやcreateStoreを使用し、より簡潔に状態を定義できます。また、再レンダリングの制御が容易で、パフォーマンスの最適化がしやすい設計となっています。さらに、
ForやIndexといった制御フロー用のコンポーネントが用意されており、ループ処理や条件分岐を宣 言的に記述することも可能です。
デメリット
-
エコシステムの規模
React や Vue 等のメジャーなライブラリと比較すると、SolidJS のエコシステムはまだ小さく、サードパーティライブラリも少ないです。
-
学習リソース
ドキュメントや記事が React や Vue 等のメジャーなライブラリよりはまだ少ないので、比較的学習リソースが限られてしまいます。
-
企業採用率
今のところは React や Vue に比べると企業での採用実績は少なく、SolidJS を活かした転職・就職の場が限定されてしまう可能性があります。※ 筆者による採用媒体調査の結果なので事実と異なる可能性はあります。
参考
おわりに
SolidJS は特に軽量で動作も速くて非常に感動しました。
また過去のState of Javascriptでは React を超える満足度を叩き出していたので今後に期待です。
また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！
この記事は フロントエンドの世界 Advent Calendar 2024の 13 記事目です。
次の記事はこちら SolidJS の世界: プロジェクトのセットアップ #2