
昨日気になったフレームワークQwikとSolidを試してみた
浦和レッズ 久しぶりの負け! 残念!
今朝は、4時半から開発開始です。
昨日実験したWeb Audoi APIを使った機能を実際のプログラムに組み込むました。この話は書けないので、昨日、夕方にやったことを書いておきます。
の中でViteで使えるフレームワークに知らないものが2つあると書きました。少しでも楽して作れるフレームワークを見つけたい病気を発症して調べてみました。
調べて見ると
ランキングを見るとSolidが1位、私の好きなSvelteが2位、Qwikが3位です。TWSNMP FCで使ったVueは5位です。
1位と3位を知らなかったというとです。ちなみに、最近苦しんでいるAngularは10位です。
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
のソースコードは
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
でした。
つまり、この3つは同じ系統でした。
私はReactの書き方が好みじゃないので2位の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はいずれも優れたフレームワークです。それぞれのフレームワークには独自の利点と欠点があるため、プロジェクトのニーズに合ったフレームワークを選択する必要があります。
明日に続く
いいなと思ったら応援しよう!
