フロントエンド フレームワークの戦い: Vue、Angular、React のほかに、これらと競合するのは誰でしょうか?

近年、フロントエンド開発の分野では数多くのフレームワークが登場し、人々はどのように選べばよいのか混乱しています。今日は、最も人気のある 5 つのフロントエンド JavaScript フレームワークを比較し、その概要を示し、主な機能、ツール、学習曲線、および選択に役立つその他の要素を紹介します。

人気の尺度

2020 JavaScript 調査によると、フレームワークの人気はフレームワークの使用状況によって決まります。この調査には 23,765 人の回答者が回答し、結果は次のとおりです:

React：80％
Angular：56％
Vue.js：49％
Svelte：15％
PreACT：13％

同じ調査から「フレームワークの認識」も考慮されました:

React：100％
Angular：100％
Vue.js：99％
Ember：88％
Svelte：86％

フロントエンド フレームワークの定義

この記事では、Martin Fowler によって提供された定義を使用します。

ライブラリは本質的に、開発者が呼び出すことができる関数のセットであり、通常はクラスに編成されています。 。この呼び出しは何らかの作業を実行し、制御をクライアントに返します。

フレームワークは抽象的なデザインを具体化しており、より多くの組み込み動作を備えています。開発者は独自のクラスをサブクラス化または挿入することで、フレームワーク内のさまざまな場所に動作を挿入でき、フレームワークはこれらのポイントでコードを呼び出します。

1. React

推奨事項: 「 フロントエンド React の面接質問のまとめ (コレクション)」 》《react ビデオ チュートリアル 》

は 2013 年に Facebook によってリリースされ、現在最も人気のあるフロントエンド フレームワークです。 Facebook、Netflix、Airbnb などの企業製品で使用されており、開発者の数が多く、使い方の学習リソースも豊富です。

React 関連のツールは多数あり、チームが提供する CLI を使用して新しいプロジェクトを簡単に構築でき、ツール拡張機能は Chrome と Firefox に適しています。これには、さまざまなタスク (ルーティング、フォームの処理、アニメーションなど) 用の多くのサードパーティ パッケージと、Next.js や Gatsby などのいくつかの React ベースのフレームワークが含まれています。

React は、「一度学習すれば、どこでも書ける」という哲学を追求します。 React Native でモバイル アプリを強化し、Node でサーバー上でレンダリングし、優れた SEO サポートを備えています。

React はアプリケーションのビュー層に関係するだけで開発者にすべて任せられているというシンプルすぎる考え方が主流であり、その自由度の高さから賛否両論あります。

勉強すれば、学習曲線は中程度です。 React は、開発者がさまざまな関数型プログラミング パラダイム (不変性や純粋関数など) を使用することを奨励しており、開発者はビルドする前に基本概念を理解しておく必要があります。

全体として、React の自由に興味がある場合は、満足しているなら、これはあらゆる規模のデータ駆動型アプリケーションにとって良い選択です。

#2. Angular

# 推奨: 「

Angularjs ビデオ チュートリアル

#」

は、フロントエンド ボックスの Google 製品として 2010 年に AngularJS (または Angular 1) として誕生し、主に現在シングルとして知られているものを構築する開発者の能力によりすぐにヒットしました。 -page アプリケーションの最初のフレーム。

パフォーマンスの問題と大規模な JavaScript アプリケーション構築の課題を解決するために、Google は AngularJS を書き直し、2016 年に Angular 2 をリリースしました (今日では Angular のみ)。簡単に移行できないため、AngularJS と Angular は 2 つの独立したフレームワークになります。

Angular はフロントエンド フレームワークの中で重要な位置を占めており、厳格なテストを経て Google や Microsoft などの企業によって本番環境で使用されており、関連するオンライン リソースも豊富です。

ビュー レイヤーのみを扱う React とは異なり、Angular は単一ページのクライアント アプリケーションを構築するための完全なソリューションを提供します。 Angular コンポーネントは双方向のデータ バインディングを実装して、イベントをリッスンし、親コンポーネントと子コンポーネント間で同時に値を更新します。テンプレートは、Angular の多くの機能を活用するために特別な構文を使用できるようにする HTML の一部です。 TypeScript は Angular 開発に使用される主な言語であるため、このフレームワークは企業やアプリケーションに適しています。

関連ツールの観点から見ると、Angular は、アプリケーションの初期化、開発、構築、保守を行うための非常に完成度の高い CLI と、Angular アプリケーションをデバッグするための Chrome および Firefox Dev Tools 拡張機能を提供します。

