React と Vue から単方向・双方向データバインディングの違いを知る

私は React 以外でフロントエンドを開発しなかったせいか、 双方向データバインディングを理解するのに時間がかかりました。

2つのデータバインディング（単方向・双方向）をサンプル実装したところ、理解しやすかったです。
今回はそれぞれを以下のライブラリを使用して実装しました。

- 単方向データバインディング：React
- 双方向データバインディング：Vue

## 結論

![Screen Shot 2021-02-14 at 22.23.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186009/191b9aa0-78ca-74b1-c5c9-ef5dda239a22.png)

- 単方向データバインディング
    - データの変更が View に自動的に反映される
    - View の変更をデータに反映させるには、イベントハンドラを使用したデータ更新処理が必要
- 双方向データバインディング
    - データの変更が View に自動的に反映される
    - View の変更がデータに自動的に反映される

## 詳細な説明
### データバインディングとは？
データバインディングの定義を知ることで、全容を把握しやすくなりました。
Wikipedia には、以下のように説明されています。

> データバインディング（データバインド、データ結合）は、データと対象を結びつけ、データあるいは対象の変更を暗示的にもう一方の変更へ反映すること、それを実現する仕組みのことである
>
> 引用元：[ウィキペディア（Wikipedia）](https://ja.wikipedia.org/wiki/%E3%83%87%E3%83%BC%E3%82%BF%E3%83%90%E3%82%A4%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0)

キーワードは **暗示的** という言葉で、片方に変更があった場合にもう片方を **自動的** に変更することを指します。

### 単方向データバインディング
React は基本的に単方向データバインディングで実装されます。
双方向データバインディング用のヘルパーも用意されていますが、 v15 で非推奨になっています。

React ではデータの変更があった場合、その変更が View に自動的に反映されます。
一方で View の変更をデータに反映する場合は、イベントハンドラでデータ更新処理を実装する必要があります。

![Screen Shot 2021-02-14 at 22.26.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186009/ee43cb06-9e29-da54-bf45-da6597dbc7c9.png)

サンプルコードは以下になります。
フォームに文字を入力したら、 onChange イベントハンドラに設定した処理が実行され、データが更新されます。
データが変更されたため、 View が自動的に更新され、フォームの下にデータが再表示されます。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="tamago3keran" data-slug-hash="eYBgbQv" 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_hooks_databinding_example">
  <span>See the Pen <a href="https://codepen.io/tamago3keran/pen/eYBgbQv">
  react_hooks_databinding_example</a> by takuma yamamoto (<a href="https://codepen.io/tamago3keran">@tamago3keran</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 双方向データバインディング
Vue は双方向データバインディングの機能を提供しています。

先述の例と同様に、データが変更されると、その変更が View に自動的に反映されます。
一方で先述の例とは異なり、イベントハンドラを実装しなくても、 View の変更がデータに自動的に反映されます。

![Screen Shot 2021-02-14 at 22.27.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186009/82e03771-7d45-fc14-bc45-145c9b8a0b7c.png)

サンプルコードは以下になります。
フォームに文字を入力したら、 自動的にデータが更新されます。
データが変更されたため、 View が自動的に更新され、フォームの下にデータが再表示されます。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="tamago3keran" data-slug-hash="yLVgGEO" 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_databinding_example">
  <span>See the Pen <a href="https://codepen.io/tamago3keran/pen/yLVgGEO">
  vue_databinding_example</a> by takuma yamamoto (<a href="https://codepen.io/tamago3keran">@tamago3keran</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 参考
- [データバインディング \- Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%87%E3%83%BC%E3%82%BF%E3%83%90%E3%82%A4%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0)
- [MVVMとは \- Webフロントエンド開発 🔰\(WIP\)](https://docs-f.mix-soft.com/article/mvvmtoha#:~:text=MVVM%E3%81%AF%20%E3%83%A2%E3%83%87%E3%83%AB%E3%81%8B%E3%82%89%E3%83%93%E3%83%A5%E3%83%BC,UI%E3%82%92%E9%96%A2%E9%80%A3%E4%BB%98%E3%81%91%E3%82%8B%E4%BB%95%E7%B5%84%E3%81%BF%E3%81%A7%E3%81%99%E3%80%82)