データバインディング（データバインド、データ結合、）は、コンピュータプログラミングにおいて、データ（ソースオブジェクト）とそれに対応する対象要素（ターゲットオブジェクト）を結びつけ、データあるいは対象の変更を暗黙的に（自動的に）もう一方に反映（同期）することであり、またそれを実現する仕組みのことである。データバインディングは特にGUIを持つアプリケーションソフトウェアの効率的な開発を目的とした技術であり、Model-View-ViewModel (MVVM) パターンの実現に必須の技術でもある。
概要 GUIアプリケーションは画面上でテキストボックスやチェックボックス、ボタンなどのユーザー操作を受け付けるインタラクティブな要素を持つ。また、しばしばUIはデータを表示・操作するための役割を果たす。例えば従業員情報を管理するソフトウェアであれば、ダイアログ画面上で従業員の氏名や生年月日、住所などのプロパティを入力し、確定後にデータベースに反映するというような機能を持つが、古典的な実装では確定ボタンが押下された際に発生するイベントを処理するハンドラー（コールバック関数）を記述して、現在の画面上のテキストボックスに入力されている文字列やチェックボックスのON/OFF状態などを取得し、それらをプログラム内部で従業員を表す不可視データ（従業員レコードの各フィールド）に設定し、データベースに反映する。また、リストビューに一覧表示した従業員情報のひとつを選択してプロパティを変更する場合、リスト上で選択された行番号から従業員番号を特定し、データベースから読み出した現在の情報をもとにダイアログ画面上で対応するUI要素にそれぞれ設定して反映する必要がある。このようなプログラミングは一般的に煩雑であり、またデータの処理ロジックとUIの操作が密結合しがちになるため、プログラムのメンテナンス性が低下する。
データバインディングでは、明示的なUI要素の操作やデータの更新を用いてお互いの変更を反映するのではなく、それらを抽象化してアプリケーションフレームワーク側に隠蔽することで、片方の変更がもう片方の状態にも自動的に反映されるようにする。またデータバインディングを用いることにより、配列やリストのようなデータ構造（コレクション）をリストビューやグリッドで表示・操作することが簡単になる。データバインディングはSQLデータベースやXMLなどのデータソースとアプリケーションやウェブページ（ウェブアプリケーション）のユーザインタフェースを結合する際にしばしば用いられるデータバインディングは、Custom Element(ホストエレメント)のデータとそのローカルDOM(子エレメントまたはターゲットエレメント)のプロパティまたは属性にコネクトします。 データバインディング. Polymer Japan。データバインディングを基礎とするプログラミングスタイルをと呼ぶリアクティブシステムです。モデルは単なるプレーンな JavaScript オブジェクトです。それらを変更するとビューが更新されます。 リアクティブの探求 - Vue.jsreactive UIs using the React framework View integrations - Apollo。
Microsoft Windowsおよび.NET Framework/.NET Core環境では、XMLの独自拡張であるExtensible Application Markup Language (XAML) をUIの記述に利用するXAMLファミリーのUIフレームワークが充実している。XAMLフレームワークではデータバインディングを標準的にサポートし、XAML上のUI要素（ターゲット）のプロパティに、バインディングしたいデータ（ソース）のプロパティに関するパス情報を記述することで対応付けが行なわれる。
単方向バインディングと双方向バインディング データバインディングには変更反映の方向性によって以下の2種類が存在する方法: バインディングの方向を指定する - WPF .NET Framework | Microsoft DocsXamarin.Forms のバインディング モード - Xamarin | Microsoft Docs。
単方向バインディング (one-way): 「ソース ⇒ ターゲット」あるいは「ターゲット ⇒ ソース」のみの一方向の暗黙的反映 双方向バインディング (two-way): ソース ⇔ ターゲット間の双方向の暗黙的反映
データバインディングの実装例
React Reactはhookと呼ばれる仕組みで一方向バインディングを実現している。
React専用関数 hook（useX）でデータ変数を定義し、UIを宣言する際にデータ変数を用いることでバインディングを行なう。その後、hookから返された更新関数（setXと慣習的に名付けられる）に新しいデータを渡すことでUIの更新が暗黙的にスケジューリングされる。hookは関数であるため一般には状態の保持は行なえないが、hookはReactの内部リストへアクセスすることで状態を保持している通常、関数が終了すると変数は『消えて』しまいますが、state 変数は React によって保持されます。ステートフックの利用法 - Reactそれぞれのコンポーネントに関連付けられる形で、React 内に「メモリーセル」のリストが存在しています。... useState() のようなフックを呼ぶと、フックは現在のセルの値を読み出し（あるいは初回レンダー時はセル内容を初期化し）、ポインタを次に進めます フックに関するよくある質問 - React。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'));
その他
Adobe Flex Android - AndroidXデータバインディングライブラリデータ バインディング ライブラリ | Android デベロッパー | Android Developers C/C++ Codalogic LMX CodeSynthesis XSD XBinder Xmlbeansxx Cocoa Binding (macOS) SwiftUI Dynamic HTML (Internet Explorer) .NET ADO.NET (LINQ to SQL)データ バインディング - ADO.NET | Microsoft Docs ASP.NET Windows Formsデータ バインディング - Windows Forms .NET Framework | Microsoft Docs Windows Presentation Foundation (WPF) - XAMLベース Microsoft Silverlight - XAMLベース Xamarin.Forms - XAMLベース Spring.NET iBATIS (iBATIS Data Mapper framework) Java Apache Struts Apache XMLBeans Castor CookXml EMF (Eclipse Modeling Framework) Hibernate JAXB (Java Architecture for XML Binding) JiBX Oracle ADF (Application Development Framework) Spring Framework JavaScript OpenLaszlo Aurelia Liquid XML ユニバーサルWindowsプラットフォーム (UWP) アプリ - Windowsランタイム、XAMLベース
脚注
関連項目 シリアライズ オブジェクト関係マッピング Model-View-ViewModel Extensible Application Markup Language (XAML)