今、市場には多數(shù)の優(yōu)れたフロントエンドフレームワークが満載されており、それぞれに獨自のメリットがあります。どのフレームワークを?qū)W習(xí)するか、または次のプロジェクトに最適なフレームワークを選択するのは本當(dāng)に難しいです。

この記事では、5つの最も人気のあるフロントエンドJavaScriptフレームワークを比較して、機(jī)能、ツール、學(xué)習(xí)曲線、その他の利點と欠點の高レベルの概要を提供します。

もちろん、どのフレームワークが「最良」であるかを知ることはできません。それはあなたの主観的な感情、現(xiàn)在のJavaScriptの経験と開発されているアプリケーションの種類に依存します。ただし、主な競合他社をすばやくお知らせし、詳細(xì)な學(xué)習(xí)のために選択するフレームワークについて情報に基づいた決定を下すのに役立ちます。

キーポイント

React、Angular、Vue.js、Svelte、およびEmber.jsは、それぞれ獨自の利點と短所を備えた最も人気のあるフロントエンドJavaScriptフレームワークです。人気は、2020 JavaScript Status SurveyおよびStack Overflow Developer Surveyの使用データに基づいて決定されます。
• Facebookが開発した
Reactは、再利用可能なコンポーネント、一方向データフローモデル、仮想Domで知られる最も人気のあるフレームワークです。中程度の學(xué)習(xí)曲線があり、あらゆるサイズのデータ??駆動型アプリケーションに最適です。
AngularはGoogleによって作成され、単一ページのクライアントアプリケーションを構(gòu)築するための包括的なソリューションです。 5つのフレームワークのうち、最も急な學(xué)習(xí)曲線があります。これは、チームワークが大規(guī)模なアプリケーションを構(gòu)築するのに最適です。
vue.jsは、段階的に採用されるように設(shè)計されています。つまり、通常のWebページを強(qiáng)化したり、完全な単一ページアプリケーションを構(gòu)築するために使用できます。入力に対する障壁が少なく、すべてのサイズのアプリケーションに適しています。
Svelteは、構(gòu)築時にアプリケーションを理想的なJavaScriptコードに変換するために異なるアプローチを取ります。その學(xué)習(xí)曲線は非常に低いですが、そのコミュニティはまだ小さく、小さなプロジェクトに最適です。
ember.jsは、5つのフレームワークの中で最も意見の高いものであり、リッチで複雑なフロントエンドアプリケーションを構(gòu)築するためにチームワークに最適です。その學(xué)習(xí)曲線は中程度から急勾配であり、初心者や小規(guī)模プロジェクトには適していません。

人気を測定するにはどうすればよいですか？

2020 JavaScriptステータス調(diào)査でのフレームワークの使用に基づいて人気が決定されます。調(diào)査には23,765人の回答者がいて、競合他社は次のようにランク付けされました。

反応：80％

1. Angular：56％
2. vue.js：49％
3. svelte：15％
4. プアクト：13％
同じ調(diào)査で「フレームワーク認(rèn)識」も検討しました。

react：100％

Angular：100％
vue.js：99％
ember：88％
svelte：86％
また、2020 Stack Overflow Developer Surveyでフレームワークの使用を使用して、これらの結(jié)果を反映しました。この調(diào)査は、合計65,000人の回答者が參加しており、基本的にJavaScriptステータス調(diào)査の結(jié)果と一致していましたが、殘念ながら、フロントエンドとバックエンドのフレームワークを區(qū)別しませんでした。

