Angular
vue
React

最速でわかったつもりになる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')
);

https://reactjs.org/docs/hello-world.html


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>

https://vuejs.org/v2/guide/


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-lab.png

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

それでは、また。