🔥

Reactはなぜそんなに人気なのか?翳りは訪れるのか?

2024/03/02に公開
21

導入

現在、ReactをはじめとするVueやSvelteなど多様なWebフロントエンドフレームワークが存在しますが、Reactが特に人気を博している理由について、単純な好奇心から自分なりに考察してみることにしました。

Reactの人気

Reactの人気の理由について考察するにあたり、まず、他のフレームワークと比較してReactが実際に人気があるのかを調査しました。

State of JS

毎年、世界中のWebエンジニアを対象にJavaScriptの最新トレンドや状況を把握するために実施されている利用率アンケートの結果がこちらです。回答数は3万人を超え、2022年の調査結果によると、Reactが8年連続で1位を獲得しています。

JavaScript Rising Stars

GitHubのスター数を利用して、その年のJavaScriptエコシステムのトレンドを概観することができます。こちらは2023年の結果です。

やはり、こちらのランキングでもReactが1位のようです。

State of JSのように過去のランキングがわからないので、そちらもみていきましょう。2019年から2022年までのTop5のランキングを掲載しました。

2019年と2020年では、Vueが1位に輝き、Reactは2位に位置していました。なお、2016年から2018年までのデータも確認しましたが、これらの年においても1位と2位のフレームワークは2019年、2020年と同様の順位でした。

しかし、最近の傾向を見ると、Reactが1位に浮上し、Vueを抑える形でトップの位置を確立しています。

Zenn

全世界のトレンドを調査した後、日本国内の動向も把握するためにZennでの記事数を比較することにしました。

React、Angular、Vue、Svelteの各トピックについて検索を行ったところ、Articles、Books、Scrapsのすべてのカテゴリにおいて、Reactが最も多くの投稿数を記録していました(2024年2月24日時点)。

React Angular Vue Svelte
Articles 5581 369 1413 229
Books 110 11 30 12
Scraps 937 25 180 103

Qiita

Zennに加え、もう一つのテック系ブログであるQiitaでの記事数も調査しました。

React、Angular、Vue、Svelteをそれぞれ検索したところ、こちらでもZennと同様に、Reactが最も多くの投稿数を記録していることが確認されました(2024年2月24日時点)。

React Angular Vue Svelte
Articles 30384 7537 21402 809

これまでの調査から、国内外を問わずReactが非常に人気があることが明らかになりました。また、Vue、Svelte、Angularといったフレームワークも、Reactには及ばないものの、それぞれが一定の人気を保持していることがわかります。特に、VueはJavaScript Rising Starsの結果で2019年まで1位を獲得しており、Reactの人気を考察する際には重要な比較対象となります。

では、なぜReactは人気なのか?

Reactがなぜ人気になったかを、Angular、Vue、Svelteといった現在主要なWebフロントエンドフレームワークとなっているものとの比較を行いながら考察をしていきます。

フレームワークの人気は、新しいフレームワークが市場に登場した時や、既存のフレームワークが大規模なアップデートを行った時に変動することが多いです。このような変化の瞬間に焦点を当て、どのような要因が人気を左右するのかを分析します。

AngularJSは、2009年にリリースされたSPA開発の先駆けの一つです。このフレームワークは2016年に「Angular」として大幅なアップデートを受け、その変更はAngularJSからの大きな転換を意味しました。

私自身はAngularJSやAngularを直接使用した経験はありませんが、ブログや旧Twitterの投稿を通じて、このアップデートによって多くのユーザーがプラットフォームを離れたことが伺えます。多くの投稿では、AngularはAngularJSとは「別物」と表現されています。

この変化により、AngularJSから離れたユーザーの一部が、より新しいフレームワークであるReactやVueに移行した可能性が高いと考えられます。State of JSのデータ(2016年以降のもの)を見ると、Reactがトップの位置にあり、Vueも4位にランキングされており、これらのフレームワークの勢いが伺えます。それにもかかわらず、Angularも依然として強い地位を保持しており、2位にランクインしています。これは、Angularが持つ先駆者としての強みと、離脱しなかったユーザー層がいることを示しています。

