🤑

モダンフロントのフレームワークは何を選べばいいのか?

2023/02/01に公開
2

フロントエンドのフレームワーク(FW)はあいも変わらず出たり消えたりしています。
「結局どれを選べばいいの?」 という問いに個人的には

  1. follow the money(利益が出ないとそもそもFWの開発が進まない)
  2. npm trends(利益の元 & 依存関係を増やせると生き残りやすい)
  3. 使いやすさ & 仕様を満たせるか

という順序で見ればいいかなと思っています。↑は優先順位そのまま
元々捨てる前提であればともかく、採用してもメンテナンスに入ってしまいそうな技術はやはり採用しにくい。

というわけで直近で出てきたFWの現況を見ていきます💰💰

npm trends

TL;DR

  • SGがメインであればAstroは選択肢に入るかも。
  • ECサイトならRemix選択肢に入るかも。
  • SolidJS & Qwik は素振りもしばらくいいかな... プロダクトレベルではまだ怖い

Astro

https://astro.build/

  • all in one の web frame work
  • default は ZeroJS。 パフォーマンスを最重要にしています
  • React / Vue などを部分的に取り込むことができる

お財布事情

https://www.crunchbase.com/organization/astro-0f1c

imo

最近個人的に注目しているAstroです。資金調達の話は見たことなかったのですが、現状シードラウンドで $7M 調達できてるみたいですね!
開発は約2年前から開始。しばらく安心して使えそうだなと思いました。
npm数は次項のSolidJSと同等のようです。

つい先日version2をリリースしており今後の動向も気になるところ!

https://zenn.dev/chot/articles/cb3b0319ef090d

SolidJS

https://www.solidjs.com/

  • ハイパフォーマンス
  • 仮想DOMを使用しない
  • Reactの上に乗っかっており、書き方がほとんどReactそのまま
  • 複数のレンダリングモードで対応可能(CSR / SSR / SG)

お財布事情

https://www.solidjs.com/blog/solid-fellowships-announcement

imho

公式のTOPにパフォーマンスをウリにした記述が。Astroを除くほとんどのFWよりパフォーマンスが優れていると主張しています(Astroは Zero JSなのでおそらく比較から除外)。
Reactのhooksに近いAPIも提供していて、移行も容易とのこと。

ただし、気になる点が資金調達を一切していない点。調べた限りでは見当たらず、現状 OpenCollective 頼りのようです。
そして、5年開発していてそこまで伸びていないのも懸念点。
指し示す方向自体は良いなと思うものの、しばらくは様子見でいいかな~というのが個人の感想です。

Remix

https://remix.run/

  • SGをあえて採用しない(公式TOP pageのTOPに載ってます。)
  • Nested routes
  • 書き方がほとんどReactそのまま

お財布事情

https://www.crunchbase.com/organization/remix-2613

imho

2021年11月にversion1がリリースされ当時はちょっと盛り上がっていた記憶が。
↑のnpm trends にもある通りに当初は年間$250の支払いが必要でしたがオープンソースとしたことでDL数が伸びてますね。

また、全く把握していなかったのですが、shopifyに買収されてました!!!!
$3Mの資金調達 → 少し経過して shopifyが買収していたようです。
運営も安定しそうですし、ECの分野では採用を検討した方がいいのかなと思いました。
特にshopifyの開発であれば vercel/Next のように親和性も高いんじゃないかと思ったり。

Qwik

https://qwik.builder.io/

  • Zero loading & Resumable

Resumableとは?↓

https://zenn.dev/aiji42/articles/fafa354f79660d

※お財布事情については調べても資金調達など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 が使えない時も同様ですね。

参考

https://zenn.dev/yend724/articles/20220701-430vndv085eh6xn2

https://zenn.dev/nicky/articles/754f0ca74c887a

https://zenn.dev/kaa_a_zu/articles/fbd06ca2cc3b86

https://zenn.dev/yuyao17/articles/ee3d8adda2e61f#nested-routes

chot Inc. tech blog

Discussion

tommy34tommy34

imohは何ですか?
imho (in my humble opinion)の間違いですか?