トップQs
タイムライン
チャット
視点

データバインディング

ウィキペディアから

Remove ads

データバインディング（データバインド、データ結合、英: data binding）は、コンピュータプログラミングにおいて、データ（ソースオブジェクト）とそれに対応する対象要素（ターゲットオブジェクト）を結びつけ、データあるいは対象の変更を暗黙的に（自動的に）もう一方に反映（同期）することであり、またそれを実現する仕組みのことである[1]。データバインディングは特にGUIを持つアプリケーションソフトウェアの効率的な開発を目的とした技術であり、Model-View-ViewModel (MVVM) パターンの実現に必須の技術でもある[2]。

概要

GUIアプリケーションは画面上でテキストボックスやチェックボックス、ボタンなどのユーザー操作を受け付けるインタラクティブな要素を持つ。また、しばしばUIはデータを表示・操作するための役割を果たす。例えば従業員情報を管理するソフトウェアであれば、ダイアログ画面上で従業員の氏名や生年月日、住所などのプロパティを入力し、確定後にデータベースに反映するというような機能を持つが、古典的な実装では確定ボタンが押下された際に発生するイベントを処理するハンドラー（コールバック関数）を記述して、現在の画面上のテキストボックスに入力されている文字列やチェックボックスのON/OFF状態などを取得し、それらをプログラム内部で従業員を表す不可視データ（従業員レコードの各フィールド）に設定し、データベースに反映する。また、リストビューに一覧表示した従業員情報のひとつを選択してプロパティを変更する場合、リスト上で選択された行番号から従業員番号を特定し、データベースから読み出した現在の情報をもとにダイアログ画面上で対応するUI要素にそれぞれ設定して反映する必要がある。このようなプログラミングは一般的に煩雑であり、またデータの処理ロジックとUIの操作が密結合しがちになるため、プログラムのメンテナンス性が低下する。

データバインディングでは、明示的なUI要素の操作やデータの更新を用いてお互いの変更を反映するのではなく、それらを抽象化してアプリケーションフレームワーク側に隠蔽することで、片方の変更がもう片方の状態にも自動的に反映されるようにする。またデータバインディングを用いることにより、配列やリストのようなデータ構造（コレクション）をリストビューやグリッドで表示・操作することが簡単になる。データバインディングはSQLデータベースやXMLなどのデータソースとアプリケーションやウェブページ（ウェブアプリケーション）のユーザインタフェースを結合する際にしばしば用いられる[3]。データバインディングを基礎とするプログラミングスタイルをリアクティブプログラミング（英語版）と呼ぶ[4][5]。

Microsoft Windowsおよび.NET Framework/.NET Core環境では、XMLの独自拡張であるExtensible Application Markup Language (XAML) をUIの記述に利用するXAMLファミリーのUIフレームワークが充実している。XAMLフレームワークではデータバインディングを標準的にサポートし、XAML上のUI要素（ターゲット）のプロパティに、バインディングしたいデータ（ソース）のプロパティに関するパス情報を記述することで対応付けが行なわれる。

Remove ads

単方向バインディングと双方向バインディング

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

  • 単方向バインディング (one-way): 「ソース ⇒ ターゲット」あるいは「ターゲット ⇒ ソース」のみの一方向の暗黙的反映
  • 双方向バインディング (two-way): ソース ⇔ ターゲット間の双方向の暗黙的反映

データバインディングの実装例

要約
視点

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'));

その他

脚注

関連項目

Loading related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.

Remove ads
Remove ads