また、SvelteはAngularの大規模アップデートがあった同年にリリースされました。Svelteは仮想DOMを使用しないことで注目を集め、2019年にState of JSで突如ランクインしました。しかし、その時点では、React、Vue、Angularが築き上げた強固なエコシステムには及ばない状況でした。

2019年、ReactはHooksの導入によりさらに人気を加速させました。学習コストの高さが課題とされていたReactですが、Hooksによってコードの記述が簡潔になり、Reactの学習ハードルが下がったと考えられます。

VueはVue2からVue3へと進化し、Composition APIの導入により、よりJavaScriptに近い開発体験を提供するようになりました。この変化は、Vueの開発方法における大きな転換点となりました。そして、2023年にVue2は公式にEoL(End of Life)を迎えました。この変遷期に、Vue2を使用していた開発者の中には、Vue3への移行ではなく、より人気のあるReactへの乗り換えを選択した人も多いと考えられます。実際に、私自身もVueやNuxt.jsを使用していましたが、これを機にReactおよびNext.jsへと移行しました。

Reactの人気に翳りは訪れるのか?

現時点でReactの人気に翳りが訪れることは考えにくいと思います。その主な理由は、プログラミング言語やフレームワークの価値が、それ自体に限定されるのではなく、周囲のエコシステム全体によってもたらされるからです。

ReactにはこれをベースとしたNext.js、Gatsby.js、Remixなど、強力なフレームワークが存在します。さらに、豊富なライブラリが利用可能であり、ZennやQiitaでの記事数も、Reactが断トツで1位を誇っています。

このような状況は、Webフレームワークを新しく学び始める人々にとっても、既に学習中のユーザーにとっても、大きな魅力となっています。これが原因で、Reactのユーザーベースはさらに拡大し、そのコミュニティやエコシステムはより堅固なものになるでしょう。

Reactの人気に翳りが訪れる時はいつか?

Reactのエコシステムを捨ててまで乗り換える価値があるWebフレームワークが出現した場合、それがReactの人気に翳りが訪れる時だと考えられます。

技術が一定の水準に達すると、「さらに優れたものを求める必要が本当にあるのか?」という疑問が自然と浮かんできます。この感覚は最近特に強く感じています。大規模な開発プロジェクトについては言及できませんが、私が行うような小規模な開発では、Reactを超えるほど優れ、コードが短く済むフレームワークが存在することは確かです。しかし、新しい技術を学ぶために必要なコストを考慮すると、Reactの優秀さで十分満足しています。さらに、既に述べたように、充実したライブラリやフレームワーク、豊富な学習資料を捨て、それらの少ない新技術に投資する価値があるのか、という問題があります。新しい技術を試したいという好奇心は存在しますが、それが一時的なトレンドに留まり、結局はブームが去ってしまうケースが多いです。

まとめ

この記事を書くことで、私自身も多くを知見を得ることができました。私の考察は完全ではないかもしれませんが、これらはあくまで私個人の見解です。もしこの記事を読んで、異なる意見や新たな視点があれば、ぜひ共有していただけると嬉しいです。私自身、Webフレームワークに関しては全てを網羅しているわけではないので、様々な意見を伺うことでさらなる知見を得れたらと思います。

参考サイト

https://2022.stateofjs.com/ja-JP/libraries/front-end-frameworks/

https://risingstars.js.org/2023/en#section-framework

Discussion

vincent.maverickvincent.maverick

具体的な考察がひとつもなされていないね。
他のフレームワーク群をまとめつつ統計的な数値で追っただけ。

考察とは「なぜ、その数値が叩き出せるのか?」を追うことではなかろうかと。
少なくとも各フレームワークのコア技術のひと握りでも(記事内容的に)つまんでおくべきでは?

と、僕は React 1択派ですね。
他のフレームワークを使う理由を見い出せない。
既存プロジェクトに依存するだけだと。

エンジニアの主義主張と乖離した部分での決定。
それを顧客第一主義と呼ぶw

そんな感じで♪

vincent.maverickvincent.maverick

