最速でわかったつもりになるReact / Vue.js / Angularの違い

フレームワーク・ライブラリ	特徴
React	Scriptの中にHTMLを書く
Vue.js	HTMLの中にScriptを書く
Angular	HTMLとScriptを分けて書く

※ js, jsx, tsを Script と書いてます。

コードサンプル

公式チュートリアルから当該箇所のみ抜粋。

React

Scriptの中にHTMLを書く。

index.jsx

ReactDOM.render(
  <h1>Hello, world!</h1>, // Scriptの中にHTML
  document.getElementById('root')
);

Vue.js

HTMLの中にScriptを書く。

index.html

<div id="app">
  {{ message }}
</div>
<script> // HTMLの中にScript
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

Angular

HTMLとScriptを分けて書く。

welcome.component.ts

@Component({
  templateUrl: './welcome.component.html', //ここでHTMLを呼び出し
})
export class WelcomeComponent {
  message: string = 'Hello World!'
}

welcome.component.html

<div>{{message}}</div>

https://angular.io/tutorial/toh-pt1 をベースに改変。

まとめ

これを応用すると「Reactはフロントエンドエンジニアが強いチームに向いてる」とか、「Angularはチームで作業するのに向いてる」などと知ったように言えるのでおすすめ。

おまけ

ちなみに私はAngularをベースにしたモバイルアプリケーションフレームワーク「Ionic Framework」を使っています。Webアプリケーションだけではなく、iPhone/Androidアプリもリリースできておすすめです。

参考　Ionicでのアプリ開発の始め方

それでは、また。