フレームワーク・ライブラリ | 特徴 |
---|---|
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アプリもリリースできておすすめです。
それでは、また。