JavaScriptでデータバインドを実装する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでデータバインドを実装する方法について解説しています。JavaScriptでデータバインドを実装する場合、Object.observeメソッドを使います。その書き方と実装手順について見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでデータバインドを実装する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

データバインドを実装する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

データバインドとは

データバインドとは、広義な意味では「要素とデータを紐つける」ことを指し、「紐づけるだけでなく、どちらかの内容を変更するともう片方も自動で変更される。」といった機能を持ち合わせているものをデータバインドといえます。

WEBでいうとHTML要素とオブジェエクトをデータバインドして要素の変更に合わせた表示変更を行ったり、WEBアプリであれば、表示変更とDBの変更をあわせたりなどの応用も含めてデータバインドと言われることもあります。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

Object.observeメソッドとは

Object.observeメソッドとは、「オブジェクトの値の変更をObserve(検知)して、コールバックを実行する」ことです。

これにより、オブジェクトの変更に合わせてデータの内容も変更させられます。

Object.observeは、現状では廃止されているため、動かないこともある点には注意が必要です。

 

Object.observeメソッドの使い方

observeの簡単な書き方として、下記のように記述しましょう。

Object.observe(obj, function(changes) {

  console.log(changes);

});

“obj”は変更を検知したい対象です。

“obj”に変更があれば、都度このファンクションが呼び出されて、中の処理が実行されます。

functionのあとの”changes”の部分は、任意で変更することが可能であり、変更する度に検知されます。

 

データバインドを実装する方法

observeを利用したデータバインドの実装方法についてみていきましょう。

はじめに対象のオブジェクトを宣言します。

var obj = {

 title: 'Object.observe'

};

var obj_copy = {

 title: ’’

};

続いて、

// 監視用のコールバックを定義します

function observer(changes){

 // 変更分の反映

 changes.forEach(function(change, i){

  obj_copy.title = obj.title;

 });

}

 最後にObject.observeでオブジェクトをを監視して、 変更があればobserverを呼び出します

Object.observe(model, observer);
これで、objにされた変更がobj_copyに自動で反映することが可能です。

 

実際に書いてみよう

<html>

 <head>

  <metacharset="UTF-8">

  <title>JavaScriptでデータバインドを実装する方法を現役エンジニアが解説【初心者向け】</title>

 </head>

 <body>

  <selectname=”Animal”id='event'>

   <optionvalue=”Cat”>猫</option>

   <optionvalue=”Dog”>犬</option>

   <optionvalue=”Bard”>鳥</option>

  </select>

  <script>

   consttarget = document.getElementById('event')

   // 監視用コールバックを定義

   functionobserver(changes){




    // changesのlengthを見てみる

    console.log('changes length: ' + changes.length);

    changes.forEach(function(change, i){

    console.log("[change " + i + "]");

    console.log(change.name); // 変更があったpropertyの名前

    console.log(change.type); // 変更の種類

   });

  }

  // Object.observeでmodelを監視

  // 変更があればobserverを呼び出す

  Object.observe(target, observer);

  </script>

 </body>




</html>

 

まとめ

実際にこのサンプルを利用してみても動かない方もこともあるでしょう。

実は「Object.observe」がすでに廃止されているAPIだからです。

まだ動くブラウザーもあるものの処理として、非推奨となっており、今は「Object.observe」の代わりに「Proxy」を利用する点には注意しましょう。

 

執筆してくれたメンター

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

JavaScriptでデータバインドを実装する方法分かりやすくて良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。