ちょと辛辣過ぎたかも知れない。。時間を掛けて統計取ったのなら立派な考察だよね。
申し訳なし。。

ただ、技術的な人気というのは某何ちゃら商法的な握手会なんぞ開かんでも人気を保てる訳で。
その根幹は、と言えば、やはり「技術の提供力」一点な訳で。
React はネイティブ JavaScript に近い実装でそれでも React らしさ的なものを打ち出せているから強いのだと考えていますね。*Vue コレクティブだとかね? あれ、 Vue でしか使えないじゃない

詰まるところ「AltJS の雄」といったところですね、React は。

Ken OkabeKen Okabe

いい機会なので是非伺いたいのだけど、

他のフレームワークを使う理由を見い出せない。

どこからどう見ても、あくまでReactと比較してというカッコ付きにはなるのだけど、設計のシンプルさ、性能、学習コスト、もろもろ含めてSolidJSのほうが優れているのだけど、Reactをそこまで持ち上げる理由は?

比較検討したことすらないのであれば「 React 1択派」という前提の説得力もなくなるのだが、したことがあるという前提で伺う。

vincent.maverickvincent.maverick

SolidJSはリアルDOMを扱う、と。
や、不勉強ながらSolidJSは初めて聞いたw

リアルDOMを扱うならjQueryで良いと感じるかな
ん〜、React を jQuery に寄せているだけのように感じるのは僕だけかしら、、
リアルDOM を扱うならバニラが一番高速で学習コストも安いと思いますね。

現フロントエンド事情を鑑みての1択とも言えますね。
ちなみに、class component 時分は見向きもしなかったですね。
最近になってバニラ JavaScript で class に対応したとか言ってますが、
多言語と比較するまでもなく JavaScript で class 概念は難しいと考えていますね。

余り解答になっていないかもですが!

vincent.maverickvincent.maverick

比較検討もしたことすらないのであれば「 React 1択派」という前提の説得力もなくなるのだが

リアルDOM を扱う、という案件でなければ比較の壇上に上がらないと考えますね。

また、僕の主張は説得力を必要としていない。
要するに、「React 人気に乗っかっているひとりですよー」というだけのことですね。
ま、流行り廃りでのっかている訳ではありませんが。

だって、もっとめんどくさい話連ねないと説得できないとすれば、こちらの記事の主旨から乖離しちゃうでしょう?

本文に SolidJS なんて1ミリも出てきてないじゃない。
そちらを推すなら React の話なんぞしないで良いと思いますよ。

Ken OkabeKen Okabe

いや、そもそも、Reactというのは、かつて一斉を風靡していたjQueryから宣言型UIというパラダイムチェンジをしたわけであって、SolidJSはその宣言型UIのパラダイムにあって、仮想DOMからリアルDOMというのは、この記事にも頻出しているSvelteの系譜であってjQueryに寄せるように時間を巻きもどしたわけでもないし、ましてやバニラと比較するものでもないですね。

JavaScriptがClass対応なんて最近の話ではなく、ES2015なのでおおよそ10年前の話です。そしてそのタイミングと同時にReactはひっぱられてクラスコンポーネントをデフォルトにしたが失敗して関数コンポーネントデフォ(React Hooks)にしたのが2019年なので5年前、SolidJSは関数コンポーネントです。

10年くらい時間が止まっておられて、SolidJSも何も知らない人たちがフレームワーク比較をしていることがわかりましたが、自分はそういう世界にどういう発信をすべきなのか考えさせられました。

Ken OkabeKen Okabe

本文に SolidJS なんて1ミリも出てきてないじゃない。

出てきているし、その上で中途半端な引用なので論拠としては弱い。

State of JS

2022年の調査結果によると、Reactが8年連続で1位を獲得しています。

とあるが、これはこの記事が目指すそのまさに「説得」の目的ありきの「統計データの恣意的な切り取り」であって、

Usage部門だけを切り取っている。
(利用中)
Retention部門だけを切り取ると、
(また使いたい)

Reactは年々「リピート欲」の評価が下がり続けており、SolidJSの評価は一貫して最高レベルにあることがわかる。

