JavascriptのフレームワークReact, Vue, Angularの違いを徹底比較
スポンサーリンク

あらすじ

有名なJavascriptのフレームワークといえば、まず上げられるのがJQueryではないでしょうか。

 

しかし、Javascriptのフレームワークには他にも多数あり、その中でも3大フレームワークと呼ばれるものがあります。

 

それが

  • React.js
  • Vue.js
  • Angular.js

です。

 


今回はこの3つに焦点を当てて、それぞれの歴史や特徴、メリット・デメリットを徹底比較していきたいと思います。

 

 

スポンサーリンク

Javascriptのフレームワーク

 

memo
フレームワークとは、すでに開発者用にファイルが作成されており、ユーザーはそのファイルをインストールするだけで利用できるテンプレートのようなものです。

CSSでいうところのBootstrapのようなものです。

 

CSSのフレームワークについてはこちら

 

Javascriptのフレームワークには大きく分けて2種類

Javascriptのフレームワークには大きく分けて2種類あります。

 

フロントエンド用のフレームワークバックエンド用のフレームワークです。

 

フロントエンド用のフレームワークには、上記でも言及しました

  • JQuery
  • React.js
  • Vue.js
  • Angular.js

といったものがあり、バックエンドにはNode.jsと呼ばれるフレームワークがあります。

 

今回はフロントエンドの中でも世界中で利用されており、Javascript三大フレームワークと呼ばれる

  • React.js
  • Vue.js
  • Angular.js

について、徹底比較していきたいと思います。

 

Github内での3大Javascriptフレームワークの比較

 

スポンサーリンク

React.js

 

まずは海外で一番人気があるReact.js(リアクト・ジェーエス)。

 

フロントエンドで利用されるJavascriptのライブラリです。 

 

主に(UI)ユーザーインターフェースの構築に使われます。

 

React.jsの歴史

 

2013年の5月にFacebookのエンジニア、Jordan Walker(ジョーダン・ウォーカー)さんによって開発されました。

 

現在ではFacebookの他に、多くの企業やコミュニティによってその技術が管理されており、更新も都度行われています。

 

React.jsの特徴

 

React.jsはSPAやモバイルアプリで利用されることが多いです。

 

SPAとは
SPAとはSingle page applicationの略で、ページの遷移をすることなく、一つのページ内であたかもページが切り替わっているかのように見せることができるアプリのことです。 

SPAを利用することでページを毎度更新する必要がないので、UXの向上が大幅に上がります。

 

また、React Nativeと呼ばれる、AndroidやiOS用のモバイルアプリ開発のために利用されるフレームワークも存在します。

 

Component(コンポーネント)と呼ばれる要素ごとに分けることができ、管理がしやすくカスタマイズしやすい特徴があります。

 

Componentとは
Componentとはレゴブロックのようなもので、一つ一つのレゴを組み合わせてwebページを作るようなイメージです。(わかりづらかったらすみません、、)

 

React.jsを実際に利用している企業

 

実際にReact.jsを利用して自社のwebサイトを開発している企業は数多くあります。

 

中でも有名なところでいうと

  • Facebook
  • Instagram
  • Yahoo
  • New York Times
  • Netflix
  • AirBnB

などが挙げられます。

 

React.jsのメリット

 

  • コンポーネント単位で管理ができるため、カスタマイズがしやすい。
  • SPAに特化しているため、他のフレームワークに比べてSPAが作りやすい。
  • 世界中で人気のあるフレームワークなので、React.jsを使えるだけで海外勤務もできる可能性が高まる。
  • Angular.jsとは違い、利用者人口が右肩上がり。

 

React.jsのデメリット

 

  • コンポーネントが増えすぎると管理が難しい。
  • Component を作る際にClass component(クラス・コンポーネント)とFunctional component(関数・コンポーネント)の2種類があるのでややこしい。
  • Functional componentが最新の技術ですが、ネットで検索すると大概class componentで書かれていることが多いです。
  • 勉強するのに時間がかかる。

 