5. もちろん、求人、Githubスター、NPMダウンロード、GitHub「使用」など、參照できる他の多くのメトリックがあります。これらのメトリックのいくつかを知りたい場合は（少なくとも上位3つのフレームワークについては）、このGitHub Gistを參照してください。

   これらのフレームワークの比較をインタラクティブに表示するには、NPMTRENDSのこのチャートを參照してください。

   フロントエンドフレームワークをどのように定義しますか？

   最も重要な問題は、リストの最も人気のあるフレームワーク（React）が「ライブラリ」と定義されていることです。

   フレームワークとライブラリの違いを説明する完全な記事がすでにあるため、この問題に深く入りたくありません。この記事では、Martin Fowlerが提供する次の定義を使用します。

   ライブラリは、基本的に呼び出される機(jī)能のセットであり、通常は今日クラスに編成されています。各コールはいくつかの作業(yè)を行い、クライアントにコントロールを返します。

   フレームワークは、より多くの動作が組み込まれた抽象的なデザインを具體化します。それを使用するには、自分のクラスをサブクラス化または挿入することにより、フレームワーク內(nèi)のさまざまな場所に動作を挿入する必要があります。フレームワークのコードは、これらのポイントでコードを呼び出します。

   私の意見では、Reactはライブラリよりもフレームワークの動作に沿っています。技術(shù)的にはフレームワークではありませんが、開発者はしばしばエコシステムから多くのツールとパッケージを採用して機(jī)能させることができます。

   反応

   Webサイト：

   http://m.miracleart.cn/link/138a14eaf4a8c188a6c41cafd9400a30
   • github：http://m.miracleart.cn/link/9ed19fde2d99cd17ceafd0fe127f3176
   • Reactは元々2013年にFacebookによってリリースされ、現(xiàn)在最も人気のあるフロントエンドJavaScriptフレームワークです。 Facebook、Netflix、Airbnbなどの企業(yè)はすべて、生産環(huán)境で反応し、大規(guī)模な開発者ベースを持っています。つまり、オンラインでヘルプとリソースを簡単に見つけることができます。
   Reactの主な目的は、再利用可能なコンポーネントのインタラクティブなユーザーインターフェイスを組み合わせることです。テンプレートにJSX（JavaScriptの構(gòu)文拡張）を使用し、一方向データフローモデルを?qū)g裝してコンポーネントをデータで埋めます。コンポーネントデータが変更されるたびに、Reactは仮想DOMを使用してページを迅速かつ効率的に更新します。

   開発者ツールは非常に便利です。 Reactチームは、CHROMEとFirefoxの開発者ツール拡張機(jī)能だけでなく、迅速かつ簡単に新しいプロジェクトを構(gòu)築するために、CLI（React Appの作成）を構(gòu)築および維持しました。さまざまなタスク（ルーティング、処理フォーム、アニメーションなど）を達(dá)成できる多くのサードパーティパッケージ、およびnext.jsやギャツビーなどの反応ベースのフレームワークがあります。

   Reactは、「一度學(xué)習(xí)、どこでも書く」という概念に従います。 Mobileアプリケーションを駆動するためにReactネイティブを使用して、ノードを使用してサーバー側(cè)にレンダリングできます。これは、SEOサポートが優(yōu)れていることを意味します。これは、サーバーコンポーネントの導(dǎo)入により、どんどん良くなります。

   Reactの主な批判の1つは、それが制約されすぎているということです。アプリケーションのビューレイヤーにのみ焦點を當(dāng)てており、他のすべてを開発者に殘しています。この自由を好む人もいますが、他の人々、特に新しい開発者は、この奨勵されている非構(gòu)造化されたコーディングアプローチに圧倒されるかもしれません。

   反応には中程度の學(xué)習(xí)曲線があります。不変性や純粋な機(jī)能などのさまざまな機(jī)能プログラミングパラダイムの使用を奨勵しています。つまり、開発者は、深刻なものを構(gòu)築しようとする前にこれらの概念を習(xí)得する方が良いでしょう。

   Reactの制約のないアプローチに満足し、開発プロセスのほとんどを開発者に殘す場合、あらゆるサイズのデータ??駆動型アプリケーションに最適です。

   2. angular

   

   Webサイト：
   • http://m.miracleart.cn/link/2c8a0f42adb0345a7e348beb5706d949
   github：
   • http://m.miracleart.cn/link/3b0cc5f591dd5b8dacb0c8e01546b2b4
   Angularは、フロントエンドフレームワークの分野にあるGoogleの製品です。 2010年にAngularjs（またはAngular 1）として生まれ、主に開発者が現(xiàn)在1ページのアプリケーションと呼ばれるものを構(gòu)築できるようにした最初のフレームワークであるため、すぐに成功しました。
   パフォーマンスの問題と大規(guī)模なJavaScriptアプリケーションの構(gòu)築という課題を解決するために、GoogleはAngularjsをゼロから書き直し、2016年にAngular 2（現(xiàn)在はAngular）をリリースしました。これらの2つのバージョン間に単純な移??行パスはないため、AngularJとAngularは2つの別々のフレームワークになります。 Angularjsは現(xiàn)在、メンテナンスのために中止されており、新しいプロジェクトに使用するべきではありません。

   Angularに関しては、フロントエンドフレームワークの世界ではヘビー級です。 GoogleやMicrosoftなどの企業(yè)は、生産環(huán)境でそれを使用しているため、完全にテストされています。また、オンラインで利用できる多くのリソース（優(yōu)れたツアーオブヒーローズチュートリアルなど）もあり、スタックオーバーフローのAngularについても多くの質(zhì)問があります。

   ビューレイヤーのみを処理するReactとは異なり、Angularは単一ページのクライアントアプリケーションを構(gòu)築するための完全なソリューションを提供します。角度コンポーネントは、雙方向データバインディングを?qū)g裝できます。これにより、イベントを同時にリッスンし、親コンポーネントと子コンポーネント間の値を更新できます。テンプレートは、Angularの機(jī)能の多くを活用するために特別な構(gòu)文を使用できるHTMLスニペットです。 TypeScriptは角度開発の主要言語であり、このフレームワークをエンタープライズレベルのアプリケーションに特に適しています。

   ツールは非常に便利です。 Angularは、角度アプリケーションを初期化、開発、構(gòu)築、および維持するための高度に洗練されたCLIを提供します。 ChromeおよびFirefox Dev Tools拡張機(jī)能も利用できます。 Angularは、フォームやルーティングなどの多くの一般的なタスクを処理するためのソリューションをネイティブに提供しますが、サードパーティライブラリの豊富なエコシステムがまだあります。

   私の意見では、Angularの學(xué)習(xí)曲線は、ここにリストされているすべてのフレームワークの中で最も急です。開発者は、フレームワークを効果的に使用するために、タイプスクリプトと、デコレータや依存関係の注入などの概念に精通する必要があります。したがって、新しい開発者には適していません。代わりに、チームワークが大規(guī)模なアプリケーションを構(gòu)築するためにより適しています。
   反応と角度の違いを包括的に理解したい場合は、「React vs. Angular：詳細(xì)な比較」を參照してください。
   3. vue.js

   

   これらの統(tǒng)計はVue v2に適用されることに注意してください。バージョン3は利用可能ですが、Vue@nextとしてインストールする必要があります。
   • Webサイト：http://m.miracleart.cn/link/51430076a21dfc5745a77df028b869d1
   • github：https：//m.miracleart.cn/link/b0e2ff951d07b244a06800304fb423f0
   リストの3位は、ユーザーインターフェイスとシングルページアプリケーションを構(gòu)築するためのモデルビュービューモデル（MVVM）フロントエンドフレームワークであるvue.jsです。 You Yuxiによって書かれ、2014年に最初にリリースされました。 Vueには非常に忠実な開発者コミュニティがあります（たとえば、反応よりもGithubスターが多い）。これは、おそらくAngularに書き直した後にAngularjsが殘したギャップを埋めるためです。
   Vueは約20人のコアチームメンバーによって開発および維持されており、インターネットの巨人によって直接サポートされていませんが、Alibaba、Gitlab、Adobeなどの企業(yè)は、生産環(huán)境でそれを使用しています。 Vueのドキュメントは間違いなくすべてのフレームワークの中で最高であり、そのフォーラムはコードの問題を支援するための優(yōu)れたリソースでもあります。 VueはPHPの世界でも人気があり、Laravelフレームワークの一部として利用できます。
   Vueのセールスポイントの1つは、最初から徐々に採用されるように設(shè)計されたことです。これは、通常のWebページにVUEを追加して機(jī)能を強(qiáng)化することも、完全なシングルページアプリを構(gòu)築するために出て行くこともできます。 Vue.jsは、HTMLベースのテンプレート構(gòu)文を使用して、基礎(chǔ)となるデータモデルにプロパティを簡単にバインドできるようにします。また、同じファイルにテンプレート、JavaScriptコード、スコープCSSを保持する?yún)g一のファイルコンポーネントも提供します。
   Vue周辺のツールは素晴らしいです。 VUEアプリケーションを構(gòu)築および開発する公式CLIがあり、ChromeとFirefoxがデバッグを支援するための開発者ツール拡張機(jī)能があります。 Reactとは対照的に、Vueはルーティングと州管理のための公式パッケージを提供します。これは、快適な標(biāo)準(zhǔn)化アプローチを提供します。幅広いサードパーティツールや、nuxt.jsやGridsomeなどのVueベースのフレームワークもあります（VueのReactのNext.jsとGatsbyに対する応答）。

   VUEの使用への參入の障壁は、HTML、CSS、およびJavaScriptに基づいているため、アプリケーションを構(gòu)築するための漸進(jìn)的なアプローチを使用しているため、VUEの使用への參入障壁は低いです。

   Vueは、すべてのサイズのアプリケーションに最適な選択肢です。體験が少ない開発者や、フレームワークからより多くの構(gòu)造とガイダンスを取得することを好む開発者に適しています。

   4. svelte

   

   Webサイト：
   • http://m.miracleart.cn/link/bf9106abee8a404bd4d041e12af5883b
   github：
   • http://m.miracleart.cn/link/7048a4636546df0025a5a78b0fc517c0
   2016年にRich HarrisがリリースしたSvelteは、フレームワークフィールドの新しいメンバーであり、このリストの他のフレームワークとは異なるアプローチを使用してWebアプリケーションを構(gòu)築しています。そのウェブサイトは次のように述べています

   Svelteは、アプリケーションコードを?qū)g行時に解釈するのではなく、構(gòu)築時にアプリケーションを理想的なJavaScriptコードに変換します。これは、フレームワークの抽象化に対してパフォーマンスを支払わないことを意味し、アプリケーションが最初にロードされたときにペナルティを受けることはありません。

   言い換えれば、仮想DOMの概念を回避しますが、アプリケーションの狀態(tài)が変更されたときにDOMを更新するように構(gòu)築されたときに、コードを小さくプレーンJavaScriptモジュールにコンパイルします。ご想像のとおり、これによりアプリケーションが速くなり、スペースが少なくなります。 Svelteは、生の処理狀態(tài)管理を復(fù)元し、箱から出して応答性を提供します。

   殘念ながら、このツールは今すぐ頭痛の種です。當(dāng)初、Sapper（Svelteの上に構(gòu)築されたアプリケーションフレームワーク）を使用して、事前定義された構(gòu)造を使用してSvelteアプリケーションを構(gòu)築し、ルーティングやサーバー側(cè)のレンダリングなどのより高度な機(jī)能を裝備しました。しかし、2020年11月、Svelteのクリエイターは、Sapperのバージョン1.0がリリースされることはないことを発表しました。Sveltekitは、Svelteでアプリケーションを構(gòu)築する唯一の推奨方法です。 ChromeとFirefox用のブラウザ開発者ツール、およびさまざまなサードパーティモジュールの拡張機(jī)能は、より成熟したフレームワークよりもはるかに少ないです。
   Svelteの學(xué)習(xí)曲線は非常に低いですが、そのコミュニティは小さく、ここで言及されている上位3つのフレームワークと同じ魅力を獲得していません。しかし、IBMやThe New York Timesのような企業(yè)は、生産環(huán)境でそれを使用しています。これは間違いなく、今後數(shù)か月と數(shù)年のうちに注意を払う価値のあるフレームワークです。

   Svelteはまだ十分に成熟していないため、小さなプロジェクトに最適です。しかし、これは変化しています。 Sveltekitはオープンベータ段階にあり、コミュニティは成長しています。 Svelteは今でも新人ですが、この領(lǐng)域に焦點を當(dāng)てる必要があります...

   5. ember.js

   

   Webサイト：
   • http://m.miracleart.cn/link/feae21bb32b7b4aa690fab151b60b598
   github：
   • http://m.miracleart.cn/link/2f27e0f4118 efff145aeecd8367fbb37
   この記事の最後のフレームワークとしてEmberを紹介します。これは、フロントエンドフレームワークの初期の頃から存在するためです。元々2011年にリリースされましたが、開発者の間では常に人気が維持されています。

   それはほぼ10年であり、React、Vue、Svelte、その他すべてのフレームワークにさかのぼります。このフレームワークは、フロントエンドの誇大広告波の最前線にいたことがありませんが、2020年にヨーロッパのトップ50フィンテック企業(yè)であるQontoとClarkを含む、チームが安定かつ継続的に製品をリリースできるようにします。

   Angularと同様に、Emberはアプリケーション開発に対してより包括的なアプローチを取り、最新のフロントエンドJavaScriptアプリケーションを構(gòu)築するために必要なすべてを提供します。これには、ルーティングソリューション、データレイヤー、およびデフォルトですべてのアプリケーションに組み込まれた完全に機(jī)能する最新のテストツールが含まれます。 6週間のリリースサイクル（新しいマイナーリリースがリリースされたとき）に続き、安定性に取り組んでいます。これは、より速い成長するフレームワークに取り殘されないようにアプリケーションを継続的に書き直すことができない開発者にとって、真の利點になる可能性があります。

   Ember CLI（Emberアプリケーションの作成、ビルド、テスト、サービスの公式方法）からEmber Inspector（公式にサポートされているブラウザアドオンで、チェックインできるようにする幅広いツールが、Ember CLI（Emberアプリケーションの作成、構(gòu)築、テスト、サービスの公式の方法）から幅広いツールが現(xiàn)れました。 Emberオブジェクトを適用します）。また、いくつかのサードパーティライブラリもあり、CLIはそれらを配布するための共通の形式（つまり、エンバーアドオン）を提供します。

   EmberのコミュニティはReactのコミュニティほど大きくはありませんが、そのメンバーは非常にアクティブで、フォーラムとコードの問題を支援できる不和サーバーを持っています。 Emberは、「構(gòu)成上のコンベンション」アプローチを使用して、ここにリストされている最も意見の高いフレームワークです。これに加えて、開発者は、學(xué)習(xí)曲線を中程度から急なものにするために、より高度な概念（シリアル化剤やアダプターなど）に精通している必要があります。

   emberは、初心者や小規(guī)模プロジェクトには適していない場合があります。多くの可動部品があり、物事を構(gòu)築する方法についてあまり柔軟性を提供しません。しかし、チームとの豊かで複雑なフロントエンドアプリケーションを構(gòu)築するとき、それは輝きます。

   結(jié)論

   これは、今日の市場で最も人気のある5つのフロントエンドフレームワークの比較です。これは各フレームワークの機(jī)能を徹底的に見ているわけではありませんが、次のプロジェクトにどのような主要な競合他社が適切であるか、またはさらに探索する価値があるかについてのアイデアを提供することを願っています。

   質(zhì)問やコメントがある場合は、SitePointフォーラムに參加して議論してみませんか？

   フロントエンドフレームワークFAQ（FAQ）

   フロントエンドフレームワークを選択する際に考慮すべき重要な要素は何ですか？

   フロントエンドフレームワークを選択する場合、學(xué)習(xí)曲線、コミュニティサポート、ドキュメント、柔軟性、パフォーマンスなどの要因を考慮する必要があります。フロントエンドの開発に慣れていない場合、學(xué)習(xí)曲線が重要です。一部のフレームワークは、他のフレームワークよりも簡単に學(xué)ぶことができます。コミュニティのサポートは、問題に遭遇したときに助けを得るために不可欠です。大規(guī)模でアクティブなコミュニティは、多くの場合、より多くのリソースとチュートリアルを意味します。優(yōu)れたドキュメントは、學(xué)習(xí)プロセスをよりスムーズにすることができます。柔軟性とは、さまざまなプロジェクトのニーズに適応するフレームワークの能力を指します。最後に、パフォーマンスはアプリケーションの速度とユーザーエクスペリエンスに影響します。

   Angularは他のフロントエンドフレームワークと比較してどうですか？

   Angularは、Googleが開発した強(qiáng)力で機(jī)能が豊富なフレームワークです。雙方向のデータ結(jié)合、依存関係注入、およびモジュラーアーキテクチャで知られています。ただし、その學(xué)習(xí)曲線は、他のフレームワークと比較して急です。大規(guī)模で複雑なアプリケーションに最適です。

   Reactを使用することの利點は何ですか？

   ReactはFacebookによって開発されており、仮想DOMで知られています。これにより、実際のDOMでの直接操作を最小限に抑えることでパフォーマンスが向上します。これはコンポーネントベースであり、再利用性と保守性を促進(jìn)します。また、巨大なコミュニティと大きな図書館もあります。

   なぜ他のフロントエンドフレームワークよりもVueを選択するのですか？

   Vueは進(jìn)歩的なフレームワークです。つまり、段階的に採用できます。學(xué)ぶのは簡単で、角度や反応よりも単純な文法を持っています。また、仮想DOMおよびコンポーネントベースのアーキテクチャもあります。中小規(guī)模のプロジェクトに最適です。

   Angularにおける雙方向データ結(jié)合の概念を説明できますか？

   Angularでの雙方向データ結(jié)合は、モデルのデータが変化すると、ビューがこの変更を反映し、その逆を反映していることを意味します。モデルとビューの間のこの同期により、コードが簡素化され、読みやすさが向上します。

   ReactとVueの仮想Domsとは何ですか？

   仮想DOMは、実際のDOMの軽量コピーです。変更が発生すると、仮想DOMが最初に変更されます。差分アルゴリズムは、新しい仮想DOMを古い仮想DOMと比較し、実際の変更のみが実際のDOMで更新されます。このプロセスはパフォーマンスを向上させます。

   Angularのモジュラーアーキテクチャは開発者にどのように利益をもたらしますか？

   Angularのモジュラーアーキテクチャは、特定の機(jī)能を擔(dān)當(dāng)する各モジュールをモジュールに整理します。この懸念の分離により、コードの維持とテストが容易になります。また、コードの再利用性とスケーラビリティを促進(jìn)します。

   React and Vueにおけるコンポーネントベースのアーキテクチャの重要性は何ですか？

   コンポーネントベースのアーキテクチャは、UIを獨立した再利用可能なコンポーネントに分解します。各コンポーネントには獨自のロジックがあり、UIの一部を制御します。このアプローチは、コードの再利用性、保守性、およびテスト可能性を促進(jìn)します。

   コミュニティサポートは、フロントエンドフレームワークの選択にどのように影響しますか？

   大規(guī)模でアクティブなコミュニティは、貴重なリソース、チュートリアルを提供し、問題に遭遇したときに助けを得るのに役立ちます。また、フレームの人気とサービスの生活も示しています。 Angular、React、およびVueはすべて、コミュニティの強(qiáng)力なサポートを持っています。

   パフォーマンスは、フロントエンド開発のユーザーエクスペリエンスにどのように影響しますか？

   パフォーマンスは、アプリケーションの速度に直接影響します。アプリケーションが遅い場合は、ユーザーを苛立たせ、直帰率が高くなります。したがって、高性能フレームワークを選択すると、ユーザーエクスペリエンスが向上します。

以上が最も人気のある5つのフロントエンドフレームワークが比較されましたの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。