過去にphpのマジックメソッドを使ってRailsのfind_all_by_*メソッドを実装してみる | WEB EGGという記事を書いたのですが、Node.jsでもProxyの登場により、似たようなことができるのでは？ と思ったので試してみました。
\n今回の題材は、同じくRailsのActiveRecordから、ActiveModel::Dirtyモジュールです。
\nperson = Person.new\nperson.changed? # => false\n\nperson.name = 'Bob'\nperson.changed? # => true\nperson.name_changed? # => true\nperson.name_was # => nil\nperson.name_change # => [nil, \"Bob\"]\nperson.name = 'Bill'\nperson.name_change # => [nil, \"Bill\"]こんな感じに変更を検知するためのマジックメソッド、ユーティリティが加わるモジュールだそうです。
\n昔であればBackbone.jsのモデルが似たような仕組みを提供していました。
\nですが、あれば独自のセッタを提供しており、それを利用しているから変更が検知できるという仕組みです。 いわば白魔術です
今回は、 独自のセッタ を提供せず、普通にオブジェクト操作しているだけで変更検知ができちゃう機能の実装を目指します。
\n白魔術に対して言うなれば、黒魔術です。
ちなみに使用しているNode.jsのバージョンはv6.1.0です。
\n\nモジュールは高階関数として作成し、使用する際はdecoratorとして利用できるようにします。
\nなので継承関係によらず、任意のクラスに対して適応可能です。
\nざっくりしたイメージとしてはPHPでいうところのtrait、Rubyでいうところのinclude相当だと思ってもらえればいいと思います
@DirtyCheckable\nclass Profile {\n constructor (name) {\n this.name = name\n }\n}コンストラクタの形式は問いません。thisに何かセットされていればそれを利用できるようにします。 こんな感じで利用できるDirtyCheckable関数を実装していきます
完成済みのコードはgistに上げてあります。
\ndecoratorはReactでHigh Order Componentsなんて言われて流行ってますが、要は昔からある関数型言語のアプローチのひとつ、高階関数です。
\n\n\n\n
一応、先程のコードをjsのコードにするとこんな感じになります
\nconst Profile = DirtyCheckable(class {\n constructor (name) {\n this.name = name\n }\n})DirtyCheckableの要件は、クラスを受け取りクラスを返す関数になります。 実装イメージとしては、以下のような感じになります。
\nfunction DirtyCheckable (cls) {\n return class extends cls {\n // ...\n }\n}継承の逆？ と言えば伝わるんでしょうか。
\n渡されたクラスを親クラスにとる無名クラスを作成して返す感じです。
Proxy自体の説明はMDNを見ればだいたいわかると思います。
\nconst obj = new Proxy({}, { set (instance, prop, value) { console.log(`${prop}=${JSON.stringify(value)}`) instance[prop] = value } })\n\nobj.hoge = 1実行するとhoge=1と出力されたと思います。
\nこんな感じで、ただのオブジェクト操作をフックすることが可能になります。
setの中身を実装することで、dirty checkを実装できます。 同様にgetの中身を実装することで、method missingも実装できます。
\nコードは以下のような感じです。
\n// dirty checkするためのクラス\nclass DirtyChecker {\n // TODO: Implement dirty check\n}\n// get, setをフックするもの\nconst observer = {\n get (instance, prop) {\n // TODO: Implement method missing\n },\n set (instance, prop, value) {\n // TODO: Implement dirty check\n },\n}\n// 与えられたオブジェクトに応じてDirtyCheckerのインスタンスを作成する\nexport function createDirtyCheckers (obj) {\n const dirties = {}\n for (let prop of Object.getOwnPropertyNames(obj)) {\n dirties[prop] = new DirtyChecker(obj[prop])\n }\n return dirties\n}\nexport default function DirtyCheckable (cls) {\n return class extends cls {\n constructor (...args) {\n super(...args)\n this.dirties = createDirtyCheckers(this)\n return new Proxy(this, observer)\n }\n }\n}上記のコードをベースに実装を続けます。
\n早速実装します。DirtyCheckerはただのユーティリティなので実装はgistを御覧ください。
\n先述のコードのobserverのsetを実装します。
\ninstanceは呼び出し元のインスタンスを指します。
なので、this.dirties = instance.dirtiesです。
\nということで、DirtyChecker#setをコールするだけです。
instance[prop] = valueを忘れるとインスタンスに値が反映されないのでご注意下さい。
set (instance, prop, value) {\n instance.dirties[prop] = instance.dirties[prop] || new DirtyChecker()\n instance.dirties[prop].set(value)\n instance[prop] = value\n}これで変更検知の仕組みは完成したので、後はユーティリティを実装します。
\nexport default function DirtyCheckable (cls) {\n return class extends cls {\n\n // ...\n\n changed () {\n for (let prop in this.dirties) {\n if (this.dirties[prop].changed()) {\n return true\n }\n }\n return false\n }\n\n changes () {\n const changes = {}\n for (let prop in this.dirties) {\n if (this.dirties[prop].changed()) {\n changes[prop] = this.dirties[prop].changes()\n }\n }\n return changes\n }\n }\n}試してみます。
\n@DirtyCheckable\nclass Profile {\n constructor (name) {\n this.name = name\n }\n}\n\nconst hoge = new Profile('John')\n\nconsole.log('hoge.name:', hoge.name)\nconsole.log('changes:', hoge.changes())\nconsole.log('changed:', hoge.changed())\n\nhoge.name = 'Tom'\n\nconsole.log('hoge.name:', hoge.name)\nconsole.log('changes:', hoge.changes())\nconsole.log('changed:', hoge.changed())実行結果は
\n$ babel-node index.js\nhoge.name: John\nchanges: {}\nchanged: false\nhoge.name: Tom\nchanges: { name: [ 'John', 'Tom' ] }\nchanged: trueいい感じです。
\n各プロパティごとの*Was, *Changed, *Changeメソッドはmethod missingを利用して実装します。
今度はobserverのgetを実装していきます
という感じです。
\nconst fallbackSuffixes = {\n Changed (instance, prop) {\n return instance.dirties[prop].changed()\n },\n\n Change (instance, prop) {\n return instance.dirties[prop].changes()\n },\n\n Was (instance, prop) {\n return instance.dirties[prop].was()\n },\n}\n\nconst observer = {\n get (instance, prop) {\n if (typeof instance[prop] !== 'undefined') {\n return instance[prop]\n }\n\n for (let suffix in fallbackSuffixes) {\n if (prop.endsWith(suffix)) {\n const propName = prop.slice(0, -suffix.length)\n if (instance[propName]) {\n return fallbackSuffixes[suffix].bind(null, instance, propName)\n }\n }\n }\n },\n\n // ...\n}完成です。ここまでのコードを纏めて実行してみると、
\n@DirtyCheckable\nclass Profile {\n constructor (name) {\n this.name = name\n }\n}\n\nconst hoge = new Profile('John')\n\nconsole.log('hoge.name:', hoge.name)\nconsole.log('nameWas:', hoge.nameWas())\nconsole.log('nameChanged:', hoge.nameChanged())\nconsole.log('nameChange:', hoge.nameChange())\n\nhoge.name = 'Tom'\n\nconsole.log('hoge.name:', hoge.name)\nconsole.log('nameWas:', hoge.nameWas())\nconsole.log('nameChanged:', hoge.nameChanged())\nconsole.log('nameChange:', hoge.nameChange())$ babel-node index.js\nhoge.name: John\nnameWas: John\nnameChanged: false\nnameChange: [ 'John', undefined ]\nhoge.name: Tom\nnameWas: John\nnameChanged: true\nnameChange: [ 'John', 'Tom' ]いい感じです。これでdirty checkとmethod missingの実装が完了しました。
\n最後に気になるパフォーマンスですが、こんなコードで比較してみます
\n100,000回同じ処理をしてみてどれくらいコスト差があるか比べてみました。
\n| メソッド | \nProfileWithDirty | \nProfile | \n
|---|---|---|
| new | \n244 ms | \n6 ms | \n
| set | \n29 ms | \n5 ms | \n
| get | \n35 ms | \n1 ms | \n
| methodCall | \n63 ms | \n3 ms | \n
newが激遅いです。
\n他も優位な差が出ているものの、10万回で数十ms程度の差なら無視しても良いレベルではないでしょうか。
かなり愚直な方法で実装しているので、もっと早い実装がたくさんあると思います。 使いみちが色々あって面白いので、ぜひProxy利用してみて下さい。 ただしよほど丁寧に書かないと黒魔術化は必至なので、用法用量をお守りのうえお楽しみ下さい。
","timeToRead":8,"frontmatter":{"title":"Node.jsのProxyでdirty checkとmethod missingを実現してみる","tags":["JavaScript","Nodejs","Proxy","Ruby"],"date":"June 07, 2017","featuredImage":null}}},"pageContext":{"slug":"/how-to-implement-dirty-check-and-method-missing-with-nodejs/","previous":{"fields":{"slug":"/knowhow-of-circleci-1/"},"frontmatter":{"title":"CircleCI 1.0でDockerやdocker-composeを使用する際の制限と気をつけること","tags":["CI","CircleCI","Docker","Docker compose"]}},"next":{"fields":{"slug":"/es2017-object-syntax/"},"frontmatter":{"title":"シンプルすぎて難解？昨今のNode.jsのオブジェクト周りの構文をまとめてみた","tags":["JavaScript","Nodejs"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}