しかし、学習の観点から見ると、Angulard の学習曲線は最も急峻です。開発者が作業するには TypeScript に精通している必要がありますが、初心者にとっては最適な選択ではなく、チーム内で役割を果たすのに適しています。

3. Vue.js

推奨: 「最新の 5 つの vue.js ビデオ チュートリアル>>

注: 統計は Vue v2 に適用されます。バージョン 3 が利用可能ですが、vue@next がインストールされている必要があります。

Vue は、ユーザー インターフェイスとシングルページ アプリケーションを構築するための Model-View-ViewModel (MVVM) フロントエンド フレームワークです。 Evan You によって書かれ、2014 年に初版が出版されました。

Vue は現在、Alibaba、Gitlab、Adobe などの企業によって運用環境で使用されています。これはおそらくあらゆるフレームワークの中で最高のドキュメントであり、そのフォーラムはコーディングに関する質問についての助けを得るための優れたリソースです。 Vue は PHP の世界で人気があり、Laravel フレームワークの一部です。

Vue の核となるセールス ポイントは、ゼロから設計されており、徐々に採用できることです。つまり、Vue は、通常の Web ページの機能を強化したり、単一ページのアプリケーションを改善するコンポーネントを構築したりできます。 Anugular は、HTML に基づいて属性を基本的なデータ モデルにバインドし、単一の File コンポーネントを提供できます。

関連ツールの充実度という点では、公式 CLI でスキャフォールディングの作成や Vue アプリケーションの開発ができるほか、Chrome や Firefox の devtools 拡張機能を利用してデバッグを支援できます。 React とは異なり、Vue はルーティングと状態管理のための公式パッケージを提供し、便利で標準化された処理方法を提供するほか、さまざまなサードパーティ ツールや Vue ベースのフレームワークを提供します。

しかし、他のフレームワークと比較して、参入障壁は非常に低く、経験の浅い開発者に適しています。

4. Svelte

は、2016 年に Rich Harris によってリリースされました。フロントエンド フレームワークの新しいメンバーとして、他のフレームワークとは異なるアプローチを採用して Web アプリケーションを構築します。

仮想 DOM の概念を回避し、ビルド中にコードを小さな生の JavaScript モジュールにコンパイルし、開発者のアプリケーションの状態の変化に応じて DOM を更新します。小型化と高速塗布を実現します。

Rich Harris は学習曲線が短く、コミュニティも小さいですが、IBM や New York Times などの企業によって本番環境で使用されており、将来的には大きな可能性を秘めています。

成熟度が低いため、小規模なプロジェクトにのみ好まれますが、状況は徐々に変わりつつあります。 SvelteKit はパブリックベータ版であり、コミュニティは継続的に成長しています。 Svelte は現在若いですが、開発者は注意する必要があります。

5. Ember.js

最後に紹介した Ember は、フロントエンド フレームワークの出現以来存在しています。元々は 2011 年にリリースされましたが、今でも開発界で人気があります:

その起源は、React、Vue、Svelte などが登場する前に遡ります。このフレームワークはフロントエンドの誇大宣伝の最前線に立ったことはありませんが、着実に進歩し続けています。パートナーには、2020 年のヨーロッパのフィンテック企業トップ 50 社のうちの 2 社、Qonto と CLARK が含まれます。

Ember は、Angular と同様に、アプリケーション開発に対してよりバッテリーを必要とするアプローチを採用しており、最新のフロントエンド JavaScript アプリケーションを構築するために必要なものをすべて提供します。 6 週間のリリースサイクルが続き、安定性は優れています。

関連ツールに関しては、Ember CLI から Ember Inspector まで、多くの関連ツールがあり、多くのサードパーティ ライブラリが利用可能です。

そのコミュニティは他の人気のあるフレームワーク コミュニティほど大きくありませんが、メンバーは非常に熱心に参加しており、フォーラムと Discord サーバーを使用すると、コーディングの問題について簡単にサポートを受けることができます。

開発者が学びたい場合、学習曲線は中程度から急勾配であり、初心者または小規模プロジェクトの場合、Ember は最良の選択ではない可能性があります。流動的な部分が多く、チームの取り組みの一環として物事を整理する際の柔軟性はあまりありません。 ＃＃＃＃＃＃＃＃＃結論は＃＃＃＃＃＃

この記事では、現在市場で最も人気のある 5 つのフロントエンド フレームワークを比較し、開発者が個人の能力やプロジェクトのニーズに応じて選択するためのより良い参考資料を提供します。