データバインディング

出典: フリー百科事典『ウィキペディア(Wikipedia)』
ナビゲーションに移動 検索に移動

データバインディング(データバインド、データ結合)は、データと対象を結びつけ、データあるいは対象の変更を暗示的にもう一方の変更へ反映すること、それを実現する仕組みのことである[1]

明示的なUIの操作・更新を用いてデータをUIへ反映するのではなく、その操作を抽象化することでデータの変更が自動的にUI変更へ反映されるようにする。XMLなどのデータソースとアプリケーションやウェブページ(ウェブアプリケーション)のユーザインタフェースを結合する際にしばしば用いられる[2][3]ウェブアプリケーションの文脈では、データバインディングが実現していることをリアクティブと呼ぶ場合もある[4][5]

一方向バインディング・双方向バインディング[編集]

データバインディングには変更反映の方向性によって以下の2種類が存在する。

  • 一方向バインディング(1way): data ⇒ target あるいは target ⇒ data のみの一方向な暗示的反映[6]
  • 双方向バインディング(2way): data ⇔ target の双方向な暗示的反映[7]

データバインディングの実装例[編集]

React[編集]

Reactはhookと呼ばれる仕組みで一方向バインディングを実現している。

React専用関数 hook(useX)でデータ変数を定義し、UIを宣言する際にデータ変数を用いることでバインディングをおこなう。その後、hookから返された更新関数(setXと慣習的に名付けられる)に新しいデータを渡すことでUIの更新が暗示的にスケジューリングされる。hookは関数であるため一般には状態の保持はおこなえないが、hookはReactの内部リストへアクセスすることで状態を保持している[8][9]

function MyComp(){
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>hello, myComp {count}</button>
    </div>
  );
}
ReactDOM.render(<MyComp />, document.getElementById('root'));

その他[編集]

脚注[編集]

[ヘルプ]
  1. ^ データ バインディングは、2 つのオブジェクトのプロパティをリンクして、片方のプロパティへの変更が自動的にもう片方のプロパティに反映されるようにする手法です。Xamarin.Forms のデータ バインディング. Microsoft
  2. ^ レイアウト内の UI コンポーネントをアプリのデータソースにバインド Data Binding Library. Androidデベロッパー
  3. ^ データバインディングは、Custom Element(ホストエレメント)のデータとそのローカルDOM(子エレメントまたはターゲットエレメント)のプロパティまたは属性にコネクトします。 データバインディング. Polymer Japan
  4. ^ リアクティブシステムです。モデルは単なるプレーンな JavaScript オブジェクトです。それらを変更するとビューが更新されます。 リアクティブの探求 - Vue.js
  5. ^ reactive UIs using the React framework View integrations - Apollo
  6. ^ OneWay – データはソースからターゲットに移動します OneWayToSource – データは、ターゲットからソースに移動します Xamarin.Forms のバインディング モード. Microsoft
  7. ^ TwoWay – データは、ソースとターゲット間で両方向に移動します Xamarin.Forms のバインディング モード. Microsoft
  8. ^ 通常、関数が終了すると変数は『消えて』しまいますが、state 変数は React によって保持されます。ステートフックの利用法 - React
  9. ^ それぞれのコンポーネントに関連付けられる形で、React 内に「メモリーセル」のリストが存在しています。... useState() のようなフックを呼ぶと、フックは現在のセルの値を読み出し(あるいは初回レンダー時はセル内容を初期化し)、ポインタを次に進めます フックに関するよくある質問 - React

関連項目[編集]