Web フレームワークを調べる。
ymgnモチベーション
Vercelが高いので個人では使いたくない→Next.jsとVercelの結び付きが強い→Next.js以外の選択肢も持っておきたい。
なんならReact以外の選択肢も持っておきたい。
Cloudflare WorkersとR2の構成でWebサービスを作りたいので相性が良さそうなフレームワークを調べておく。
React 単体
単体で使うことは個人的にはあまりなさそう。
Reactが遅れているというのをXで投稿されてるのをいくつか見かけたが、ポジショントーク的な発言も混ざっていたのと、まだReactで良いだろうとも思っている。
ちなみにReactの公式ドキュメントの日本語翻訳がかなり進んでいて、英語の情報を漁らずともある程度勉強できるのでかなり助かる。
React + Next.js
業務で使う組み合わせはこれだなぁ。
<Image />の最適化を行ったりするにはVercelへのホスティングが必須なので、Next.jsを使うなら実質Vercelもセットで使うと思った方が良いのかも知れない。
React + Remix
個人的には取っ付きやすくて好き。
日本語では情報が少ないが、公式ドキュメントは充実してるし、こういう内容を発信してくれてる方の情報も参考になる。
Vue + Nuxt3
Vue2 -> 3でかなり変わった(ちょうどその頃業務でコードを書いていた)。
Nuxt3がリリースされるのにかなり時間がかかってその間にユーザが離れてしまったのが残念だった。
だが、最近調べているとかなりよくなっている印象で、個人開発では使ってNext.jsと比較してみてもいいかなと思っている。
Svelte + SvelteKit
Svelte開発者がVercelにJoinしたので今後どうなるんだろうな。
ただコード量も少なく書けるし後発なだけあってかなり洗練されている印象(数ヶ月チュートリアルしたり業務に取り入れようとして失敗したので文法は一通りインプット済み)。
日本のコミュニティも成長してきている印象で、書籍も出たりしているため勉強しやすくなった。
Solid.js + SolidStart
これもReactライクな文法だが仮想DOMを使わないのが特徴的。
ドキュメントの日本語翻訳がバッチリで勉強しやすそうなのも魅力的。
公式ドキュメントによると Vannila JS に次いでパフォーマンスが良いそう。
Qwik + Qwik City
JSXで書ける新たなフレームワーク。
面白そうだが、Reactとは似て非なるので、shadcn/uiやRadix UIのようにReactをベースに開発されているパッケージは使えないはず。
ymgn暫定的結論
業務で選定するなら(既に会社で導入されているので)React + Next.js一択。
個人開発で好きなように選ぶなら次の順。
- Svelte + SvelteKit
- Vue + Nuxt3
- React + Remix
- Solid.js + SolidStart
- Qwik + Qwik City
RemixはReactベースなのがかなり有利だと思っていて、巨大なReactの資産をほとんど使うことができる。
RemixはViteを使っておらずESBuildを使っているので、なんとなくイケていない印象。
例えば、shadcn/uiのテーマモード切り替えが使えなかったりする。
SvelteはReactと文法がかなり異なるためJSXに慣れた僕としてはよっぽどのことがない限り使わないかな。
後発ということと、より記述量を少なく、シンプルに書けることを売りにしていて(Svelte v5で導入予定のruneでどうなるかという所が気になるが)好きになった。
個人開発ではSvelteKitを使っていこうと思う。
Vue + Nuxt3もかなり良くなっている気がする。
本も出ていて学びやすいし、エコシステムもReactの次に充実しているはず。
コミュニティ主導ということもあって、ベンダーロックインがNext.jsほど激しくなく、Nuxt標準でCloudflare Workersへのデプロイもできる。
Solid.jsはReactの思想を継いでいるだけあって記法がほとんど同じかつ公式ドキュメントで勉強しやすいのもあり、個人開発では積極的に採用していきたい。
その後、Solid.jsの調査を進めていくと、Reactのエコシステムがほとんど使えないことが分かり今の段階で(個人開発のレベルであったとしても)採用するのは厳しいと判断した。
Qwikはそこまで調べていないが、時期尚早感があって触るとしても来年以降かなといったところ。
ymgnその後、色々Vercelについて調べてみると、Proプランはプロジェクト毎ではなくユーザー毎に課金されることを知った。
つまり、プロジェクト1個だけでも10個あっても$20で済む。
（Vercel Postgresのデータベース数を増やすのは1つにつき$1程度だった気がする）
これを高いと見るか安いと見るかは人それぞれだが、僕はNext.jsをVercelにホスティングして、Vercel Postgresをバックエンドとして使用することで幸せになれているを