00:05
はい、みなさんこんにちは。keethことくわはらです。本日もやっていきましょう。 keethのエンジニア雑談チャンネルです。この番組では、ウェブ業界に関することやエンジニアリング、いろんな技術についての雑談などの情報を発信していきたいと思います。
本日ですけども、タイトにあります通り、Riotっていうライブラリーですね。読み取るとRiot.jsですね。およびその他同様のフレームワークとかライブラリーの数字ですね。
またノートにまとめましたので、その記事に、アドベントカレンダーの記事の一方に上げたので、その数字を見ながらちょっとダラダラと喋っていこうかなと思っております。では、ちょっと記事を開いて早速見てみましょう。
既に記事はノートに書いたやつを、keethのアドベントカレンダーにすでに登録しているので、見られた方も全然見ているかもしれないですけど、見てない方向けにちょっとダラッと喋っていきたいと思います。
まず順番にいきたいと思いますけど、今年のRiotはですね、バージョン8がスキップになりまして、メジャーバージョンが9になりました。9が今年の7月にリリースされまして、ゲーム成功からスタートみたいなところはあるんですけど、毎回のメジャーバージョンのアップロードの恒例といいますか、メジャーバージョンアップした後にすぐにマイナーバージョンアップでバグ修正がリリースされるっていう流れがですね、Riotによくあるんですけど、これが今回もまた行われましたよという感じですね。
この流れ、いい加減やめたいんですけどね。テストとかリリース前のチェックとかっていうのをもうちょっと強化したいなっていうのを本当に思ったりはするんですよね。まあまあさておき。
まあそもそもRiot.jsでそんなに使われてないというか、もう名前すら知らないみたいな方は結構増えたんですけど、今年のRiot.jsはちなみにダウンロード数ですね。
まあ1年間といっても現時点で2023年1月1日から2023年11月30日ですね。昨日までの11ヶ月の数字を見ますとダウンロード数は185,887というところで、まあちょっと下がってきているっていうのはもうしょうがないなっていうのはあります。
去年も262,815なのでちょっと減らす形になってしまいましたし、他のJSのライブラリとかフレームワークの発展とか進展もあって、そちらのインパクトも正直大きかったとは思いますね。
昨今JSフレームワーク、いろんなのがどんどんどんどん買い始めましてですね。旧3代JSフレームワークと現代の3代JSフレームワークという議論もあったんですけど、もうそんな世界じゃなくなって、もう今何台フレームワークなんだみたいな感じの完全にこう群遊滑挙な時代になっててですね。
特にスベルトとかソリッドJSとか、あとアストロ、リミックス、クイックみたいなものですね。この辺が結構台頭してきたなっていうのは正直あります。名前も結構見るようになったし、そんな記事もあったりとか、いろんな勉強会での登壇のテーマがそういうものだったりするので、いろんなものが本当に伸びてきてて、もう今はみんなが好きなものをどんどん使っていくっていう感じなんでしょうね。
デファクトとしてはこれみたいなのも一応あるんですけど、実際でも使うところはみなさんの好きな書き方とか思想だったりとかに合わせたものを使っていくっていうような流れに今後なっていくんだろうなっていうのもちょっと見てて思っていたしました。
03:03
というところで、他のライブラリとかフレームワークのダウンロード数ちょっと見てみましょうと。比較していきますが、ピックアップしたものは僕の独断と偏見ですけど、リアクト、Vue.js、Angular、正確に言うとAngular Coreですね。これは必ずライブラリとしてダウンロードするから、Angular Coreとしています。
で、あとSvelte、AngularJSとRemix。Remixも何を数字の対象にするかちょっと悩んだんですけど、たぶんRemixRANのスラッシュノードってやつですね。これになるんだと、すみません、僕はRemixをちゃんと書いてないのでわからないんですけど、なると思っているので、こいつを今回の対象のライブラリとしました。
で、あとはAstro、SolidJS、Quickですね。正式にはBuilder.ioスラッシュ、Quick。僕が今実は一番押しているJSフレームワークはQuickです。僕は速度中なので、速いに越したことはないと。人間の時間を奪うのはちょっとよろしくないっちゃならしくないんですけど、その辺はたぶん開発体験というところから今後も改善されていくということを期待して、僕はQuickを今押しますね。とにかく速いは正義と思っていますと。
で、それらのダウンロード数を比較してみて、実際に数字を取ってきて、上位から順番に数字を並べてきました。皆さん予想はどうだと思いますけど、やっぱりリアクトですね。リアクトがもうダントツ中のダントツでシェア1位を取り続けています。これは去年も変わらなかったですね。リアクトのダウンロード数、今年11ヶ月の中で9億5407万3951というので、9億ダウンロードされています、リアクト。すごいですね。
エンジニア人口は全世界にとってもそんな多くはないはずなんですけど、いろんなプロジェクトでリアクトが何度も何度も使われ続けているということですね。もしくはリアクトのバージョンアップに応じて、また改めてNPMインストールとかダウンロードというのが行われたというのもあって、この数字になったんだろうなというのはちょっと予想されます。
ただ、NPMのサイトあるじゃないですか。公式サイトからブラウザーからアクセスをしてページを開くと、そこでも結局同じAPIを叩くことになるらしくダウンロードを叩いているっぽいので、正確には使われている数というよりも閲覧数も含めてこれだというのはちょっと検討に行った方がいいと思いますけど、とはいえこれだけ注目されていて実際これだけダウンロードされているという実績だけは動かないので、やっぱりリアクトがすごい強いなと思いました。9億ですね。
じゃあ続いて第2位はもちろんこちらもまだまだ健在です。ビュージェイスですね。ビュージェイスのダウンロード数聞くとびっくりしますけど、1億8476万8306ということで、ざっくりリアクトとビューでは5倍の差があるという感じです。
ビュー3も今年もちろん出ましたので、結構数字がガンと伸びたんですよね。NPMトレンズというサイトがあって、そこを見ていくとビュージェイス、ビュー3とかナクスト3が出た時に一気にダウンロード数がビューってガーンと伸びたんですよ。びっくりするくらいグラフが跳ね上がってて、まあそれはさすがにそうだよねと思ったんですけど、結局総合的なダウンロード数でいくとリアクトにずっと負け続けていくというか、ほぼデファクトはリアクトだと思ってます僕も。
困ったらリアクト使っておけば問題はないと言いますか、まあやりたいこと絶対できるよねっていうのはあるし、だいたい担保できるなっていうのはすごく思いましたし、リアクト自体のメンテナンスもずっとされ続けていて、今もどんどん進化のスピードも速いので、困ることはまずないと思いますが、枯れるかっていうと枯れるのは当分詐欺にはなる気がするので、その辺のトレードオフと加味して使うかどうかというのを決めていただければと思いますが、リアクトがやっぱり頭1つ2つじゃなくて5つ受けてましたっていうのが現状です。
06:29
で、現代の3大フレームワークのもう1つ、アンギュラーですね。
はい、で、アンギュラーの方は1億5334万8735というダウンロード数でした。
こちらもやっぱり根強いですね。さすがGoogle禁制のフレームワークというところもあったり、JSのフレームワークとしてちゃんとフレームワークって言えるのはやっぱりアンギュラーだよなっていうのはあったりします。
もちろん他のさっきのリアクトビューにもそのラッパーフレームワークがあって、まあネクストナクストとかってそういう辺のものがフレームワークとしてはちゃんとあるんですけども、それはあと後ほどで数字比較します。
ますけど、一応JSのフレームワークとしてちゃんとフレームワークだなと僕が個人的に考えているのはアンギュラーだけだなと思っていて、今のところは。
で、これが1億5000万というところで、なんだかんだワンパッケージでコーンと1つにまとまっているっていうのはすごくありがたいんだろうし、
わざわざエコシステムを自分で検索したりああだこうだじゃなくて、公式ドキュメントから見ていって、ドキュメントもしっかりあるので使い方も分かりやすいし信用性も高いというところでアンギュラーを使うっていうのが1つ分かりやすくていいなと思いました。
テストもそうですし、タイプスクリプトも最初からマストで入ってくれるんですよね。開発環境まですべて含めて。
っていうのはやっぱ大きいですよね。最初から考えることはほぼほぼなくて、用意どんどんスタートが早いっていうのは本当にいいと思います。
ただまあ、書き方とか開発体験がいいかっていうと、まあここは好み分かれますが、僕はちょっと分かりづらくなっちゃったなと思ったりしました。
アンギュラーJSの方と比較すると、どっちも書き方がいいかって言うとちょっと怪しかったですけど、ただまあ、分かりやすさでいくと僕はアンギュラーJSの方が分かりやすかったかなと思います。
まあDOMにまだまだ期待ができるし、DOMの拡張はできるでしょみたいなところの思想が分かりやすかったっちゃ分かりやすかった。
ただまあ、DOMとロジックの依存度を高めていくと結果的にコードはぐちゃぐちゃになるので、大変なプロジェクトがたくさんあったし、僕も1案件か2案件アンギュラーJSで書いて、
これはちゃんといろんな物事を決めていかないと、開発者自体が表現力高くてやれることはたくさんあるのはいいんですけど、ルールを決めないと一気にカオスだなっていうのが分かりやすい例だったと思いますね。
まあさておき、その辺を改善して新しく生まれたアンギュラーが今のところ第3位でまだまだ数字は取っているという感じでした。
はい、で続いて第4位ですね。第4位はやっぱり昨今から話題ですね。もう数年前から話題だった仮想DOMから離れようという思想ですね。
結局仮想DOMがあると、仮想DOMの計算処理だったり、あとはDOMへの反映だったりとか、ハイドレーションもありですね。
ところがどうしたって重いよねってなるので、特にリアクトもそうですけどハイドレーションっていうのがパフォーマンスの最大の課題だっていうところはあると思っていて。
そこへの改善としてそもそも仮想DOMから脱却しようという思想のまま作られているのがSvelteですね。
09:00
なのでSvelteはゲームセット、JSフレームワークというよりもコンパイラーというふうな表現をされたこともあります。
こちらのダウンロード数ですけど、今年11ヶ月で3,901万7,632だと。
思ったより僕数字高いと思ったんですけど、ただ去年もと年だったかな?のState of JSですね。
JavaScriptの全世界のサーベイがありまして、今年も絶賛行われますし、今僕もサーベイ途中まで書いていますとおっしゃるんですけど、数が多いんですよJSのサーベイって。
それの2022年と2021年もそうだった気がしますけど、伸び率の第1位は確かSvelteだったし、興味関心の1位もSvelteだった気がしますが、
去年はSvelteじゃなくてソリッドJSですね。
どっちにしろ仮想DOMからの脱却をしたフレームワークというのが昨今の話題になっていて、
その先駆けだったSvelteがドーンと第4位で来ているのはすごくいい話だと思いましたね。
で、これが3,910,000で。ただまあその3台フレームワークから桁1つやっぱり下がってしまうし、
ここは本当に大きい壁だなとは思いますけど、まあ時間の問題でSvelteは多分3台フレームワークの数字を食うと思いますけどねっていうのは思ったりします。
Svelteの実際書き方もわかりやすいし書きやすいですし、まあ早い正義ってさっきも言った通りなんですけど、
僕も早いのは嬉しいと思ってて、これがいいなと思ったりしますね。
で、もちろん後ほど喋りますけど、ラッパーフレームワークが生まれて、よりエコシステムとの親和性だったりとか導入のしやすさっていうのもどんどん拡張されていったので、
Svelteは本当にもっともっと今後来るなっていう感覚はあります。
で、第5位ですね。第5位はなんだかんだ根強いアンゲラですね。アンゲラJSだと思います。
これが2,352万というので、これは既存のアプリケーションとかウェブサイトで使われていて、それがまだまだメンテナンスされているというふうに見て僕は言います。
じゃなければ特にアンゲラJSをこのご時世使う理由があんまないなと思ってます。
アンゲラJSは使わないと思いますけど、結果的にまだメンテナンスされていて、これだけバージョンアップも止まっているはずなんですけど、ダウンロードされているというのはすごい話だと思ったりしますね。
はい、では続いて第6位はLimixですね。Limixが8,410,000ダウンロード数ですね。
というので、ここからまたダウンロード数ちょっと頭一つ下がっていくっていう感じです。
ここから先は大体そんな感じですね。進行フレームワークなのでやっぱり数字はそんなに伸びないなというところですけど、どれだけダウンロードされたかという比較で。
続いてAstroですね。Astroも結構話題ですね。リアクトとかViewで作られたコンポーネントをAstroで実は一色他にキメラのように使うことができるという革新的なフレームワークでしたね。
ほんまかよと思いましたけど。でも実際使えるっちゃ本当に使えるんですよ。他のJSフレームワークで作った資源をAstroの中で混合して使えるみたいな話でびっくりですね。
中のコード多分闇というか黒魔術なコードになっているんじゃないかという気はしますけど、とはいえ結局JSXに最終的に一回は変換するんですよね。
View.jsも最終的にJSに変換する前に一回JSXに変換をしてるんですよ。という意味ではJSXという一つの共通言語に落とし込めるっていうのが多分根源だと思うんですけど。
で、Astroが516万ですと。これも結構伸びてきましたね。
12:03
で、続いて先ほどの名前で見ましたSolidJSが492万ダウンロード。で、最後Quickですね。Quickはさらに頭一つ下げて524,397というところで、まあまあ今からかなと思いつつも結構数字のグラフを見ますと横ばいになってきたので、Quickはそんな馬鹿すぎも伸びることは意外ともうないのかなという感じですね。
ただ速いだけが正義ですけど速いだけで選ぶかっていうとそんなことはもちろんないよねっていう当たり前の結果になったと思います。
はい、続いてラッパーフレームワークですね。先ほど見ましたラッパーフレームワークを見ていきたいと思いますが、今回また独断と偏見でどこまで選ぶかちょっと悩んだんですけど、NextJSとNextJS。
あとS-BeltKITとあとSolidSTARTですね。この4つを一応ラッパーフレームワークとして今回ピックアップしましたと。
先ほどのAngularもまあフルスタックのフレームワークみたいな言い方はできるんでここも含めてもいいっちゃいいんですけど、名刺的にちょっと外してみました。
で、ダウンロード数の比較ですけど、まあ1位はやはり皆さん想像通りNextJSですね。
はい、まあNextのダウンロードがあるからリアクトの数字も付随して伸びたっていうのは絶対あると思いますけど、NextJSのダウンロード数は2億797万2511という感じです。
はい、実はリアクトよりNextの方がダウンロード数は多くない?嘘です。リアクトが9億だからリアクトの方が多いです。
はい、で、Nextが2億ダウンロードいってると。
で、じゃあ第2位のNextJSなんですけど、Nextはというと2490万というところで実に10倍の差が離れてしまったって感じですね。
Next3も今回今年出て結構数字伸びたんですけどとはいえ、結局Nextが10倍の差をつけていてダウンロードされているっていうので、
まあほぼほぼもういわゆるJavaScriptのフレームワーク戦争ってのはもうリアクトNextで多分借地したと僕も言っていいと思いますね。
その中ででもやっぱり進行のフレームワークの良さとか書き方とかこういう表現ができるってところを選ぶっていうのが今後の皆さんの選択肢だと思いますけど、
困ったらNextなんだろうなっていうのはちょっと思ったりはしました。
で、まあNext2490万ですけどこれは多分もうこのままグラフ見てもそんな見え方上がってない横倍になるので、
ここももうほぼほぼそのままなんだろうなと思いました。
で、続いて第3位ですね。進行のSvelteJSですけど、SvelteKitが964万っていうところですね。
ここもまあ先ほどの同数字とほぼほぼ同時ですね。
まあここも伸びていくと思いますし、時間の問題でNextの数字多分上塗りすると思うんですよね、Svelteが。
はい、いやほんと書きやすいし、仮想ドームから脱却の速さとTS乗せなさいとかっていうのがやっぱりSvelteが担保してくれるのでそこは大きいよなと思いますね。
で、ラスト。SolidJSのラッパーSolidStartって言われるものですね。
一応これが多分公式だったはずですけど、
こっちが319781なので、まあまあまだまだ今からだなっていうところはありますね。
まあでもSvelteとSolidがやっぱりPiの食い合いをしているので、そうなるとやっぱりSvelteの方でずっとまだまだ数字は伸びていくとは思います。
はい、ただ伸び率みたいな話をちょっとしてみたいと思いますけど、
NextJSの伸び率はでもやっぱりこの中でも結構すごくて。
今言いました2億ダウンロードされてるんですけど、昨年のダウンロード数が1億4千万とかなんですよね。
15:03
なので、ざっくりしてますけどプラス6千万以上伸びてて、伸び率でいくと41%増というところで、
Nextほんとガーンと伸びてきましたねっていうのがあります。
去年も1位だったんですけど今年もダントツの1位ですね。
で、第2のNextです。
NextJSのダウンロード数は去年と比較すると270万ちょいぐらいのプラスなんですよね。
なので、まあパーセントにすると12%増なんで、
まあ今意外と伸びてるっちゃ伸びてるんですけど、
まあ横ばいだなっていう感じはグラフ的には見えてきたところですね。
で、続いてSvelteJSですね。これはすごい伸びました。
去年と比較して560万ちょいのダウンロードなんで、
数字とするとそれはもちろんNextには全く勝てないんですけど、
比率でいくとですね、約139%伸びてるんですよね。
Svelteめっちゃ伸び上がってんじゃんってすごく思いました。
まあそれは2、3年前からのグラフで、State of JSのサーベイでも出てる通りだと思います。
で、ラストSolidStartですね。
こちらが一番実は伸び率としては一番高くて、
数字でいくと26万ちょいしか伸びてないように見えるんですけど、
パーセントにすると503%増ということで、
Solidは去年から5倍伸びていったので、
結構注目関心が世界でも広がってきてるんだなってすごく思いましたね。
書き方が結構リアクトの、リアクトフックスですね。
ユーズなんちらみたいな書き方と結構似た書き方なんですよ、Solidって。
そこの親和性とかなんか既視感があるなっていうので、
書き方がわかりやすくていいなと思いましたし、
速いっちゃほんと速いんですよ、Solid。
Svelteも速いんですけどSolidもだいぶ速くてですね、
選択肢として大いにあり得るなっていうか。
リアクトの書き方をちょっとインターフェースとかAPIの書き方を書き換えたら、
同じようなことがSolidでもできるというので、
こっちを選ばれるっていうのは少しあるかなと思いました。
とはいえ、速いだけで選ぶかっていうのはさっきと言った通りなので、
じゃあリアクトで選ぶわっていう話は全然あるかもとは思ってますし、
なんでリアクトの仮想ドムとかハイドレーションのパフォーマンスと、
Solid Liteに速く書けるってどっちを選ぶかっていう選択肢になるのかなっていうのが僕の感覚です。
そんなとこですね。
あとはですね、今回の浅かつ本来Riot.jsの話なので、
もう一回Riotの話に戻りますと、
あとバンドルサイズですね。
ライブラリーのバンドルサイズの話をちょっとしたいなと思ってて、
最終的にはJSとかに変換して静的ファイルに変換してウェブにアップするんですけど、
結局バンドルサイズがでかいとそれだけスマホとかでもダウンロードする量が増えてきて、
ギガが減るみたいな話もあるしパフォーマンスの話は出てくると思います。
初期レンダリングっていう話ですけどね。
バンドルサイズもちょっと比較したいと思ったんですけど、
Riotのバンドルサイズですね。
ミニファイしたプラスGZIPですね。
圧縮したところでだいたい5.8KBまで下がるというので結構サイズが小さくなりましたね。
ただ、リアクトのこの記事書いた時点で18.2が確か最新だったはずなんですけど、
リアクトのミニファイとGZIPしたバンドルサイズが2.5KBっていうところで、
リアクトかなりバンドルサイズ小さくなりましたね。
びっくりしました。
あんだけのAPIとか機能がたくさん含まれた中で2.5KBで下がったっていうのは、
いろんなものをしっかり見直しをしたとか、機能拡張をした上でちゃんとリファクタリングも進めて、
この数字になったっていうのはさすがの一言ですね。
こんなん見させられたら、そりゃやっぱりリアクトを使うはみだと思いますよね。
18:00
いや、Riotよりも機能多くて、サイズはRiotより半分っていうのはちょっと僕はもう衝撃だったんで、
まぁそりゃRiot使われねえなと思ったりはしましたけど。
とはいえ、なんかRiotにJSを今から始めましたとか、JSのフレームワーク初めてなんか触ってみたいっていうところで、
Riotを使っていただくのは僕は全然いいと思いますし、
ずっと言い続けてますけど、組み台にしてもらっていいと思ってます。
JSのフレームワークでこういう風な書き方をするのかなっていう、
なんか触り程度とか感覚を覚えてもらって、
実際ちゃんと本格的に作りたいってなった時にRiotとかに飛んでもらえばいいんじゃないかなと思ったりします。
Riotって最近そうなんですけど、いろんな機能拡張がどんどん増えてて、表現力も増えたし、
責任範囲とかの分離がすごくできやすくなったので、
素晴らしい反面入門向けではないなってすくずく思いました。
学習曲線だいぶ上がったんじゃないかなと思ってて、
どんな思想に乗っかれるかっていうところがすごく重要なんですけど、
やっぱりアソシエイトエンジニアとしてこのハードルは高いかなっていう気はしてますね。
なので、一旦もっとライトなものから触っていただいて、
組み台にしてもらうっていう意味でRiotを使っていただけると僕は嬉しいかなと思ったらこうしてます。
単純にRiot、ダイス教授さんの発言で終わりますけど、
こんなところで数字の今日は比較してみましたけど、参考になれば幸いです。
今年のState of JS2023のサーベイが始まってますので、
これが多分来年には集計結果が出ると思うので、
その辺をまた見て、加味していただき、
今のJS界はどうなっているのかっていうのを見ていただくといいんじゃないかなと思いますし、
それが出たらまた朝活で改めて話したり、
ノートにまとめてみたいと思いますので、ちょっとお待ちいただければなと思います。
じゃあ終了したいと思います。お疲れ様でした。
