モダンフロントのフレームワークは何を選べばいいのか?
フロントエンドのフレームワーク(FW)はあいも変わらず出たり消えたりしています。
「結局どれを選べばいいの?」 という問いに個人的には
- follow the money(利益が出ないとそもそもFWの開発が進まない)
- npm trends(利益の元 & 依存関係を増やせると生き残りやすい)
- 使いやすさ & 仕様を満たせるか
という順序で見ればいいかなと思っています。↑は優先順位そのまま
元々捨てる前提であればともかく、採用してもメンテナンスに入ってしまいそうな技術はやはり採用しにくい。
というわけで直近で出てきたFWの現況を見ていきます💰💰
TL;DR
- SGがメインであればAstroは選択肢に入るかも。
- ECサイトならRemix選択肢に入るかも。
- SolidJS & Qwik は素振りもしばらくいいかな... プロダクトレベルではまだ怖い
Astro
- all in one の web frame work
- default は ZeroJS。 パフォーマンスを最重要にしています
- React / Vue などを部分的に取り込むことができる
お財布事情
imo
最近個人的に注目しているAstroです。資金調達の話は見たことなかったのですが、現状シードラウンドで $7M
調達できてるみたいですね!
開発は約2年前から開始。しばらく安心して使えそうだなと思いました。
npm数は次項のSolidJSと同等のようです。
つい先日version2をリリースしており今後の動向も気になるところ!
SolidJS
- ハイパフォーマンス
- 仮想DOMを使用しない
- Reactの上に乗っかっており、書き方がほとんどReactそのまま
- 複数のレンダリングモードで対応可能(CSR / SSR / SG)
お財布事情
imho
公式のTOPにパフォーマンスをウリにした記述が。Astroを除くほとんどのFWよりパフォーマンスが優れていると主張しています(Astroは Zero JSなのでおそらく比較から除外)。
Reactのhooksに近いAPIも提供していて、移行も容易とのこと。
ただし、気になる点が資金調達を一切していない点。調べた限りでは見当たらず、現状 OpenCollective
頼りのようです。
そして、5年開発していてそこまで伸びていないのも懸念点。
指し示す方向自体は良いなと思うものの、しばらくは様子見でいいかな~というのが個人の感想です。
Remix
- SGをあえて採用しない(公式TOP pageのTOPに載ってます。)
- Nested routes
- 書き方がほとんどReactそのまま
お財布事情
imho
2021年11月にversion1がリリースされ当時はちょっと盛り上がっていた記憶が。
↑のnpm trends にもある通りに当初は年間$250の支払いが必要でしたがオープンソースとしたことでDL数が伸びてますね。
また、全く把握していなかったのですが、shopifyに買収されてました!!!!
$3Mの資金調達 → 少し経過して shopifyが買収していたようです。
運営も安定しそうですし、ECの分野では採用を検討した方がいいのかなと思いました。
特にshopifyの開発であれば vercel/Next のように親和性も高いんじゃないかと思ったり。
Qwik
- Zero loading & Resumable
Resumableとは?↓
※お財布事情については調べても資金調達などhitせず。
Builder.io という visual CMSがメインの開発元のようです。
imho
Qwik does not do hydration because it is resumable.
この一文が最高にcoolだなと思っていました。
個人的にとても注目していたのですが、資金調達の話も現状なし。npmDL数も泣かず飛ばす。
これだとプロダクトに入るのはしばらく先になりそうですね...
(Builder.io 自体は資金調達も$14Mほどできていますし、マネタイズもしていますがQwikにどこまで力を入れるかは未知数)
さいごに
- Astroの資金源が明確になってホッとした
- Remixノーマークでしたが、これなら素振りぐらいしといた方がよさそう
- とはいえほとんど Next.js がカバーしちゃってるので Next.js でよくね? 感は否めない
自分でも混乱気味でしたが、現況を整理できてよかったです。それでは!
追記(2023/12/29)
Next.js version 13が出るまでは Next.js でよくね?感はありましたが、ちょっと潮目が変わってきたようにも感じます。
最近は生のReactでできるなら、無理やり Next.js 選ぶ必要もないよなと考えていたりします。
あとは vercel が使えない時も同様ですね。
参考
ちょっと株式会社(chot-inc.com)のエンジニアブログです。 フロントエンドエンジニア募集中! カジュアル面接申し込みはこちらから chot-inc.com/recruit/iuj62owig
Discussion
imohは何ですか?
imho (in my humble opinion)の間違いですか?
間違いですね;;
ご指摘ありがとうございます!