2019/11/17 (更新日: 2021/02/14)

プログラミング

【2021年最新版】JavaScriptの人気フレームワーク4選を徹底比較してみた【jQuery・React・Vue・Angular】

『どのJavaScriptフレームワークを習得するか迷っている』

『最も人気なJavaScriptフレームワークはなんなの？』

このような疑問をお持ちの方は多いのではないでしょうか？

本記事ではJavaScriptの人気フレームワーク【jQuery・React・Vue・Angular】それぞれの特徴についての解説や、各フレームワークの徹底比較をしたいと思います。

JavaScriptは今やWeb系プログラマーには必須の技術となっており、『3年後仕事で使えそうなプログラミング言語』の調査では堂々の1位となっています。

あわせて読みたい現役エンジニアが思う「3年後に仕事で使えそうな言語」

JavaScriptの人気が上昇した理由の一つは、フレームワークの充実性が関連しています。

より自分にあったフレームワークを身に付けておけば、開発の効率性は圧倒的に向上しますので、もしどのフレームワークを使用するべきか悩んでいる方は本記事を参考にしてみて下さい。

JavaScriptフレームワークの特徴

jQuery

Webブラウザで稼働するJavaScriptをより簡単かつ効率的にコーディング出来るよう、便利な機能がまとめられているフレームワークです。JavaScriptよりも短いコードで実装可能であるため、短縮簡易版として使用できます。

皆さんはjavascriptを使用していて、「記述が冗長でめんどくさいな…」と感じたことがありませんか…？

jQueryはそのようなお悩みを解決してくれます！

以下コード例です。どちらも同じ挙動を表しています。（id=”test”のclass属性を抽出）

/* JavaScript */
document.getElementByID(‘test’).getAttribute(‘class’)

/* jQuery */
$(‘#test’).attr(‘class’)

このように、jQueryではJavaScriptの冗長な記述をコンパクトにしてくれます。

その他にも、ブラウザの違いを吸収してどのブラウザでも同じコードで動作するようにしてくれたり、読み込みや拡張が安易に行えるといった特徴があります。

ただjQueryでは、新しくjQueryオブジェクトというものを定義し、1からメソッドを追加することで実現しているため、パフォーマンス的にはあまりよくないです。

ただ、それでも現在存在するWEBサイトの70%以上ではjQueryが使用されており、まだまだ現場でも愛用されているライブラリですので、十分学ぶ価値はあるかと思います。

特徴

JavaScriptより簡単かつ短いコードで実装可能(短縮簡易版)
全Webサイトの70%以上で使用されている
パフォーマンスは他のフレームワークに比べて劣る

おすすめ書籍

jQuery最高の教科書

created by Rinker

¥2,838 (2021/04/11 21:44:02時点 Amazon調べ-詳細)

React

Reactでは、仮想DOMというものを設計してからDOMを作成するため、処理のスピードが速くWebページの表示を高速で切り替えることができます。

最近人気なSPA(Single Page Application)に必要な高速な動作速度を再現できるため、SPAと非常に相性のいいライブラリです。

また、Reactは『JSX』という記述方法を利用しています。JSXとは、HTML風に書けるJavaScriptの拡張構文でして、React要素を簡便な形式で作成することができます。

ただし、見た目はHTMLとは大きく異なり、CSSもJSXに組み込むように書くことが多いので、初めは見慣れずに違和感を感じるかもしれません。

以下コード例です。


function formatName(user) { 
  return user.name + 'is' + user.years + 'years old.' 
} 

const user = { name: 'Takuya', years: '18' }; 

const element = ( {formatName(user) }

ReactDOM.render(
  element,
  document.getElementById('root')
);

このように、JSとHTMLが組み合わさった記述となっています。

また、Reactを習得することで、React Nativeも扱えるようになります。React Nativeとは、Reactを利用してAndroidやiOSアプリを開発できるようにしたものです。

【Instagram・Facebook・Skype】などの有名アプリはReact Nativeによって作られています。もし「Webもアプリも両方開発したい！」という方はReactを学ぶことをおすすめします。

特徴

仮装DOMのため、処理スピードが早い
記述方式はJavaScriptの拡張構文『JSX』
Reactを習得することで、アプリ開発に特化したReact Nativeも扱える

おすすめ書籍

React.js&Next.js超入門

created by Rinker

¥3,300 (2021/04/11 23:10:24時点 Amazon調べ-詳細)

Vue

Vueは、仮想DOMの活用しており、コンポーネント構造のためReactと類似点が多いです。

大きな違いとしては、コードの記述方法にあります。Vueは『Templates』（HTML ベースのテンプレート構文）という記述方法を利用しています。Templatesは、冗長な記述なしに『HTML/CSS』を中心に書けるのが特徴です。

以下コード例です。

<template>
  <p>{{ name }} is {{ years }} years old.</p>
</template>

<script>
module.exports = {
  data: function () {
    return {
      name: 'Takuya',
      years: '18'
    }
  }
}
</script>

<style scoped>
p {
  color: #333
}
</style>

Vueでは基本的にHTML・JS・CSSを3つのエリアに分けて記述するため、一般的な多くのWeb開発経験者は取り組み安いかと思います。

このように、Vueはシンプルかつ自由度が高いJavaScriptフレームワークで、学習コストが低いため多くのエンジニアが愛用しています。

特徴

Reactと類似点が多い
記述方式は、HTML/CSSを中心に書ける『Templates』
学習コストが比較的低い

おすすめ書籍

基礎から学ぶ Vue.js

created by Rinker

¥3,434 (2020/07/05 04:20:05時点 Amazon調べ-詳細)

Angular

Angularの一番の特徴はフルスタックということです。ルーティングを含め、webアプリケーションに必要な機能すべてが最初から備わっています。

一見フルスタックというのはメリットしかないように思えますが、デメリットもあります。

最初から機能が全部備わっているため、ライブラリ選びに時間を費やさずに済みますが、不要な機能を排除できないデメリットがあります。そのため、小規模なプロジェクトならインポートする方が効率的なのに、依存性の注入（DI）をすることで、得られる利点以上に負荷がかかるという問題が起きるので注意が必要です。

開発の規模としては、大規模なプロジェクト向きです。始めからAngular流で進めなければならないため、ちょっと試すという使い方は難しいでしょう。堅牢さと厳密さはフレームワークの中で最も高いです。

特徴