React vs Vue.js vs Angular.js 【データバインディング編】

## この内容について
この内容は、私が運営しているサイトの一部抜粋です。よければそちらもご活用ください。
[Reactチートシート | コレワカ](https://korenarawakaru.com/react/cheatsheet)
[Vue.jsチートシート | コレワカ](https://korenarawakaru.com/vue/cheatsheet)
[AngularJSチートシート | コレワカ](https://korenarawakaru.com/angular/cheatsheet)

## それぞれの特徴
|                  | React             | Vue.js            | AngularJS          |
|:-----------------|:------------------|:------------------|:-------------------|
| 特徴            　| 状態管理に特化したUI構築のためのライブラリ | トランスコンパイル不要なUI構築のためのライブラリ | 大抵の機能が全て揃うフルスタックなフレームワーク |
| 開発規模          | 小規模〜大規模 | 小規模〜中規模 | 中規模〜大規模 |
| 組み合わせ       　| Redux・TypeScript・webpack・babelなど | Vuex・Laravel・Firebaseなど | TypeScript・AWSなど |

## データバインディングとは
データと描画を同期する仕組みのこと

## それぞれのコード
### React
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="bGVmreY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="React_onChange">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/bGVmreY">
  React_onChange</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### Vue.js
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="MWaPjZM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js_v-model">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/MWaPjZM">
  Vue.js_v-model</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### AngularJS
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="bGVQjXB" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_ng-model">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/bGVQjXB">
  AngularJS_ng-model</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 簡単な解説
### React
Reactは、単方向データバインディングなので、
setStateでデータを保管し、changeイベンド(onChange)で、View ⇆ Modelを実現しています。
### Vue.js
Vue.jsは、双方向データバインディングなので、
Model関数(v-model)を使って、View ⇆ Modelを実現しています。

### AngularJS
AngularJSは、双方向データバインディングなので、
Model関数(ng-model)を使って、View ⇆ Modelを実現しています。

## おまけ
### jQueryで書いた場合
キーが押された時に処理を実行するkeyup関数とテキスト出力をするためのtext関数を使って、
View ⇆ Modelを実現しています。
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="mdegEbW" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_databinding">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/mdegEbW">
  jQuery_databinding</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>