React.jsを学ぶ際におすすめな書籍

 

Vue.js

 

続いてVue.js(ビュー・ジェーエス)について。

 

海外でもReact.jsと同じくらい人気のあるJavascriptのフレームワークです。

 

React.js同様(UI)ユーザーインターフェースの構築に使われます。

 

Vue.jsの歴史

 

2014年2月にGoogleのEvan You(エヴァン・ユー)さんによって開発されました。

他のフレームワークの中では一番歴史が浅いですが、その人気は年々高まっています。

 

Vue.jsの特徴

 

React.jsやAngular.jsに比べると比較的シンプルで利用がしやすく、他のフレームワークに比べてルールが柔軟なため、開発者の好みにアプリ開発ができるようになっています。

 

DirectiveというView.js独自の属性があり、HTMLなどの要素を比較的簡単に操作することができます。

 

React.jsと同様にComponent指向であり、小規模なプロジェクトに向いています。

 

Vue.jsを実際に利用している企業

 

  • Nintendo
  • Louis Viton
  • Slack
  • Apple
  • BMW

 

Vue.jsのメリット

 

  • React.jsやAngular.jsに比べて難易度は低めなため、習得まで時間はかからない。
  • 小規模のアプリ制作時にその力を発揮する。
  • 高機能なSPAを作ることができる。
  • Javascriptを事前に知っていれば、習得は比較的容易。
  • コード数が他のフレームワークに比べて少ない。
  • Htmlタグをそのまま利用することが可能。

 

Vue.jsのデメリット

 

大規模アプリ作成のプロジェクトの際は効率が悪い。

 

Vue.jsを学ぶ際におすすめな書籍

 

Angular.js

 

最後にAngluar.jsについて。

 

こちらもフロントエンドで利用されるJavascriptのライブラリで、他のフレームワーク同様(UI)ユーザーインターフェースの構築に使われます。

 

Angluar.jsの歴史

 

上記3つのフレームワークの中で、歴史が一番古いフレームワークです。

 

2009年にGoogleの他に個人やコミュニティによって開発されました。

 

また、2016年にはAngular.jsにとって変わるAngularがリリースされました。

 

Javascriptを利用していたAngular.jsとは違いAngularTypescriptを推奨言語としています。

 

Typescriptとは
Typescriptとはマイクロソフト社によって開発された、簡単に説明するとJavascriptの進化版のようなものです。

 

Angluar.jsの特徴

 

フルスタック対応しているので、大規模プロジェクトに向いており、初期の段階から必要な機能が備わっているのがAngular.jsの大きな特徴の一つです。

 

また、他のフレームワークに比べて歴史が古く、いまだに多くの人に利用されています。

 

Angluar.jsを実際に利用している企業

 

  • Microsoft
  • Forbes
  • Paypal
  • Samsung
  • Delta

 

Angluar.jsのメリット

 

  • フルスタック対応している。
  • 大規模なアプリを作成の際に、必要な機能が最初から備わっているため、他のフレームワークに比べて効率よく作成できる。

 

Angluar.jsのデメリット

 

  • Javascriptのみならず、Typescriptについての知識が必要。
  • 他のフレームワークに比べて難易度が高め。
  • 学習時間に時間がかかる。
  • React.jsやVue.jsの人気の方が高まっている。

 

Angular.jsを学ぶ際におすすめな書籍

 

まとめ

いかがだったでしょうか。

 

JavascriptのフレームワークはCSSなどのフレームワークとは違い習得まで比較的時間がかかります。

 

全てできるに越したことはありませんが、どれか一つを極めて、他のフレームワークを学習する方法がベストではないかと感じます。

 

ぜひ、この比較結果を元に自分に合ったフレームワークを選んでみてください。

 

注目
下記プログラミングスクールではわずか3ヶ月で未経験からプロのエンジニアになれるよう指導してくれます。さらにはスクール卒業後の転職率が98%です。まずは下記リンクから、無料ご相談を。

スポンサーリンク

Twitterでフォローしよう