はじめに

はじめまして、WEB フロントエンドエンジニアの nuintee です。

もともと興味があった Svelte(Kit), Remix, SolidJS, Qwik(City) の 4 つのフロントエンドライブラリで簡単なアプリを開発してみた所感を元に比較をしてみました。

少しでもこれらのライブラリを導入しようと思っている方の参考になれば幸いです。

フロントエンドの世界 2024 について

「フロントエンドの世界 2024」は普段 Next.js を書いている筆者が、同じフロントエンドライブラリである Svelte(Kit), Remix ,SolidJS, Qwik(City)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。

TL;DR

エコシステムの規模、開発体験・学習難易度や企業等での採用数を見ていると、中~大規模アプリではRemix 、小~中規模ではSvelte を採用するのが現状良さそうだなと思いました。

※ あくまでも筆者の個人的感想です。

Svelte

Svelte は Web アプリケーションや UI を構築するためのフロントエンドライブラリです。

仮想 DOM を使用せず、コンパイル時に効率的な JavaScript コードを生成する仕組みによって、軽量なバンドルサイズを実現します。

特徴

仮想 DOM 不使用で高速
組み込み機能充実 (アニメーション・トランジション・ストア等)

Hello World

Svelte で Hello World を表示するコード例です。

App.svelte

<script>
  let name = "Svelte";
</script>

<style>
  h1 {
    color: #ff3e00;
  }
</style>

<h1>Hello {name}!</h1>

Remix

Remix は、サーバーサイドレンダリング（SSR）を活用し、モダンなユーザー体験を提供するために設計されたフレームワークです。

React をベースにしており、ルートごとにモジュール化された設計や、データのプリフェッチ機能、エラーハンドリング、フォームの最適化といった高度な機能を提供します。

特徴

Web 標準準拠
SSR 最適化

Hello World

Remix で Hello World を表示するミニマムなコード例です。

routes/_index.tsx

export default function Index() {
  const name = "Remix";

  return (
    <div>
      <h1>Hello {name}!</h1>
    </div>
  );
}

SolidJS

SolidJS は、React にインスパイアされた UI 構築のためのフロントエンドライブラリです。

仮想 DOM を使用せず、直接 DOM を操作することで高いパフォーマンスを実現しています。

特徴

仮想 DOM 不使用で高速
便利な制御コンポーネント (For, Switch, Match 等)
簡潔なコード

Hello World

SolidJS で Hello World を表示するミニマムなコード例です。

src/App.tsx

import type { Component } from "solid-js";

const App: Component = () => {
  const name = "SolidJS";

  return <div>Hello {name}</div>;
};

export default App;

Qwik

Qwik は、従来の SSR 後に必要とされるハイドレーションを回避し、Resumable（再開可能性）という概念を採用した WEB アプリケーション構築用フレームワークです。

特徴

ハイドレーション不要 (Resumable)
遅延ロード標準化

Hello World

Qwik で Hello World を表示するミニマムなコード例です。

src/routes/index.tsx

import { component$ } from '@builder.io/qwik';

export default component$(() => {
  const name = "Qwik"

  return (
    <div>
      <h1>Hello {name}!</h1>
    </div>
  );
});

フレームワークの比較

フレームワーク	状態管理	データ取得
Svelte	組み込みストア (`writable`, `readable`)	WEB 標準 `fetch` / `axios`
Remix	外部ライブラリ（`Zustand` など）	組み込み`loader/action`
SolidJS	組み込みストア(`createStore`)	組み込み`createResource`
Qwik	組み込みストア (`useStore`)	組み込み `useResource$`

個人的格付け

開発体験・難易度の観点を元にした個人的な格付けです。

🥇 Svelte: シンプルで直感的な記述が可能
🥈 SolidJS: 便利な組み込みコンポーネントが利用可能
🥉 Remix: SSR の知識が多少必要
Qwik: シリアライズ対応で複雑度高め

まとめ

それぞれのフレームワークの特性を活かした以下の使い分けがおすすめです。

Svelte: 小～中規模プロジェクト、開発速度重視
Remix: 大規模アプリ、堅牢性重視
SolidJS: パフォーマンス最適化重視
Qwik: 高パフォーマンス重視

おわりに

今回触った 4 つのフレームワークはどれもユニークで良くできており、用途に合わせた違った良さがあります。

なので本記事・その他記事を読んでの比較・採用検討はもちろん歓迎ですが、
是非皆さんにも実際に触っていただき、その上での比較をしてみてほしいなと思いました。

やはり技術は触ってなんぼですからね。

アドベントカレンダーの感想

また本アドベントカレンダーの感想ですが、4 つのフレームワークで 4 つのアプリを作り、それを元に 25 記事書くのは結構大変でしたが、それと同時に楽しかったです！

自転車操業のように次の日の記事執筆に追われる毎日でしたが、
最後の記事を書いている今となっては良い思い出です。

また短期間でフレームワークを学習しつつ小さいアプリを作って記事にする事で、
効率的にに理解が進んだと思います。

アドベントカレンダーという文化は「新しい事」を学ぶにはとても良い機会だなと改めて思いました。

来年は何を書こうかな〜

これにてフロントエンドの世界 Advent Calendar 2024は終わりです。

最後までお付き合いいただきありがとうございました！