もちろんUsage率というのは重要な指標なのだが、今どき既存ではないのならば、誰が新規プロジェクトでAngular(2位)を好んで使うのか?という視点も重要になってくる。(RetentionではEmberの次でAngularはワースト2位)

Usageランキングだけを見ると、Angularは「人気に翳りがない」ということになるが、Retentionを見ても、その他諸々で知る人ぞ知るように、Angurarは「人気に陰りがある」。
全く同じ理由で、Reactは「人気に陰りがある」。

Ken OkabeKen Okabe

リアルDOM を扱う、という案件でなければ比較の壇上に上がらないと考えますね。

フレームワーク比較という議論で、「コンパイルした結果」リアルDOMになるだけなのに、顧客がコンパイル型じゃなくて仮想DOMという仕掛けにこだわる案件とか現実にありうるんですかね?w

vincent.maverickvincent.maverick

フレームワークなり何なり、リザルトありきの選定ですよ。
僕の言っていることと本文記事内容とが合致しないのでこれでやめますが、
「物作りの根幹」を忘れないで欲しい、という願いがあるだけです。
技術選定なりはその手段に過ぎないのですから。

Ken OkabeKen Okabe

本論と関係ないどうでもいいことだけども、
https://marketplace.visualstudio.com/items?itemName=KenOkabe.markdownnote
は、当然SolidJSを採用した。

いまどき、宣言型UIを使う、は正解なのだけど、そこから

  • 仮想DOM 古い
  • リアルDOM Svelte以降で新しい

という二択があるのだけど古いパフォーマンスで劣る前者を使うのが

リアルDOM を扱う、という案件でなければ比較の壇上に上がらないと考えますね。

リザルトありきの選定

とどうつながるのかわからない。
単にシェアだけがそんなに大事なら、非宣言型でクラス使ってMVCとかやってるオブジェクト指向のAngularでもいいわけでしょ?
でも貴方は「JavaScript で class 概念は難しい」とか言ってる。

「物作りの根幹」を忘れないで欲しい、という願いがあるだけです。
技術選定なりはその手段に過ぎないのですから。

自分の言及でその「物作りの根幹」とやらを失念している要素なんてありましたっけ??

vincent.maverickvincent.maverick

ん、折れておきますね。お互いに面倒な人間のようだw

僕はいわゆる「ネット老害」部類に類する年齢なもので、これ以上続けるのは見苦しいですね。

僕は回顧録を述べたい訳でもなく、ましてや10年前に時間が止まっていたら現役でやっているはずもなく、ただただ、感想を述べただけなんですけどね。

で、僕は君の疑問にいちいち回答するほど寛容でもないので答えませんが、
これでも若者を支援しているつもりなのですよ。

僕も若い頃は大人を舐めてましたからw
「そんなの時代遅れですよ! 何十年前の話してるんですか!?」

あなたの周りで幸多からんことを。

Ken OkabeKen Okabe

自分は一般に面倒と認知されるタイプの人間ではあるが、若かろうが年寄りだろうが年齢については公正公平に差別なく扱う。

また技術面でこういう「説得」目的ありきの「統計データの恣意的な切り取り」はもちろん不公正であり、少なくとも

こういう少なくとも7年間はコミュニティで新興ライブラリで極めて評価が高いものを「不勉強ながらSolidJSは初めて聞いたw」とか、老害とかそういうレベルの話ではなく、まあ7年は時間が止まっていて現役でもないのだろうという判断に自然となりますね。


のトップ10にも入る有名なライブラリじゃない。

折れる折れないの話ではない。年齢も関係ない。
データに公正公平で語る資格があるかないかの話でしかない。

vincent.maverickvincent.maverick

や、ホンマに面倒やな、、もうええゆーとるやん?
有名なライブラリやったら知ってて当然? それこそ傲慢じゃないか。
僕らの世代で松田聖子知らんゆーてる人を「えー!?」ゆーてるのと同じやで?

で、本文は「React 人気〜」について語りたいんやろ?
だったら、そっちに倒した話でえーやんけ、、
何をぐだぐだゆーとんねん、、

