JavaScriptフレームワーク戦争は終わった
(medium.com)そして、勝者はただ一人。
参加者たち: フレームワーク間の戦争はJSコミュニティの熱い話題だ。Backbone、Senchaなどは姿を消した。jQueryは驚くべきことに今でも大きなコミュニティを持っている。Angularのようにうまくいかなかったものもあった。
jQuery: 最古参の参加者。ブラウザ互換性の問題を解決して人気を得た。しかしアプリケーションの拡張は難しかった。今日では主流ではなく、最善の選択でもない。
AngularJS: すでにLTSモードで退役済み。フレームワーク生態系における大きな飛躍であり、懐かしむ人も多い。もはや保守されていないため、もう参加者ではない。
Angular:
- Reactと競争するために登場した。AngularJSの性能や堅牢性の問題により、多くのプログラマーはReactをうらやましく思っていた。AngularはAngularJSをモダン化し、ES6の改善点を活用してReactと競争しようとした。
- 重い学習曲線が最大の難点だった。多くの概念を必要とした。AngularJSの学習曲線を引き継いだうえで、RxJSや階層型依存性注入(DI)のような新たな難しさもあった。
- もう一つの懸念は、多くの約束を破ったことだ。たとえば、V2ではサーバーサイドレンダリング(SSR)ページを簡単に作れるはずだったが、2022/2/24時点ではJSなしでは動作不可能だった。
- 最大の問題は断片化とバージョンアップグレードだ。バージョンアップグレードがあまりに難しく、ユーザーはそのリスクを取ろうとしない。npmサイトの統計にもそれが表れている。
VueJS:
- AngularJSより高性能で、Angularより安定していて使いやすいものを求める開発者たちへの答えだった。テンプレートシステムにおいてVueはAngularJSに非常に近く、AngularJSの単純さを保ちながら、Reactから力を得ていた。
- しかしVueJSにはバージョン1と2で深刻な問題があった。arrayをうまく扱えず、作者たちはアップデートアルゴリズムの選択を誤ったことについてJavaScriptを非難した。VuexやReduxのようなライブラリへの依存もあった。
- この問題はバージョン3で解決された。しかし自分たちのミスについて他者を責める姿勢は、コミュニティにふさわしいものではなかった。
SvelteJS:
- 成長中の競争相手。大きな約束を掲げている。コンポーネントを命令型言語へ変換することが主な利点だと主張している。彼らによれば、それはReactの宣言的な書き方より優れているという。
- 使い方は簡単。ただし命令型への変換によって生じる構成要素は、見た目ほど予測しやすくない。場合によっては変更を正しく検知できない。この場合、状態が壊れ、viewが正しく更新されない可能性がある。この問題は大きな懸念を生み、過去のVueJSのようにSvelteJSのいかなるプロジェクトも正当化しにくくしている。
StencilJS:
- 厳密にはフレームワークではない。コンポーネントを書き、それを別のフレームワークへ変換できる。現在はAngular、React、Vue、およびWeb Componentsへ変換可能。
- 他のフレームワークのコードに似たコードなのか? という問いを投げかける (原文参照)
Mitosis:
- おそらく聞いたことがないだろうが、この文章を書くきっかけになったもの。Angularを作ったMisko Heveryによる最新のフレームワーク。
- StencilJSと同じ目的を持つ。コンポーネントを数多くのフレームワークへ変換する。
- 同様に、他のフレームワークのコードに似たコードなのか? という問いを投げかける (原文参照)
React:
- npmリポジトリに10年以上置かれている、最古参のフレームワークの一つ。大きく変化してきたが、その大半は過去のバージョンと互換性がある。すべての変化は改善だった。hookによってReactははるかに優れたフレームワークになったと言う人もいる。
- 最も優れた性質は、hookや目に見える機能にあるのではなく、その逆にある。最新のJS標準とJSXを採用している。これはもはやフレームワークではない。いや、そもそもそうだったことはないのかもしれない。Reactは標準のためにあまりにも努力した結果、ユーザーコードの中から自らを取り除いている。
では勝者は...
- JSX。Reactでもあるが、Reactの背後にある哲学のことだ。React自体はライブラリにすぎない。ただしPreactやReact Nativeなど、多くの別のライブラリで置き換え可能だ。よく見ると、StencilJSやMitosisはReactと非常によく似ており、これは偶然ではない。
- "最高のフレームワークとは、ユーザーコードから自分自身を取り除くフレームワークだ"
- ReactはJSとJSXを大いに活用する。ユーザーコードはReactに依存しない。大きな修正なしに、同じコードが別のフレームワークでも動作可能だ。
- だから疑いようもなくReactがフレームワーク戦争の勝者だ。
- なぜなら、ユーザーコード内のフレームワークではないからだ。
15件のコメント
重要なのは「フレームワークと結婚するな」というボブおじさんの言葉をできるだけ実践してコードを書けば、ReactでもVueでもAngularでも楽しく開発できるのではないでしょうか
Marko JSの見通しはどうなんでしょうか？
eBayが支援しているので最近興味を持ったのですが、原文では言及すらされていませんね...
React の「大きく変わったが、ほとんどは過去バージョンと互換性がある」―私はこの互換性の体験をあまりできませんでした。
Angular の「断片化とバージョンアップグレード」―しかし、この点では私はかなりスムーズな体験をしました。
JSX は framework ではなく、specification として分類すべきだと思います。言いたいことは分かるのですが、なくてもいい序論が長すぎますし、何よりタイトルが clickbait です。文章自体のクオリティを自ら下げる文体を使っていますね。
要約と良いコメントをありがとうございます〜！ こういう話は、ほかの方々にもとても役立つと思います ;)
全体的に妙な文章だという印象を受けます。
まず、Svelteの部分です。
原文を見ると、配列を更新するときに
array[0] += 1のように書くと更新されないので問題だと書かれていますが、Svelteの公式ドキュメントでも、配列は再代入しないと更新されないと書かれていますし、そもそもReactでもこういう形では配列の更新はできませんよね？VueJSの部分もです。
Angularと比較しながらVueの短所を語っていますが、動くAngularのコードと動かないVueのコードを並べておいて、Vueはいまいちだと言うのが何の意味があるのか分かりません。
それは妥当な批判だと思います。再代入とミューテーションの違いは初心者には混乱しやすい部分ですが、Svelte も Vue も JavaScript に似た独自の文法を使っている以上、期待どおりに動かない部分は批判されて当然でしょう。
特に Vue はプロキシを通じて
setされたときに状態を更新する方式ですが、ぱっと見は簡単そうに見えても落とし穴にはまりやすく、その点を批判していることには私も強く共感します。React はこうした問題に関してはずっと自由で、再代入では状態更新されず、明示的に
setUpdate関数を呼び出す形で JavaScript の標準の範囲内で単方向更新を提供しているので、配列の一部だけを変更することと再代入を取り違えるといった問題がそもそも起こりません。少し脇道にそれる話ですが、Vue 3ではあのような形の配列更新をリアクティブにサポートしているのに、本文は旧バージョンのVueだけをやたらと酷評して大雑把に済ませているように感じます…^^;; その一方で、Reactでこのような更新ができないことは決して小さな欠点ではないはずなのに、そうした特徴はきちんと押さえられていない印象がありますね（笑）。
原文にも多くのコメントが付き、さまざまな問題を指摘するコメントが多かったようです。
StencilJS と Mitosis に説明が付いている「他のフレームワークのコードに似たコードか？」という部分が紛らわしかったので原文を見たのですが、どうやらその 2 つのフレームワークで使うコードが他のフレームワークで見たものに似ていないか？と尋ねているようです。
おそらく React とコードの書き方が似ている、という意味で書いたのだと思います。
VueJS に対しては、ちょっと厳しすぎる評価ですね..
redux への依存性は、react も決して無縁ではないはずですが..
ユーザー規模という点では、React が圧倒的に 1 位なのは確かですが、
技術的な側面で React より劣るプロジェクトだとは言えないでしょう。
ここで主にVueJsについて語られている論点は、外部ライブラリへの依存性というよりも、「自分たちが生じさせた問題についてJSに責任転嫁する態度」ではないでしょうか？
どうしてもVueJSに対する世論が良くないのは事実だと思います。
本文を読んでみると、Vuex、Reduxへの依存性に言及した部分も、VueJS 2で発生した問題を解決するためにはVuex、Reduxのようなライブラリが「必須」だった、という箇所です。
元の投稿にもすでにいくつかコメントが付いている内容ではありますが
複雑さが増してくると、VueであれReactであれ、reduxのような状態保存・キャッシュライブラリはどれも「必須」になります。
なるほど、元記事ではVueJSではこれが欠点であり、Reactについてはその点への言及を「意図的」に避けていますね。
コミュニティの振る舞いは、私の立場からするとあまり重要ではないので……
Reactではreduxは必須ではありません。contextAPIやuseReducerなどを使って状態管理ができるので。これがReactがVueより優れていると見なせる根拠だとは思いませんが。
はい、笑 全体的にあまり良い文章ではないように思います。
著者は結論ありきで、結論に到達するために他のフレームワークをけなしているようですね。