メタフレームワークの概要
みなさんこんにちは。雨宿りとWEBの小噺へようこそ。
ポッドキャスト配信者のkeethことくわはらです。
この番組は、日々降り注ぐ情報の中で少し雨宿りしながら、
様々なWEBテクノロジーの裏話や小噺をお届けする番組です。
今回の話題は、State of JavaScript 2024 の結果を眺めよう 第四回〜になります。
今回は、メタフレームワークを見ていこうと思います。
前回本当は、フロントエンドフレームワークとメタフレームワークセットで
見ようと思っていたんですけど、見始めたら全然時間が足りなくて、
フロントエンドフレームワークだけで20分超喋ってしまったので、
一旦区切って、メタフレームワークはメタフレームワークだけでやろうと思いました。
では早速見ていこうと思います。
メタフレームワークですね。
サブタイトルが、アプリケーションのレンダリングと配信に重点を置いたフレームワーク
っていう風に書かれています。
わかりやすくラッパーのフレームワークと思っていただくのがいいと思います。
今回もビューポイントは5つあって、ユースエイジ、アウェアネス、
インターレスト、リテンション、ポジティビティです。
一個一個は後ほど喋りながら見ていこうと思います。
冒頭のテキストはちょっとすいません。
前回フロントエンドフレームワークの時読まなかったので、今回はちゃんと読もうと思います。
人気のメタフレームワーク比較
Next.jsは利用率では強豪他社よりも高い位置にあり続けています。
もしGatsbyがなかったらNext.jsは最下位だったでしょう。
GatsbyがなければNext.jsは最下位だったでしょうけど、
これは特にアストロとスベルトキットの成功を物語っているとも言えます。
では早速その数字を見ていこうと思います。
ちょっと顔ぶれも出てきたんですけど、
今回メタフレームワークのこのグラフに登場する人物の顔ぶれを名前だけ上げていきますと、
Next.js、Nuxt、Gatsby、Remix、Astro、スベルトキット、ドキュザウルス、ソリッドスタート、ディーノフレッシュですね。
すみません、ディーノじゃなくてこれデノでしたっけ?
僕ずっとディーノって呼んでるんですけど、たぶんデノだった気がしますね。失礼。
デノフレッシュですね。
では早速有誠字から見ていこうと思います。
文字通り使ったことがあるっていうものですけども、
使ったことあるでいくとやっぱ第一位は圧倒的ですね。
Next.jsでした。
圧倒的って言っても、他の人たちと比べて圧倒的っていうだけで、
ライブラリの利用率でいくと54%でした。
回答者の半分ぐらいしかNext.js使ってない。
これを見る限り、メタフレームワークは結構皆さんいろんなものを使っているという風に受け取れるんじゃないかなっていう感じがしました。
リアクトの利用率があんだけ高かったんだから、
Next.jsも同じくらいみんな一回は使ったことあるだろうと思ってみたら、
意外とそうではなかったっていうところはありますね。
前々回にも言ったかわかんないですけど、
今ってバンドラーというか基盤となるライブラリにビートを使っている方が結構増えていて、
ビートのテンプレートがかなりよろしいし、
ビート自体がすごいパワフルなライブラリですので、
フロントエンドフレームワークとして、
メタフレームワークにNext.jsを使わなくてもよいんじゃないかと。
リアクト本体がそもそもパワフルというかいろんな可機能を持っているライブラリですし、
エコシステムを充実していて、
それをちゃんとビートが土台としてしっかり支えているっていう意味だと、
Next.jsを使わなくて、まず最初は小さく小さくどんどん積み分けていったり、
早くタイクルを回して進化をさせていくようなアプリケーションの開発っていう風な流れがある。
だからこそ最初からデカくNext.jsをどんどん乗せていくっていうのは、
一回みんな起き始めたのかなっていうような感触に僕は思っています。
実際わかんないですけどね。
他にもメタフレームワーク、他のものもいろいろ進化が遂げられているので、
実はみんな使ってないのかもしれないですけど、
いろんな捉え方あると思います。
という感じで、とりあえず1位はNext.jsでした。
で、2位が、2位はAstroですね。
数字伸びまして去年から4%を数字伸ばして、今23%がAstroですと。
海外はやっぱりAstroは本当に人気なんですね。
僕の周りでAstro使ってる人ってちょこちょこいなくはないですけど、
AstroよりもやっぱりRemixの方が僕の周り耳にするなっていう感触はあります。
僕も結構Remixの方がいいなって思ったりする節はありますね。
シンプルですし、結局やりたいのはサーバー性のレンダリングなのだっていうような感触です。
続いて第3位はNext.jsですね。
Next.jsは前回から1ポイント下げて22%です。
ほぼ僅差ですね。
Astroとは。
AstroがまさかのNextを抜きまして1%だけですけど、今Nextが第3位で22%でした。
これもですね、React Nextが結構複雑度上がり続けたり考慮するポイントがかなり増えてきてしまっているので、
疲れてしまった別の選択肢としてView Next、もう1回返ってくる。
同じように複数的な書き方をできたりするので、View.jsが。
ということを加味すると、もうちょっとシンプルに書ける。
考慮するべきところがフレームワークとかが割とカプセル化して書いてくれたりする。
吉田にやってくれたりするっていう意味もあって、
Reactづかれからの逃げ場としてView Nextっていう選択肢が浮上するのかなっていう別の観点が今、僕の関心としてはあってですね。
もしそうなったら面白いなと思ってます。
僕はもう新しいものをやっぱり書きたくなるので、僕だったらスベルトキットを書くか、React Limitsに行くかなって感触はありますね。
Astroはちょっと魔改造した感があるので、僕はちょっと懸念っていうか、1回距離を置いてます。
食わず嫌いなところも正直あるので、1回書いてみたら違うかもしれないですけどね。
何人か書いたことある人、知り合いにいらっしゃって、全然いいですよっていう話を聞いてはいますので。
本格的にアプリ開発したっていうわけでももちろんないので、その意思決定はしづらいですね。
このレベルまでのフレームワークを変えるって結構大変なのでね。
とりあえず第3位がNextでした。
では第4位ですけど、第4位はさっきもちょっと名前出ましたけどGatsbyですね。
Gatsbyはなかなか使ったことある、有生児なので、利用したことある人って意味だとそれは強いですよねって感じはしました。
テーマは前回からも数字ちょっと下げまして、4ポイント下げて19%ですね。
5分の1の人はGatsbyを一度は使ったことありますよと。
続いて第6位がSvelteKidになりますかね。
SvelteKid、16%で前回から1ポイントちょっと下げてますね。
回答した人の年齢が若くなったりとか、いろんな理由があって1ポイント下がったので何とも言えないですけど。
いや進化しているはずなので、この中ちょっとポイント下がったのは個人的には残念かなっていう感触ですね。
あとはLimixが11%で、これもちょっと伸び悩んでしまったというか、あんま伸びなかったのが僕としては残念だなって感じです。
あとはDocusaurusが10%、これは前回とほぼ変わらなくなって。
SolidStartが次2%、最後Denofreshも2%で、ここはほぼ同着ですね。
Solidは前回もしゃべった通りなので、意外と使った人は満足度そんな悪くないんですけど、そもそも使われてなかったり、認知度も知名度もそこまで取れてなかったりするっていうのがまだまだ課題なんだろうっていうのと、
そもそもライブラリーとしてのヘッドブランディングってところが大きな課題なのかなっていう感触もありますね。
利用率と認知度
続いて、有生人の続きなのでAoyanesです。
こっちは聞いたことある人プラス使ったことある人っていうところですね。
その数字でいくとNext.jsは99%なので、聞いたことすらないって人は1%以下ですよと。
ここもそうですよね。
続いて第2位もNext.jsで89%、10%ぐらいですかね。聞いたことすらないよっていう人は。
Next.nextはそこまでいくよねっていうのは予想つきます。
Gatsbyが今83%で、これちょっと意外でした。
僕もっとガーンと下がるかなと思ったら聞いたことすらないって人、そんな多くないんだなっていうのでさすがのGatsbyって感じでした。
あとは第4位がSvelteKidですね。
SvelteKidは本当に知名度、Svelteそのものがどんどん伸びてきてるっていうのもあって、
これとセットで知名度も上がってきたっていうので今82%ってことですが、
去年も82%なのでSvelteKid自体はあまり数字を増やせていないっていうふうに捉えられるかなって感じですね。
去年回答して今年回答しなかった人もいらっしゃるでしょうけどっていうところでした。
あとはAstroですね。Astroはやっぱさすが、もうずっと右肩上がり続けてきて、2021年なんて30%ですよ。
聞いたことあるもしくは使ったことある人が30%だったのに、2024年82%まで伸びてます。
強いですね、Astro。海外でガンガン使われてる。海外ってずっと言い続けてますけど日本でも使ってるのかもしれないですね。
ちょっとちゃんとこれ国ごとに調べてないので、その後でもし国ごとも調べられるのは見てみたくなりました。
あとRemixですね。Remixもずっと右肩上がってて、第6位かな?79%なので、
ほぼ8割の人は聞いたことあるもしくは使ったことあるので知名度はちゃんと取れているってところなのでね。
この後出てくるRetentionとか使った人の声をちょっと聞いてみようかなと思いました。
ここからどんと数字が下がってDocuSourceが続いてきまして49%で、
Freshが38%、Solid Startが36%というところです。
この辺はちょっと水がガーンと空いてしまっているところですね。
DocuSourceはどっちかというとプレマークというプレマークですけど、
アプリケーション開発というよりかホームページだったりフォートフォリオだったりとか、
メタフレームワークの現状
ライブラリーの公式サイトを作るみたいなツールだったりするので、
その意味だとメタフレームワークで今他の比較されるとちょっと厳しいというか、
ライブラリーフレームワークが持っているものとして方向性が違う、
どういう課題を解決しに行くフレームワークなのかというところが違うので、
並べられると辛いかもしれないと思いました。
続いてインタレスト、興味関心のところですね。
多分使ったことはないけど聞いたことがある中でポジティブだなというような印象を持っているものという感じですので、
先ほどとはグラフの結果が全然違うかもしれないですけど、
とにかく聞いたことある人の中でポジティブ、第1位はアストロですね。
今67%です。
これも前回から7%ポイント伸ばしていますと、
どんどん知名度とか聞いたことあるなという感じで、
利用事例もどんどん増えてきているとは思います。
その意味でこの数字は来年またどんどん伸びるのかなという気はしますね。
続いて第2位がスベルトキットです。
スベルトキットは55%なんですけど、
スベルトキットはずっと右肩下がってるんですよね。
2021年が70%だったんですけど、
2024年で55%まで15ポイントも下がってしまいました。
という意味だとポジティブに受け止められていない、
聞いたことあるってところなので、
認知度、知名度は取れてたりはしますけど、
あんまり声としては良い声が上がってない、
それが他の人たちの耳に入っていてそうなのかなという感じですかね。
公式サイトだったりチュートリアルだったりざっと眺めてみて、
好まれなかったっていう感じもゼロではない気がしますけど、
僕スベルトキット悪くないと思ってるので、
ここ悩んでるのはなんとなく悔しい思いもあります。
だいぶエコシステムも充実してきたり、
フロントエンドのエンジニアが欲しいなと思っているものも
しっかりリサーチした上で機能開発をしているような印象があったので、
GitHubの最近リポジトリとか一周全然眺めてないし、
ロードマップも見てないので、
それを見たら見ると独自路線走ってしまっているから
そうなっている可能性はゼロではない気がします。
そもそもスベルト自体が他のライブラリーとかフロントエンドフレームワークとは
少し毛色が違うものですからね。
ある種のコンパイラー的な立場だったりするので、
そこも含めて今回のインターレストのポイントは
伸びなかったのかもしれないなって感じでした。
デノとソリッドスタートの動向
続いてはですね、デノフレッシュで、これが52%ということで、
前回から5ポイント伸ばしてます。
ここでデノフレッシュ、そもそもデノが人気になってきている
っていうような捉え方をしても良いと思います。
いわゆるプラットフォームじゃないですけど、
Node.jsと比較するものの一つとしてデノがいると。
デノってノードのNOとDEを順番に入れ替えたやつですからね。
もともとNode.jsの開発者の一人が新しく立ち上げたプロジェクト。
その人だけではないですけどもちろん。
デノとかノードとか、あとBUNですね。
いろんな比較するものが今出てきている中、
デノっていうのが伸びてきているのかなっていう風には受け止められる。
なのでそれのラップしたフレームワークとして
デノフレッシュが右肩にガンと上がってきているのは良い話ではありますね。
聞いたことあるんだけど、
使ったことある人がそんなにまだまだ多くないので
皆さん使ってもらえたらなって感じはありますけど、
まあノードを使うでしょうねって気はしました。
もしくはBUNの方が割と進化しているのかな。
個人的にはデノよりもBUNの方が面白そうだなって思ってて。
がっつりまだ触ってないのでこっちは気になりましたけど。
続いてソリッドスタートですね。
ソリッドスタート48%で前回から5ポイント下げてます。
下がっているということは
ちょっとグッドなブランディングができていないということに他ならないので。
それもソリッド.js自体が伸びてくれないと
それのラップフレームワークがあるかなみたいな流れになってくれないので
ソリッド頑張ってくれっていう印象がすごい強いですね。
あとはリミックス。
リミックスはちょっと右側下がってきておりますけど
前回2023年とポイントは一緒です。48%ですので
ちょっと踏みとどまってきているのかなっていう感触ですね。
まあネクストが下がってきているので
乗せ替え先というか
他のものとして選択肢にリミックスが上がってくると思いますので
自然とこの数字が解決するかもしれないですけど
とはいえネクストの大変さというか
ネクストからの解を奪えると良いとは思いますので
どういう進化をしていくのがいいのかというのは難しいですけど
進化するためにいろんな機能を付け加えたりして
結局重くなったり難しくなったりしたら本末転倒なので
そこはコンセプト通り走ってもらいたいなという感じがあります。
その中でいろいろ利便性というのが上がってきたり
他のライブラリーとかリアクトの親和性が上がってくるのであれば
この図とこれは右肩が上がってくれると信じたいなと思いました。
Next.jsとGatsbyの評価
では続いて我らはNext.jsですけど
今年前回から10%も数字下げて43%ですね。
ちなみにトップの時は2019年で73%で
ここからずっと右肩が下がり続けてきて今43%になりました。
リアクトのお話とも一緒ですけども
ポジティブに受け止められるような進化をしてるんでしょうし
実際RFCもそうですしブログとかも書かれていて
リリースブログとかも見てまして
こんなことできるようになったとかこんな進化になったんだっていうのも
もちろんあるんですけど
それ以上にこれなんだとか
細かくなった分より考えること考慮ポイント増えたなとか
ずっと言い続けてますけど複雑と上がり続けてきたりする
いろんなことを加味すると
ちょっとNext.jsへの印象は悪くなってきてんだなっていう風に受け止められますね。
実際そんなに右肩がんって上がってんの
右肩下がってんのっていうのは結構でかい話ですから
下げ幅が一番大きいのもNext.jsですね
なのでこれは何とかせんといかん気はします
バーセルさん頑張ってくれってとこでした
続いてNext.jsですけど
Nextは前回から3ポイント下げて39%ですね
そもそもそんな高くないので
ほぼ右肩下がりですけど横ばいに近い感じです
この5年間通して8ポイントしか下がっていない
しかなのか8ポイントもうなのかは人それぞれですけど
僕からするとそんなに変わってないかなって感じです
ラストGatsbyですけど
Gatsbyさんはそれこそずっと右肩下がり続けていて
2019年にはNextにほぼ近くて66%が満足してるよってとこだった
こういう印象だよっていうお話だったんですけど
今2024年だと12%なので実に54%下がっています
去年と比較すると8%しか下がってないんですけど
もうほぼ今12%なので
皆さんそもそもGatsbyはもう使わなくなったと
言って良いでしょうと思います
Gatsby自体もそんなに大きな進化を遂げるとは思ってないですからね
ということでした
続いてRetentionですけど
RetentionはさっきのInterestとほぼ一緒ですね
数字がもう少し伸びたぐらいの話です
1位はASTRO 94%で
2位がSplitKid 90%で
そこから少し下がってNextが81%で
ここから2位集団がほぼほぼバーっと連なるって感じで
ラストGatsbyだけかなり下にいまして27%って感じでした
利用したことがある人の中で肯定的勘定の割合ですからね
Retentionはそんなにって感じはしますけど
一応ですね
Gatsbyは去年から6ポイント一応上げてはいるんですよね
肯定的勘定は
これはこれで興味深いですよね
Interestずっと右肩下がり続けてドーンと低いのに変わらず
使ったことある人の中で肯定的な勘定というのは
むしろ伸びたっていうのがなかなか面白いですね
使ってないと思うんですけど
意外と使い続けてきて
Gatsby用税がまだ残ってきたり
今回の回答者に多かったのかもしれないですね
でNext.jsはというとこの数字やっぱ下がってます
Next.jsは使ったことある人の方でも
肯定的な勘定の割合が低くなってしまっていて
これワースト2なんですよね
Next.jsって今68%ですというので
3割ちょっとの人たちがNextやネガティブです
っていうようなコメントがそうですね
あと右肩下がってるのはソリッドスタートですね
ソリッドスタート残念ながら下がってて
85%から80%に下がったので
とはいえかなり高水準にいるので
比喩とはいかないですけど5ポイントも下がってるのは
ちょっとでかいですよね
利用者の数が大きくないので
必然的に数字の重みが変わってきますのでね
中の人たちもこれ意識してるとは思いますけども
とはいえそもそも高水準であれば
使いを増やしていく利用者を増やしていくところに
注力するので全然いいと思いました
今回右肩下がってるのは
そのさっきのソリッドスタートとNext.jsだけで
それ以外は全部数字のあれはありますけど
右肩に上がってるという
ちょっと伸ばしているのがいいと思いましたね
使っていただければ少しは良さを実感してもらえている
っていうのがいい話ですね
ではラストポジティビティですけど
下がってるやつ下がってないやつが顕著に現れまして
ヤスビーさんはずっと下にいます
ワースト1位で17%ですね
トップはアストロですね
とにかく2024年世界はアストロをかなり評価をした年だった
ということがこれずっと証明され続けてきたと
言えますでしょう
アストロ73%です
感想ですね
メタフレームワークの現状
コメントをした人の中でポジティブな人っていうのは割合が
アストロ73%でこれは素晴らしいですね
それ以外は大体ちょっと伸びたとはいえ
全体としてポジティビティは右肩下がりです
大体皆さん下げてますねって感じでした
そのうち数少ない伸ばしているのがアストロぐらいじゃない
第2位がスベルトキット61%
第3位はネクストジェスですね
57%でした
コメントをそもそもしているプレイマークそんなに
多くなかったっていうのはもちろんあるかもしれないですけどね
他今のは一応
5つのビューのポイントだったんですけど
他のグラフも見ていきましょうか
Other Metaframeworks
一応ざっと書いてますけど
僕は何か知らないフレームワークがいくつかあるので
ざっくり名前を挙げてきますと
アナログ、イレブンティ、カーサー、ハンスタックルーターですね
これフレームワーク、メタフレームワークと言っていいか
まだ悩ましいですけど
今そこまでアプリケーションが開発できるような進化を
遂げてきたっていうのは耳にしているので
入っててもおかしくないと
あとはメテオという懐かしい名前とか
NEST、ビートプレス
ビートプレスはなんかまだこれも
違う問題解決のためのフレームワークなんで
ここに名前乗るのはどうなんだってちょっと思いながら
あとはバイク、アドニス、エキスポと
名前が連なりますよという感じでした
ユーストアットワークで
仕事で使っているよってものの割合ですけど
ユーザー体験と課題
やはり第1、ネクストジェイス45%で
もう頭2つ、3つぐらいいきそうなぐらい伸びてます
第2はナクストが16%
第3、アストロが13%
第4、インスペルトキット9%
第5、リミックスで6%
アプトマー6789と
ギャスビー、ドキュザウルス、ソリッドスタート
アナログ、デノーフレッシュと
つながりますという感じでした
年収もそんなに大差ないから年収よくて
経験年数は
前回のフロントエンドフレームワークの
ものと結構似てる感触ですね
全体、総顧だけいきますと
50%Lが9年間やってますと
ミニマムが3年
マックス90%Lで21年間というところなので
まあまあそんなもんだよねって感じです
参考値でしかないなって感じですね
ではラスト
メタフレームワークの満足度いきましょうか
満足度でいくと
メタフレームワーク2024年の満足度は2.4ポイントですね
前回2023年も2.4ポイントなので
あんま変わりないけど
高くないですね2.5
半分切ってますから
この調査をしたとき
一番最初が2022年なので
まだ3回目ですけど
その時も2.6というポイントを見る限り
あんま高くないよねって感じでした
じゃあどういうところが
スライドという風に取れられるかというと
1位はネクストジェイスの一周でした
これはリアクトの時もそうですね
フロントエンドフレームワークの
ペインの1位はリアクトの一周だったので
同じです
2位も一緒
Excessive Complexityなんで複雑度が高いよ
っていうお話ですね
第3位はフロントエンドフレームワークと違って
第3位ブレッキングチェンジで破壊的変更きつい
第4位がSSRがきついと
第5位はパフォーマンスですね
パフォーマンス第5位にくる
ということは基本的にはメタフレームワークじゃなくて
本質的にパフォーマンスの
ボトルネックになっているのは
フロントエンドフレームワークの方だと
いうところです
ラッパーはあくまでラップしているだけでよ
ということですね
第6位が面白いのが
Lack of Documentationという
ドキュメントの更新が追いついてねえぞ
みたいなところでした
第7位デプロイメントなんですね
第8位スピードオブチェンジ
といったところの課題がありまして
ちなみにしれっと書いてますけど
第10位バーセルって書いてる
ちょっと面白いです
気持ちは分かる
ということで
ざーっと見てきましたけど
そんなところでした
では今回またちょっと長くなってしまいました
なのでここで終わっていきたいと思います
エンディングです
いかがだったでしょうか
冒頭で喋ったような感じとは
僕はちょっと印象違いましたけど
とにかく2024年は
アストロが伸びた年だったというのが
すごく思いました
でNext.jsリアクトもセットで
どんどん印象もよくなくなってきているし
複雑度はやっぱ上がってきて
リアクトとネクストももう辛いなっていう風に
皆さんがはっきり表明してきた
っていうような感じですね
数年右肩下がってきているのは事実なんですけど
他ソリッドスタートとか
リアクト系のラッパーフレームワークとしての
リミックスがあんま伸びてなく
スベルトキットもそんなでしたね
アウェアネスで高いところにいるんですけども
インターレストでちょっと右肩下がってる
全体通して
インターレストが右肩下がってるってことは
そもそも皆さんメタフレームワークそのものへの
ポジティブな感触が今ないんだろうなっていうところですね
本体のフレームワークでやれることが
結構増えてきたからっていう
捉え方もしてよいとは思いますけど
とはいえそれだけでできることと
やっぱラップしてもらいたいものもあったりする
レイヤー高いところで処理したいものも
出てくるとは思いますので
フレームワークとの付き合い方は
そうだなと思いますけど
メタを考えなくていいような
フロントエンドフレームワークだけで
開発が進むっていうのがもしかしたら
もう少し伸びてくるのかもしれないな
っていう感触がありました
皆さんもご自身でお好きなように
クエリビルダー発行できますので
いろんな見方をして見ていただければ
いいんじゃないかなと思います
僕は業務だと
なんだかんだ選ぶとしたらネクストですけど
リアクトを選ばないっていう選択肢が
やってもいいんであれば
スペルトキット書いてみたいなっていう
のが僕の個人的な気持ちですね
あとはクイックがもう少し伸びたら
クイックのメタフレームワークも
ここに乗っかってくるんじゃないかな
クイックシティだったかな
乗ってきてほしいなと思ったりはしてますので
速さ重視のクイックが伸びてくれることを期待しつつ
あとギャツビーさんは来年は
ここにも名前乗らないんじゃないかなっていう
気もしてますね
でもそれ以外何が乗るのかっていう
他に乗るものはあんまない気がしますけども
来年もこの顔ぶれは一緒だと思いますので
バーセルさんがネクストをどういう方向に
持っていくのか次第かなっていう感触ですね
あとはアストロ
とりあえずアストロが
こんだけ伸びるんであれば
来年堂々と1位を取るんじゃないかな
って気はしますね
食わず嫌いだったので
アストロそろそろ僕も触るか
っていう気になってきました
というところで終わっていきたいと思います
この番組面白かったよという方は
ぜひチャンネル登録もお願いします
もし聞いていて気になることや
話してほしいトピック
感想などありましたら
概要欄のフォームや
Xでハッシュタグ
web小話でつぶやいてください
webはアルファベット
小話は漢字でもひらがなでも大丈夫です
それではまた雨宿りしに来てください
今回もお聞きくださりありがとうございました
雨宿りとwebの小話
お相手はケースでした
さようなら
