Object.observe()は使えなくなる

公開:2015-11-18 05:44
更新:2020-02-15 04:37
カテゴリ:javascript,knockout.js,webaudiomodular,d3.js

今作っているWeb Audio APIデモのシーケンス・エディタのデータ・バインディング部分をどうしようかなと検討していたところ、衝撃の情報が。

http://tech.nitoyon.com/ja/blog/2015/11/18/death-of-oo/

ちょうどオブジェクトの更新とUIからの反映をどうしようかと考えていたところだった。knockoutやAngularなどのMVVMは便利だが、d3.jsとの連携を考えると冗長な感じがする。d3.jsってデータ・バインド的機能も持っているからね。ただオブジェクトが変更されたら即UIに反映させるには工夫が必要だ。そのあたりはknockoutやAngularはしっかりとやってくれるけど、データ・モデルを別に作らなくてはいけなかったりしてちょっと面倒な感じがするのである。

そこでデータ・モデル(オブジェクト)に対して手を加える(例えばEventEmitterを継承して変更したらイベントを発火し、UI側でキャッチさせる)か、Object.observe()で監視するかで悩んでいた。Object.observe()を使うとオブジェクトに手を加える必要がなくなる代わりに、動作する環境が制限されてしまう(ChromeかOpera)。でもES7で規格化されるし、もう少ししたらElectronベースに移行するから使ってもいいかなーと思っていたところだった。

ちゅうわけでObject.observe()を使う選択肢はなくなったわけだけど、惜しい機能ではあるね。仕様的にはオブジェクトの特定プロパティを監視することができなかったし、非同期だからUIとの連携ということを考えるとちょっと癖のあるものだったけれどもね。

で、今考えているのはデータ・モデル(オブジェクト)にEventEmitter(ブラウザ側なのでそれに相当するもの)を継承して変更イベントを発火させるか、MVVM/MVCライブラリを使うかだけどね。まあ流行りのAngular/Reactあたりを勉強がてら使ってみるというのもいいかもしれない。でもd3.jsをUI構築の中心に置くと、やっぱり冗長・複雑な気がするんだよなぁ。実装しようとしている機能の割に。。