君、著作やらもあるんやしそっちで気張ったら宜しいがな。
で、僕は「もうごめんやで勘弁してくれや」ゆーとんねんかぁ?
どないせーゆーねん。

僕もこれで終わりにするし、余計なコメント勘弁したってな。
何なら削除してくれて構わんし。悪かったね。

Ken OkabeKen Okabe

有名なライブラリやったら知ってて当然? それこそ傲慢じゃないか。

いや【Reactはなぜそんなに人気なのか?翳りは訪れるのか?】
というタイトルの議論であり、論拠はそのもろもろの統計データであり、筆者は、すでに指摘したとおり「統計データの恣意的切り取り」をしている。
そして貴方は、

少なくとも各フレームワークのコア技術のひと握りでも(記事内容的に)つまんでおくべきでは?
と、僕は React 1択派ですね。

とか書いてて、その各フレームワークのコア技術のひと握りでもつまむどころか、ここで比較候補になっているもの、あるいは筆者も知らないのかすでに指摘のとおり恣意的に外したものを「初めて聞いたw」んでしょ?

単に論外である、語る資格がないわけ。

そしてこちらが、React仮想DOMからのSvelte以降のリアルDOMへのトレンド趨勢もふくめ「少なくとも各フレームワークのコア技術のひと握り」を補完的に語ったら、
「ぐだぐだゆーとん」のは貴方なの。

YutaUraYutaUra

盛り上がっているところすみません。この続きはTwitterだったり、アンサー記事を執筆したりしてはどうでしょうか。作者の方の代弁だとは思いませんが、きっと困ってしまいますよ。
自分に対する返信があればTwitterでメンションください。
なにも狭いコメント欄で議論されることはありませんよ

Ken OkabeKen Okabe

しばらく様子をみたが、上の人のコメントが二桁の「いいね」がついて、自分がつけた技術的あるいは統計的に有意性があるコメントに少なくとも意図的に「いいね」がつかないのは、こういうフレームワーク比較の議論が、単なる感情論であり、あるいは既存の(古い)技術的に劣勢なフレームワークを使い続ける自己正当化したい人間によるムーブメントしかないことが確認できる。
こういうのは技術コミュニティの「病」であると観察する。

ちなみにこんなものはすでにコメントしている情報だけで十分でありわざわざ独立した「アンサー記事」をUPする必要性は感じられないし、ましてや不必要にメタ議論で介入したい人に個別にTwitterメンションする動機も必要性もまるで感じられない。「狭いコメント欄」という言及に至っては意味不明でしかない。Xなら広くなるのかねw

Ken OkabeKen Okabe

たまたま見ましたが、だいたいちょっと「鼻が効く」ような技術者であれば、こういう感じの見解だと思います。

https://jp.quora.com/furonto-endo-enjinia-wo-mezasu-mono-ga-jQuery-to-React-no-ryouhou-wo-manabu-meritto-tte-arima-suka/answers/1477743750498566

2024年に回答を追加してみましょう。
いまやReactは複雑さを増すばかりで、耐えられる人と耐えられない人をはっきり二分しています。技術力や理解度でマウントを取る人がゴロゴロし、そもそもの「必要としている人のために良いものを作る」 というエンジニアの本懐を、多くの人から忘れさせているようにさえ感じます。

かといってReactに将来性を感じるかというと、いま申し上げたようなjQueryが辿った道と同じ方向へ進んでいるような気がしています。

あと、Reactの強みとして、WebフロントエンドからのMobil&Desktopクロスプラットフォームアプリ開発としてのReactNativeがある、ということでしたが、

https://2022.stateofjs.com/en-US/libraries/mobile-desktop/

この人気も年々下降している現状には留意、注意が必要でしょう。

taka1156taka1156

React君simpleさが売りだったけどさいきんServer Actionsみたいなマジック領域にまで手をつけちゃってるのが少し気になる。

あと、ディファクトっぽい立ち位置のNext.jsもVercelとの癒着というか優遇してる感が強いから今後ガラパゴスにならないか心配