00:02
皆さん、こんにちは。雨宿りとWEBの小噺へようこそ。
ポッドキャスト配信者のkeethことくわはらです。
この番組は、日々降り注ぐ情報の中で少し雨宿りしながら、
様々なWEBテクノロジーの裏話や小噺をお届けする番組です。
フロントエンドフレームワークの評価
今回の話題は、State of JavaScript 2024 の結果を眺めよう 第三回〜になります。
前回はライブラリーのエクスペリエンスとセンチメント、
体験と感情についてのグラフ結果をざーっと眺めていきました。
これがちょっと多かったので、前回はそれで終わってしまったので、
本日はそれのフロントエンドフレームワークとメタフレームワークの2つに
フォーカスをしたものを見ていこうと思います。
絶賛、皆さんここが気になっているポイントだと思ってますので。
フロントエンドフレームワークとメタフレームワークのセンチメントと
エクスペリエンスは今回は割愛して、実際に中身について
いくつかのビューが分かれていますので、それを見ていこうと思います。
今回のビューは、ユースエイジ、アウェアネス、インターエスト、
リテンション、ポジティビティの5つに分かれています。
それぞれの意味を言いますと、ユースエイジは今から出す名前10個ぐらいあるんですけど、
それぞれを使ったことがあるという回答者の割合がユースエイジで、
アウェアネスというのは、それぞれのライブラリについて聞いたことがあると
回答した人のうち、ポジティブな肯定的な感情を持った人の割合になりますと。
失礼、さっきのお話がインターエストで、アウェアネスは
それぞれのライブラリを聞いたことがある、もしくは使ったことがある
という方の割合ですね。
リテンションは、それぞれのライブラリを利用したことがあると回答した人の
肯定的感情の割合になります。
ラスト、ポジティビティは、感想を述べた、コメントをした回答者のうち
好感を持った人の割合という感じですね。
これ他の今後のメタフレームワークのところでも同様になってきますので、
そんな感じと思っていただければよいかなと思います。
じゃあユースエイジから見ていきましょう。
今回のフロントエンドフレームワークの評価でピックアップされたものは
11個ですね。
名前ざっと挙げていきますと、リアクト、ビュージェース、アンギュラー、
PREACT、スベルト、アルパインジェース、リット、ソリット、クイック、ステンシル、
ユースエイジとアウェアネス
HTMXとなっております。
まずはユースエイジからですね。
使ったことあるよっていう人の割合ですけども、
回答者の82%がリアクトを使ったことがあるので第1位ですね。
もう頭1つも2つも抜けてます。
第2位がビュージェースで、いきなりガクンと下がるんですけど、
ビュージェースですら51%ですね。
第3位がアンギュラー、こちらも50%ということで、
これ去年から伸びてますね。
5%ほど数字が伸びましたと。
ビュージェースは逆に1%下がりました。
リアクトはほぼ一緒ですけど、2%下がって82%ですね。
第4位がスベルト。
スベルトはもうずっと右肩上がりで26%が使ったことあるよってことですね。
第5位がビリアクトで13%、
あとそこからもうずっと一桁でどっこいどっこいみたいな感じですね。
ソリッドとクイックもあんま伸びなかったんですね。
僕結構クイック好きなんですけど、
そんなに書いてるかというとそれはちょっと置いといてって話ですね。
業務では使わないですけど、
スピード中の人間としてはクイックはいいんじゃないかと思ったりはしました。
ソリッドとジェースも意外と伸びなかったのかな。
まあそういうことですよねって感じでした。
今のがユーセージだったんですけど、
リアクトが頭一つ二つずっと抜け続けて、
80%唯一一定のリアクトで、
これは今後も変わらないでしょうね。
ビュージェースがどれだけ伸びるかはちょっとわからないです。
この後メタフレームワークでナックストも出てくると思うんですけど、
ビューナックストとリアクトネクストだと、
この数字というかこの差はなかなか埋まらないんじゃないかなと思ってます。
アンギュラーは一番伸びたところが2018年の56%で第2位だったんですけど、
ここからちょっと下がりつつも結局50%に戻ってきてるんで、
アンギュラーもこの辺でずっと横を並び続くのかなっていう気はしますね。
そんなにこう使い勝手にドラスティックに良くなったっていうような、
もしくはすごい簡単になったっていう声を聞いたことがないですけど、
怒りも快悪になったみたいな話も全く僕の周りでは聞いたことがない。
安定したパフォーマンスとか安定したクオリティー、
品質のフレームワークを提供してくださっている。
Googleがその辺さすがだなっていうふうには思いました。
では続いてアウェアネスですね。
聞いたことある、もしくは使ったことがあるっていう感じですね。
ちょっとさっきよりも数字が変わってくるなってところですけど、
これは1位リアクトで変わらないですね。
聞いたことないっていう人は1%以下っていう感じなので、
知名度抜群ってところですね。
第2位のVue.jsも一緒で99%ですね。
あと0コマちょっとの数字の差はあると、
Vue.jsも基本的に聞いたことないよっていう人は1%以下ですよ。
アンキュラーも一緒です。
アンキュラーも99%。
この辺はやっぱり三大フレームワークさすがだなっていうところです。
続いてPリアクトも80%、
スベルトは96%。
だいぶスベルトをもう皆さん知ってるよって感じですね。
アルパイン.jsが61%に伸びてきてて、
僕の周りでアルパイン.jsなんてワードを
多分去年1年間で聞いたこと一回もなかった気がしますね。
ブログとか聞いたか全然見た気がしますが、
それ以外聞かなかったなと思います。
海外ではそこそこの名前知られてるのかなっていう感じです。
日本でも使ったことある人は全然いらっしゃるでしょうけど、
あんま勉強会とかでも聞かなかったなって気がしますね。
あとはリットが49%、ソリッド77%。
ソリッドやっぱ知名度はずいぶん取れてきてはいるんですけど、
ユーザー層を獲得できていないっていうところですね。
ポジティビティとリテンション
ちょっと特殊というか、
仮想ドムを使わない系のライブラリーの一つとして、
その場合はスベルトの方が一律の長がある。
早めに出たっていうのもあるからっていうのは理由になってるかもしれないですね。
ソリッドは少し書きましたけど、
割とリアクトと親和性というか似てるところがたくさんあったり、
コンセプトは結構参考にしたんだなっていう印象はあります。
書きっぷりそんな差が出るかちょっとわからないですけど、
リアクトほどこと細かに多機能になっているわけではないので、
正直劣化版と思われてしまう可能性はゼロではない。
後発ライブラリーなんで今後の発展性に期待はしたいですけど。
あとはスピードも速いと思うので、どうなんでしょうねって感じです。
リアクトの代替として選ぶかっていうと違うのかなって気はしますけど。
知名度とはちょっと違う話でした。
続いてクイックですけど、クイックは60%なのでちょっとまだ伸び悩みって感じです。
あとはステンシル38%、HTMX77%。
結構知名度取れてるんだなっていうところ。
ステンシルはもうほとんど名前聞かないなって感じだそうですね。
続いてインターレスト。
聞いたことある人の中で良さそうみたいなポジティブみたいな印象の数字ですけど、
インターレストの割合は1位がスペルトですね。
この3年間スペルトが実は1位で65%です。
ちょっと去年よりは3ポイント下がってますけども、まだ1位ですと。
そんなに興味あるというか。
聞いたことがあって良さそうみたいな肯定的な感情であれば、
スペルトさんもうちょっと使って皆さん上げてくださってもいいんですよ。
2位がソリッドです。
ソリッドも54%。
一番高かった時65%は2022年ですね。
なのでちょっと下がってきているっていう感じです。
去年からも2ポイント下がって54%ですので、
肯定的な感情を得られているわけではない。
つまりブランディングができてないってことだと思いますね。
続いて第3位がビュージェイスですね。
ビュージェイス48%。
ビューはもうインターレストの領域ではない気がします。
そのビュー3が出たのでそこについての評価が改めてなされていて、
第3位ってところであれば、
48%というのであんまり肯定的に捉えられてないっていう風な解釈になるので、
皆さんあんまり今のビューに関してはそんなに、
悪いとまでいかないでしょうけど、
良いというほどの印象はない。
あんまり関心がなくなってきているというふうに僕は思うんですけど、
どうなんでしょうかね。
あとやもういかずと40何パーセントがつながっていきます。
20%以下になるとステンシルが18%、
アンギラが17%で今回最下位なので、
アンギラは好感触を持たれているわけではないってことですね。
こんなとこです。
続いてリテンションです。
使ったことがある人の中で肯定的な感情の人ですけども、
これでいくとまさかのソリッド1位です。
ソリッド1位で90%です。
一度使った人の中では肯定的だよっていうところなので、
なかなか食わず嫌いじゃないですけど、
フロントエンドフレームワークの人気
あまり使われていないってところが本当ネックなんだろうなと。
なので皆さんまず使ってみてくださいっていうところの
ブランディングをいかにできるかってところがソリッドの勝負ですね。
続いて第2位はスベルトJS。
スベルトJSも86%以上キープしてます。
今年は88%、去年よりも2%伸びてますと。
スベルトはインターレスト使ったことあるの中で1位ですので、
リテンションも2位っていうところであれば、
使ったことある人もそこそこいて、
かつ肯定的だっていうのであれば、
いかに他のライブラリーのPiをこっちに持ってこれるかっていうところが勝負なので、
リアクトの画像を崩せるかというと難しいですよね。
Vue.jsもそうですよね。
この後出てくるメタフォリマークのスベルトキットの発展に期待をするというか、
感じだと思います。
続いて第3位がVue.jsですね。
Vue.jsは87%です。
これはでも僕も一緒ですね。
ちょっと僕今回回答できなかったんですけど、
僕が回答するとしたらやっぱりVue.js、
いいと思いますよっていうか使い勝手もよかったしなっていう感じです。
前回の放送でもしゃべった気はしますけど、
もしリアクトの複雑度というか、
難易度が今どうしたって上がってきている事実があるので、
それに疲れたっていうので、
リアクトじゃない選択肢で何があるってなった時に、
やっぱりVue.nextかスベルトキットっていう選択肢を、
僕多分この2択選ぶと思います。
その意味でVue.jsは僕結構嫌とかダメだから選ばないんじゃなくて、
リアクトがいるからリアクトを選んでいるっていうような選択肢ですね、僕としては。
エコシステムも充実してますし、
知見は圧倒的に多いですからね。
あとエコシステムの進化も結構皆さん追いついてきてくださっているので、
リアクトを選んできましたけど、
昨今のライブラリーとかエコシステムのカオスさであったり、
リアクトルーター周りのお話であったり、
ペンやワンやというか、
個人的にはカオスに見えてきているので、
リアクト疲れみたいな言葉もちょこちょこ聞いたりする。
そこで選択肢ビューを選ぶかなという感じはしますね。
ちょっと余談でした。
続いてリテンション第4位は、
Pリアクトが80%ですね。
使い勝手とリテンション
意外と使われてはいる。
使っている人はそんなに多くないけど、
使った人の中で満足度が80%まで伸びているというのはPリアクトいいと。
でもさっき言った通りリアクト疲れた人が、
もうちょっとライトにリアクトを使いたいというので、
Pリアクトを使うというのはありかもしれない。
その中で選ばれているんだったらそうかもねという気はします。
第5位がアルパインJSです。
アルパインJSは去年から6ポイント伸びて76%なので、
伸びているということは使ってもらっているということも
セットにくっついてきているはずなんですけど、
利用したことがある人、
さっきのグラフでいくと、
アルパインJSは聞いたことがある、
もしくは使ったことがあるという割合で、
右肩ぐんと伸びているという意味だと、
リテンションも伸びているということは、
使われている人の量が増えているというのは確実に言えるでしょう。
アルパインJSは実はダークホースというか、
ライテムを伸び続けるライブラリーの一つなのかもしれないなというふうには見えますね。
あとは段々と続いてきまして、
HTMXが今72%まで下がってきて、
去年84%だったので、
これはマイナスがかなり大きいので、
体験が良くなかったとか、
意外と使い勝手が良くないのかなとか、
僕は使ったことないんですけど、
なのかもしれないですね。
あとはRITが66%。
アンギラが去年42%だったので、
今年51%まで9ポイント伸びているので、
アンギラは何か使い勝手が変わったんですかね。
一つテコ入れしたのかもしれないですけど。
2016年とか2017年は66、67%ぐらいなので、
そこそこ高いんですよね。
ここからガクンと下がってきたのが2018年で、
ここからちょっとちょっとずつ復活しつつ、
ちょっとだけ微量ながら下がりつつ、
また上がってきているというので、
来年のアンギラがどこまで変わってくるかというのはまた面白いなと思います。
業務での使用と年収
これがもっとガンと上がるんだったりしたら、
アンギラへの乗せ替えは考えてもよいかもしれないです。
ちゃんとフレームワークとして、
いろんなものがすでに入ってますので、
他のエコシステムを探さなくてよかったりしますってね。
アンギラで完結してますみたいな話があるので、
それはそれで強いなと思いました。
ステンシルは去年とほぼ一緒ですね。
2%上がって51%です。
ラスト、ポジティビティ。
今までの回答とほぼ一緒なのと、
コメントしている人の量が他のデータよりも
ちょっと少ないので、参考値程度ですけど、
コメントされた方のうち、
交換を持った回答者の割合が、
1位スペルトで72%、
2位がビュージエースで70%、
第3位がリアクトで69%ってことですね。
トップですら72%なので、
262の法則にちょっと近い感触。
3割までいってますけども。
3割は嫌いだったりネガティブだっていうような
数字が取られるのは仕方ないなっていうところですけど。
さっき言った3つのライブラリー、
ほぼほぼ3割にとどまって、
7割ぐらいが、もしくは7割以上が
交換色だよっていう風に
思ってもらえてるのは、
これは流石だなっていうところですよね。
ライブラリーの進化と企業努力とかが
入ってんだろうと思います。
それ以外はでもですね、
のきなみ右肩下がっていて、
唯一上がっているのがアンギュラーですね。
5ポイント上がって37%。
それでも37%なんで、
そんなに交換を持っているわけではなく、
ネガティブ意見が多い。
基本的には、前回も
お話若干しましたけど、
コメントされる方ってネガティブのコメントの方が
ちょっと多かったかなと思います。
全体の数字からいくと半々ではあるんですけど、
どっちかというとちょっとネガティブ派の
意見の方が多かった。
ポジティブだって書いてますけど、
言うて、ここがちょっと何みたいな
コメントしてる方の方が多かったんで、
全体通すとネガティブだったなっていう印象です。
ここはね、難しいですね。ライブラリー作ってる人の
見通しでは。
というところで、
フロントエンドフレームワークのお話をざっと見ていきました。
Use the at work
業務で使っている割合、これはちょっと面白いので
見ていこうかなと思います。
前回投資者のうち、
業務で使っている人、1位はリアクトで
67%でした。
8300人というのはさすがだなってことです。
2位がVue.jsで31%
3位がアンギラで28%
第4位がスペルトで11%
第5位リットで
4%、第6位も
ほぼ同着で、ピーリアクトで4%
続いて、僕の大好きなQuickは
全然業務で使っていなくて
1%で127人です。
私もさっき言った通りですけど、
業務で使うかっていうとちょっと悩ましいなっていうか
これは癖があるし、好みが
はっきり分かれるライブラリーなので
これはちょっと外そう。
まあ、使わないだろうなっていう選択を
エンジニアならすると思いますね。
続いて、仕事で使っている
vs年収いくらがってみたところもありますけど
これもまあ、参考値でしかないし
あんまり差がない。
グラフ見ていただいたら皆さん分かると思いますけど
ほぼみんな一緒なので、ここもあんまり参考にならないので
割愛しますね。
経験年数も
大体一緒ですけど、経験年数
ちょっと面白い傾向が少し
あるので見ていくと
Quickからいきます。順位とかはないんですけど
Quickは経験年数
大体8年くらい使っている方が一番多いと
50%タイルが
8年間ですからね。
一応でもトップ、90%タイルでいくと
20年間使っている人で
Quick使っている人が若干いるっていうところで
面白いですね。
続いて、ソリッドも50%タイル
8年ですね。ただ
Quickよりちょっと若いかなという感触
トップ、90%タイルは
ソリッド・ジェス21歳なので
21年かということでQuickより若干
長いと。我らがリアクト
リアクトはですね、経験年数
9年が50%タイルですよと
90%タイルも大体20年
っていう感じですね。一番長いのが
リッドになるのかな
HTMXステンシルが
一番長くて
90%タイル25年間
となりますと。
長いですね。50%タイルで
多かったのは
PDACとHTMXリッドです。
PDACと11年、HTMXと
フロントエンドフレームワークの満足度
リッドは同じ数字で
12年間となります。
総合起動していくと
ざっくり9年間
くらいが50%タイルで
一応トップは
90%タイル21年間
みたいな数字になるそうですね。
一応回答した中で全体で
10%タイルでいくと3年間
くらいっていうところだそうです。
まぁ参考ですけども
まぁでもリアクト
9年、みんなフロントエンド
たくさん書いてるんだなっていうことがよくわかりますね。
リアクトも書いてるのか
フロントエンドとしてリアクトを
書いてるのか
バックエンドも全部やってフルスタックの中で
リアクトを使っているかっていろんな
人たちのスキルとか
ポジションみたいなところがあるとは思うので
聞いてみたい感はありますね。
年収よりも
僕はそっちの方が気になるんですけど海外はやはり
お金っていうのがすごく顕著に出るので
お金っていう年収のグラフも
出てますよっていうお話でした。
続いて会社の規模ですね。
この後出てくるメタフォリーマークと
一緒な気がしますけども
傾向としてはそことだいたいリンクする気がするので
割愛します。
あとはですね
他にもいろんなグラフが出てきたり
数字があるんですけど
フロントエンドのフレームワークの満足度と
辛いところっていうグラフがちょっと面白かったので
これを見ようと思いますけど
ざっくりですね。2024年フロントエンドフレームワークの
満足度は2.8なので
前回より0.1ポイント
上がってます。なのでちょっとだけ
フロントエンドフレームワークの
満足してますよ。
全体的に見るとそんなに高くはないなっていう感じです。
一番高い時は
2018年で3.3ですね。
今そこから比較すると
0.5ポイント低いんで
これはもうちょっと頑張りたいってことですけど
各フレームワーク
ライブラリーがちょっとずつ進化を
し続けていったり
重くなってきたものの身を削って
昔使えたものをデプリケートにしたり
とかしないとなかなか
いかない気がしますし、あとパフォーマンス問題ですね。
コメントで多かったのは
複雑度が高いもしくはパフォーマンスが
低いっていうコメントがかなり多かったので
結局フロントエンドと戦う限り
アプリのパフォーマンスってのは
もうセットになってきますので、ここが勝負なんだろうな
と思いました。
フロントエンドフレームワークの辛いところですけど
一番多いのは
リアクトのイシューズが
14%で522人回答してます。
エクセシブコンプレキシティなので
とにかく複雑度が
高いっていうところが
次のフレームワークの辛いところで
10%382人いらっしゃる。
第3がパフォーマンス。
さっき言った通りですね。
基本的には複雑度とパフォーマンス
あとはリアクトのイシューが多いってところで
ライブラリーでリアクトが頭一つ抜けてた
っていう話もさっきした通りなんで
その通りだなってところです。
この3つがフロントエンドフレームワークの辛いところ
っていう感じでした。
第4位がチョイスオーバーロード。
オプションズアンドチョイス
のアマウントがちょっと
オーバーフェルミングって書いてますので
選択肢多いっていうのはやっぱり人間疲れるんでしょうね。
第5位が一応
ブレーキングチェンジってのもあります。
書いてますけどフロントエンドと関係なし
全エンジニア、社会的変更は
辛いよねって話はあると思います。
第6位、ステートマネジメントが第6位
っていうのが僕はちょっと
ポジティブに受け取りました。
もっともっと上に来ると思いましたけど
状態管理はそんなに今は複雑度高くないんだ
っていうのであれば、昔と比べて
フロントエンドのビジネスロジック周り
のところの制御っていうのが
少し楽になってる風に世界は評価してるんだな
っていう風に受け取れなくもない
というので、それはいいなと思いますね。
他にもスピードオブチェンジとか
ディペンディンシーズとか
SSRみたいな辛いところ出てきてますけど
ここからちょっと数字がどんどん小さくなっていくので
そこは割愛していこうかな
というところです。
以上、フロントエンドフレームワークのお話でしたが
リアクトの課題と進化
この時点で20分以上喋ってますので
ごめんなさい。
メタフレームワークは次回に回そうと思います。
というところで
いかがだったでしょうか。他にもいろんなデータだったり
クエリビルダーを自分で決めて
グラフを見れるようになりますので
ぜひみなさんもいろいろ
変えてみて、いろんな角度から
この結果を見ていただければなと思います。
そんなところで
ぼちぼちエンディングです。
大きくそんな
去年言うと差はあったわけではないですし
顔フレームも去年とだいたい一緒だったので
フロントエンドの
複雑度とか、いろんなあんやこれや
っていうのは
引き続き落ち着いたというか
リアクトが基本的に頭一つ抜けたっていう
この状況は変わっていない。
で、ビュージェンスとか
マンギュラースベルト、エソリットとか
他のいろんなライブラリーが
誕生し始めていて
誕生して数年経ってきたんですけど
やっぱこの群雄合計の時代はリアクトが
戦闘を突っ走ってるってことは変わらなかった。
ただリアクトへの
ペインだったり課題だっていうのも
コメントは結構増えてる
印象でありますので
来年リアクトもしかしたら
出てくるのかなっていうような
ある種の期待値とかはあるかもしれないですね。
はい、そんなこんなで
リアクト使う方はまたリアクトしっかり頑張っていきたいし
進化を追っていかなきゃいけない
19も出たばっかりですのでね
ルーター問題とかもあったりしますし
追っていきたいと思いますけど
別にリアクトを使うことがフロントエンドエンジニアではないですし
あくまで選択肢の一つでしかないので
やっぱり目的としては
どういう問題解決を
どういうツールとかライブラリを使ってやるかっていうところに
つきますので
そこを念頭に置きながら
いろんなライブラリ情報収集しながら
フロントエンドの進化を
見つつ僕らもついていければなっていう感じですね
はい、以上
そんな感じで終わっていきたいと思います
この番組面白かったよという方は
ぜひチャンネル登録もお願いします
もし聞いていて気になることや
話してほしいトピック、感想などありましたら
概要欄のフォームや
Xでハッシュタグウェブ小話で
つぶやいてください
ウェブはアルファベット
ウェブのひらがなでも大丈夫です
それではまたまやどりしに来てください
今回も聞き下さりありがとうございました
まやどりとウェブの小話
お相手はキースでした
さようなら
