State of JSから見る最近のJS vol.2

こんにちは。
スプラシアの鳥居です。
前回の記事では、JavaScriptの動向が分かるState of JSというサイトから、満足度80%以上かつリリース年数5~6年未満という基準を満たしているSolid, Qwik, Svelteをまとめていましたが、今回は上記のフロントエンドフレームワークを実際に触っていこうと思います。

もし前回の内容の詳細が気になった方は、前回の記事をご覧ください！

※今回の環境では、それぞれの公式サンプルをなるべく同じUIに私個人がコーディングして近づけて検証したため、別の方法を取れば、さらに最適化することはできると思います。
なので、あくまでも参考程度にご覧ください。

・node.js v20.9.0
・npm v10.2.3
今回はフロントエンドの比較をしたいため、ビルドツールは全てViteを使用します。

・Svelte v4.2.7
・Solid 1.8.11
・Qwik 1.5.7

公式：https://svelte.jp

@sveltejs/kit （またはsvelte-routing）
※今回は@sveltejs/kitを使用します。

svelte-app/
├─ src/ ソースコードのルートディレクトリ。
│ ├─ routes/ 各ページのルートを格納。
│ │ ├─ index.svelte ホームページのコンポーネント。
│ │ ├─ about.svelte アバウトページのコンポーネント。
│ ├─ lib/ 共通のライブラリやユーティリティを格納。
│ ├─ app.html アプリケーションのHTMLテンプレート。
│ ├─ global.css グローバルなCSSファイル。
├─ static/ 静的ファイルを格納。
├─ package.json
├─ svelte.config.js
├─ tsconfig.json
├─ vite.config.js

コンパイル時の最適化によって、他の2つのフレームワークに比べて、ランタイムオーバーヘッドを最小限に抑えることが可能とあったのですが、正直恩恵をあまり感じませんでした。
ただページの表示速度は、私の環境ではSolidとほぼ同速だったので、上記で記載した内容が影響しているのかなと感じました。
また他の2つのフレームワークに比べて、モダンJSでよく見るJSX記法を使用しなくても、HTML/CSS/JSの記法で書けるため、学習コストが低い・記述量が少ないという利点があると思います。

公式：https://www.solidjs.com

solid-app-router

solid-app/
├─ public/ 静的ファイルを格納
├─ src/ ソースコードのルートディレクトリ
│ ├─ components/ 各ページやコンポーネントを格納
│ │ ├─ Home.jsx ホームページのコンポーネント
│ │ ├─ About.jsx アバウトページのコンポーネント
│ ├─ App.jsx ルート設定を行うメインアプリケーションファイル
│ ├─ index.jsx アプリケーションのエントリーポイント
│ ├─ global.css グローバルなCSSファイル
├─ package.json
├─ babel.config.js
├─ vite.config.js

仮想DOMを使わずにDOMを直接操作しているため、QwikやSvelteに比べるとランタイムオーバーヘッドが少ない影響なのか、ロードが速く感じました。（約200msほどしか差がなかったため、誤差・環境・コード量の差ではあるかもしれませんが…）
ただ前回の記事で紹介したように、バニラとほぼ遜色ないパフォーマンスを発揮できると記載があるため、もしかしたらこの結果にも影響してきているのかもしれません。
学習コストもReactを勉強していればあまり高くないのかなと思います。

公式：https://qwik.builder.io

@builder.io/qwik-city

qwik-app/
├─ public/ 静的ファイルを格納
├─ src/ ソースコードのルートディレクトリ
│ ├─ components/ 各ページやコンポーネントを格納
│ │ ├─ Home.tsx ホームページのコンポーネント
│ │ ├─ About.tsx アバウトページのコンポーネント
│ ├─ routes.tsx ルート設定を行うファイル
│ ├─ entry.tsx アプリケーションのエントリーポイント
│ ├─ global.css グローバルなCSSファイル
│ ├─ index.tsx メインのエントリーポイント
├─ package.json
├─ tsconfig.json
├─ vite.config.ts

遅延読み込みと部分レンダリングによって初期レンダリングが早いからか、コード量を増やしてみても、レンダリング時間はほぼ変わりませんでした。
なので、大規模なアプリケーションを作る際に使用するといいかなと感じました。
またファイル名・フォルダ構成も個人的には分かりやすいと感じました。
ただ他の2つのフレームワークに比べて、学習コストが高い・初期ロードがやや遅いといったマイナス点はあります。

ここまで各フレームワークを触ってきたのですが、表にまとめると以下のようになります。

上記に記載している通り、それぞれが違ったアプローチ・最適化手法を取り入れており、異なるユースケースで優れた性能を発揮するかと思います。