人気のJavaScriptフレームワーク4つを比較する

1.Angular

引用：https://angular.jp/

1-1.特徴 

• Googleが開発したフレームワーク 
• インストール直後から一般的なアプリ開発に必要な機能をすべて利用可能(フルスタック) 
• Web、モバイルWeb、ネイティブモバイル、ネイティブデスクトップ等、多くのターゲットに向く 
• 大規模なプロジェクト向き、堅牢さと厳密さはフレームワークの中で最も高い 
• TypeScriptやRxJSの習得も必要であり、習得難易度は高め 

Angularの一番の特徴はフルスタックということです。Webアプリケーション開発に必要な機能すべてが最初から備わっています。堅牢性や厳密さが高く、大規模プロジェクトでの開発に向いています。 

必要な機能が全て備わっているため、ライブラリ選びが不要です。しかしその反面、不要な機能を排除できないため、ライブラリの読み込みに時間がかかるというデメリットがあります。また、TypeScriptやRxJSなど習得が必要のため、習得難易度はやや高めです。 

リヴィティエでは、Angularを使用したWebアプリケーション開発を最も得意としています。 

1-2.こんな開発におすすめ 

大規模プロジェクトのWebアプリケーション開発（SPA） 

ネイティブアプリ 

1-3.公式サイト 

https://angular.jp/

2.React 

引用：https://ja.reactjs.org/ 

2-1.特徴 

• Facebookが中心となって開発したフレームワーク 
• 仮想DOMを利用することで、処理スピードが早い 
• 記述方式はJavaScriptの拡張構文『JSX』 
• Reactを習得することで、アプリ開発に特化したReact Nativeも扱える 
• 開発環境の構築がやや面倒 

Reactは、Anglarと並ぶ人気のフレームワークです。Anglarと同じく、Webアプリケーション（SPA）開発や、モバイルアプリの開発を得意とします。パフォーマンスや拡張性に優れたフレームワークです。 

Reactは、DOM（Document Object Model。JavaScriptからHTMLドキュメントを操作するためのAPI）を仮想DOMとしてメモリ上にキャッシュし、差分だけを反映する仕組みをもっています。この仕組みから、変更する部分だけを描画すればよく、処理スピードが速いのが特徴です。 

反面、仮想DOMの仕組み上、大規模かつ頻繁にデータの書き換えが発生するサービスには不向きです。なぜなら、キャッシュするデータ量が多くなり、メモリ消費が激しくなるためです。そのため、中規模プロジェクトのWebアプリケーション開発に向いています。 

2-2.こんな開発におすすめ 

中規模プロジェクトのWebアプリケーション開発（SPA) 

モバイルアプリ開発 

2-3.公式サイト 

https://ja.reactjs.org/ 

3.Vue.js 

引用：https://jp.vuejs.org/index.html

3-1.特徴 

• Reactと類似点が多い 
• 記述形式は、HTML/CSSを中心に書ける『Templates』 
• 大量にコンポーネントを扱うとメモリを消費するため、小～中規模開発向き 
• 日本語のドキュメントが充実しており、学習コストが比較的低い 

Vue.jsは、ユーザーインタフェース（UI）を構築するためのフレームワークです。仮想DOMを活用しており、仕組みとしてはReactと類似点が多いです。 

大きな違いとしては、コードの記述方法にあります。Vueは『Templates』（HTML ベースのテンプレート構文）という記述方法を利用しており、冗長な記述を少なくできます。また、独自の規格やルールが少ないため、比較的好きなやり方で開発を行うことができます。 

Vueはシンプルかつ自由度が高いJavaScriptフレームワークです。そのため学習コストが低く、一般的な多くのWeb開発経験者にもなじみやすいものとなっています。 

3-2.こんな開発におすすめ 

小～中規模のWebアプリケーション開発（SPA) 

3-3.公式サイト 

https://jp.vuejs.org/index.html 

4.jquery

引用：https://jquery.com/

4-1.特徴 

• 全Webサイトの70%以上で使用されている 
• ブラウザに依存せず利用できる 
• 開発効率が格段に向上。JavaScriptより簡単かつ短いコードで実装できる 
• 高い拡張性。プラグインが多数リリースされている。 
• パフォーマンスは他のフレームワークに比べて劣る。純粋なJavaScriptよりも劣る 

jQueryは大変人気の高いフレームワークで、全WEBサイトの70%以上がjQueryを使用しているとも言われています。Webブラウザに依存せずどのブラウザでも同じコードで動作する点や、開発効率が高いこと、高い拡張性といった大きなメリットがあります。 

ただし、jQueryでは新しくjQueryオブジェクトというものを定義し、1からメソッドを追加することで実現しています。そのため、パフォーマンスは他のフレームワークと比較すると劣ります。「JavaScriptで記載できる部分ではjQueryは不要」といわれる場合もあります。 

また、jQuery1.2は公式に廃止しており、バージョンが新しくなっています。バージョンが変わると動作が変わることがあるため、常に最新バージョンを使用する対応が必要です。 

4-2.こんな開発におすすめ 

Webサイト制作 

Webアプリケーション開発 

4-3.公式サイト 

https://jquery.com/ 

適切なフレームワークを使って開発効率をあげよう 

今回ご紹介したJavaScriptフレームワークでも、開発規模により向き・不向きがあり、パフォーマンスや習得のしやすさといった点で違いがあります。本記事によりJavaScriptフレームワークを理解し、開発規模や状況にあったフレームワークを使用することで、効率よく開発しましょう。