未経験からエンジニア 奮闘記

未経験からエンジニアに自由に生きる途中

MENU

単一方向バインディングと双方向バインディングの違いとメリット・デメリットを理解する

背景

最近、UIライブラリのOSS開発者の方と話していて、「双方向バインディングは避けたほうが良い」と聞いて、ちょっと興味が湧きました。そこで、単一方向バインディングと双方向バインディングの違いやメリット・デメリットについてまとめてみました。

単一方向バインディングと双方向バインディングのメリット・デメリット

単一方向バインディング

メリット:

  • シンプルでわかりやすい: データの流れが一方向なので、コードの追跡が簡単。
  • デバッグが容易: データの変更が予測しやすく、バグが発生した際に原因を見つけやすい。
  • パフォーマンス向上: データの変更が少ないため、無駄な再レンダリングが減る。

デメリット:

  • コードが冗長になる: 状態管理が複雑な場合、コード量が増える。
  • 双方向の連携が面倒: 双方向のデータ連携が必要な場合、手動での更新が必要。

双方向バインディング

メリット:

  • 直感的: フォーム入力など、ユーザーのアクションに対して即時に反応できる。
  • コードが短くなる: 自動でデータが同期されるため、コード量が減る。

デメリット:

  • デバッグが難しい: データの流れが複雑になり、バグの原因を特定しにくい。
  • パフォーマンスの低下: 頻繁なデータの変更により、レンダリングが多発しやすい。

ReactとAngularでのサンプルコードを見比べてみます

Reactでの単一方向バインディング

import React, { useState } from 'react';

const SingleWayBinding = () => {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>{value}</p>
    </div>
  );
};

export default SingleWayBinding;

Reactの場合、valueが変更されると、再度レンダリングして新しい値を用いて、UIを変更してますよね。 これはデータ => UIの一方方向が実現できていると思います。 とても分かりやすいですね。

Angularでの双方向バインディング

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  value: string = '';
}

// app.component.html
<div>
  <input [(ngModel)]="value" type="text" />
  <p>{{ value }}</p>
</div>

一方で、Angularの場合は、value(データ)を用いてUIを表示して、inputからvalueが更新されると、ReactのようにonChangeの関数などのでデータを更新せずともUIからデータを更新できてしまう仕組みになっています。 これは便利な部分もあると思うのですが、データが絡みあっているのでデバックがしずらく可能性がありそうですね。

まとめ

個人的には、Reactの単一方向バインディングの方がデータフローがシンプルでメンテナンスしやすいと感じました。特に大規模なアプリケーションでは、単一方向バインディングの方がバグを避けやすいかもしれません。
単一方向バインディングと双方向バインディングにはそれぞれメリットとデメリットがあります。ユースケースによってどちらが適しているかは異なるため、絶対に単一方向バインディングが良いというわけではありません。自分のプロジェクトに合った方法を選ぶことが大切です。