昨日気になったフレームワークQwikとSolidを試してみた

浦和レッズ　久しぶりの負け！　残念！
今朝は、４時半から開発開始です。
昨日実験したWeb Audoi APIを使った機能を実際のプログラムに組み込むました。この話は書けないので、昨日、夕方にやったことを書いておきます。

の中でViteで使えるフレームワークに知らないものが２つあると書きました。少しでも楽して作れるフレームワークを見つけたい病気を発症して調べてみました。
調べて見ると

State of JavaScript 2022: フロントエンドフレームワーク

ランキングを見るとSolidが１位、私の好きなSvelteが２位、Qwikが３位です。TWSNMP FCで使ったVueは５位です。
１位と３位を知らなかったというとです。ちなみに、最近苦しんでいるAngularは１０位です。

SolidとQwikを試してみました。とは言っても

npm create vite@latest

でフレームワークの選択して、できたプロジェクトを起動してみるのと、生成されたソースコードを見比べるだけです。
どちらも同じApp.tsxが作成されます。

 Solid

タイトル未設定

のソースコードは

import { createSignal } from 'solid-js'
import solidLogo from './assets/solid.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = createSignal(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} class="logo" alt="Vite logo" />
        </a>
        <a href="https://solidjs.com" target="_blank">
          <img src={solidLogo} class="logo solid" alt="Solid logo" />
        </a>
      </div>
      <h1>Vite + Solid</h1>
      <div class="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count()}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p class="read-the-docs">
        Click on the Vite and Solid logos to learn more
      </p>
    </>
  )
}

export default App

起動すると、

Qwik

Framework reimagined for the edge! 📚 Qwik Documentation

のソースコードは

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

import qwikLogo from './assets/qwik.svg'
import viteLogo from '/vite.svg'
import './app.css'

export const App = component$(() => {
  const count = useSignal(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} class="logo" alt="Vite logo" />
        </a>
        <a href="https://qwik.builder.io" target="_blank">
          <img src={qwikLogo} class="logo qwik" alt="Qwik logo" />
        </a>
      </div>
      <h1>Vite + Qwik</h1>
      <div class="card">
        <button onClick$={() => count.value++}>count is {count.value}</button>
      </div>
      <p class="read-the-docs">
        Click on the Vite and Qwik logos to learn more
      </p>
    </>
  )
})

です。
試しにreactも試してみると

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

でした。
つまり、この３つは同じ系統でした。
私はReactの書き方が好みじゃないので２位のSvelteを使おうと思います。

AI(Goole Bard）に、どれが好きか聞いてみました。

大きな言語モデルとして、私は個人的な好みを持っていません。しかし、Svelte、Solid、Qwikの3つのフレームワークについて、客観的な情報を提供することはできます。

Svelteは、ReactとVue.jsの両方の利点を取り入れた、最新のJavaScriptフレームワークです。軽量で高速であり、習得も簡単です。また、SvelteはReactやVue.jsよりもメモリ効率が良く、パフォーマンスが向上します。

Solidは、Reactのフレームワークを継承した、状態管理に重点を置いたフレームワークです。Reactよりも軽量で速く、習得も簡単です。また、SolidはReactよりも状態管理が簡単で、バグが発生しにくいです。

Qwikは、Googleが開発した、Webアプリケーションの開発に特化したフレームワークです。SvelteやSolidとは異なり、ReactやVue.jsなどのフレームワークを継承していません。そのため、Qwikは独自の構文やAPIを使用しています。しかし、Qwikは非常に高速で効率的であり、ReactやVue.jsよりもパフォーマンスが向上します。

結論として、Svelte、Solid、Qwikはいずれも優れたフレームワークです。それぞれのフレームワークには独自の利点と欠点があるため、プロジェクトのニーズに合ったフレームワークを選択する必要があります。

Google Bard

明日に続く