「React / Flux を実案件で使ってみた」その後

2015/02/16 歌舞伎座.tech#6「VirtualDOMとReact」

自己紹介

Name : Takuto Wada
github : twada
twitter : t_wada
hatena : t-wada
TDD とライオンの人
power-assert の人

React / Flux を知ったきっかけ

mizchi さんのエントリ (あなたがReactを使うべき理由) だったと思う
日本語の情報はほとんど無かったが、エッジ系の人たちが騒ぎ出した & 海外で圧倒的に事例が増え出したので興味を持った
Rendr の AirBnb が React を使い始めたことを知り、これは決定的だと思った

React をどう勉強したか

公式ドキュメントとチュートリアルが充実している
まず Tutorial をそのまま写経
次に browserify + reactify で Tutorial をもう一周やってみる (showdown は browserify 対応していないので marked に変更。 jQuery も Fetch API Polyfill に入れ替えてみる)
Thinking in React で思想を学ぶ
koba04 さんの Get Started React.js でとどめを刺す
気になった情報はブクマしておく

今なら React をどう勉強するか

いまから学ぶなら koba04 さんの一人React.js Advent Calendar 2014 がまず最初にオススメ
Flux react現状確認会の資料も良い
mozaic.fm の mizchi 回 #13 Virtual DOM, #13 Virtual DOM sideshow を聴く

Flux をどう勉強したか

概念から理解しようと思うと混乱するので、まずは手を動かす。Tutorial を写経
一通り終わったら、次に Overview を読む
saneyuki_s さんのエントリを読む (Fluxアーキテクチャの覚え書きを書いたと Fluxとはなんだったのか + misc at 2014)
最後に Chat Tutorial の資料で複数 Store の設計を学ぶ
さらに Isomorphic App の設計と実装を学びたいなら yahoo/flux-examples を読む

実案件で適用したところ

業務システムのやや複雑な管理画面 (新規開発する画面)
他の画面は jQuery で書かれているが、新しい画面は複雑なので jQuery のままでは破綻することが予想できた
その画面でだけ React を使うことにして、 React / Flux でトップダウンに設計 & 実装
設計の方法は Thinking in React と Flux の二つのチュートリアルを踏襲

開発環境

Emacs + web-mode.el (jsx のサポートがある)
ライブラリは React.js + 元祖 Flux (facebook の Flux 実装)
ビルドは npm run で統一。 npm run build で browserify + reactify を叩いてビルド
npm run watch でコードが更新されたら onchange で検知して再ビルド
browserify / webpack との親和性が高い。多くの npm モジュールが使えるので他にも単機能の小さいライブラリを積極的に使う

チームにどう伝えたか

チーム向けに導入ガイドを書いて啓蒙
nodebrew 入れて npm install して npm run build の3ステップで使えるところまで手数を減らす
React / Flux の概念は日本語情報を中心に簡単なリンク集を作成
あとは画面の構造に即して画面の各コンポーネントのコードを読んでもらう
画面がコンポーネントに構造化されて整理され、 JSX の見た目も実際の HTML タグ構造に近いので、チームメンバーにも意外と評価が高かった

実際に使ってみてどうだったか (1)

富豪的にデータを更新してもレンダリングコストの心配をしなくて良いのは想像以上のメリット
サーバサイドでテンプレートを毎回レンダリングするのと同じ感覚でクライアントのコードも書ける
データ更新の方向が一方通行なので状態が一意に定まり、混乱しにくい (Single source of truth)
トップダウンに画面を構造化して設計できるのも良い。自然に部品化されるので共通化が行いやすい

実際に使ってみてどうだったか (2)

Virtual DOM は足回りなのでほとんど意識しない。実際に使ってみると、現実的な React の強みはコンポーネント化であり、 Flux によるアーキテクチャの単純化だった
"Reactの発明は成立由来からしても、UIのコンポーネント化・テンプレート化をカジュアルに行える点であり、Virtual DOMは彼らにとっては速度面のトレードオフを抑え込むためのトリックにすぎない" by saneyuki_s

はまったところなど

最初 state と prop の使い分けが分からなかった (後に外部インターフェイスとして機能し、親からデータを与えられるものが prop, 自分で所有しているデータや状態が state と使い分けている)
HTML と JSX で微妙に属性名が違うところもチームメンバーは少し混乱する
アニメーションが良くわからない
バリデーションの設計も悩んだところ
jQuery-UI の置き換え問題!!!

テストについて(当時)

React / Flux が公式に勧めている Jest (Jasmine ベース) で少し書いた程度
Jasmine に不慣れなので Mocha + power-assert で書きたいが短納期で手が回らなかった
Jest のテストの仕組みは独立性の高い Mock Heavy な設計で独特
テストの方法にかかわらず、 React によってユニットテスト可能な画面要素が増えることが期待できる。理想的には Node 上で全てのテストが書けそう

だが… Jest はつらい

Node 0.8, 0.10 でしか動作しない (Node 0.12 や io.js で動作しない。つらい)
Jasmine や jsdom のバージョンが古いまま放置されている
なんか動作がむちゃくちゃ遅い
Jasmine の先行きがやや不安ではある Jasmine の記法にロックインされるのは得策ではない
というか matcher 覚えられない

Mocha + power-assert で書きたい

https://github.com/twada/power-assert
assert の情報を豊かに
matcher の暗記無用

  1) Array #indexOf() should return index when the value is present:
     AssertionError: # /path/to/test/mocha_node.js:10

  assert(this.ary.indexOf(zero) === two)
              |   |       |     |   |
              |   |       |     |   2
              |   -1      0     false
              [1,2,3]

  [number] two
  => 2
  [number] this.ary.indexOf(zero)
  => -1

Jest の React サンプル

jest.dontMock('../src/CheckboxWithLabel.js');

describe('CheckboxWithLabel', function() {
  it('changes the text after click', function() {
    var React = require('react/addons');
    var CheckboxWithLabel = require('../src/CheckboxWithLabel.js');
    var TestUtils = React.addons.TestUtils;

    var checkbox = TestUtils.renderIntoDocument(
      <CheckboxWithLabel labelOn="On" labelOff="Off"/>
    );

    var label = TestUtils.findRenderedDOMComponentWithTag(
      checkbox, 'label'
    );
    expect(label.getDOMNode().textContent).toEqual('Off');

    var input = TestUtils.findRenderedDOMComponentWithTag(
      checkbox, 'input'
    );
    TestUtils.Simulate.change(input);
    expect(label.getDOMNode().textContent).toEqual('On');
  });
});

Mocha + power-assert に移植してみる

var assert = require('power-assert');

describe('CheckboxWithLabel', function() {
  it('changes the text after click', function() {
    var React = require('react/addons');
    var CheckboxWithLabel = require('../src/CheckboxWithLabel.js');
    var TestUtils = React.addons.TestUtils;

    var checkbox = TestUtils.renderIntoDocument(
      <CheckboxWithLabel labelOn="On" labelOff="Off"/>
    );

    var label = TestUtils.findRenderedDOMComponentWithTag(
      checkbox, 'label'
    );
    assert(label.getDOMNode().textContent === 'Off')

    var input = TestUtils.findRenderedDOMComponentWithTag(
      checkbox, 'input'
    );
    TestUtils.Simulate.change(input);
    assert(label.getDOMNode().textContent === 'On');
  });
});

browserify -t [ reactify --extension jsx ] -t espowerify test/**/*.jsx > ./bundle_test.js && mocha-phantomjs test-browser.html

普通に動く


  1) CheckboxWithLabel changes the text after click:
     AssertionError:   # /home/takuto/work/react/test/components/CheckboxWithLabel_test.jsx:21

  assert(label.getDOMNode().textContent === 'On')
         |     |            |           |        
         |     |            "Off"       false    
         |     HTMLLabelElement{htmlFor:"",form:null,accessKey:"",control:#HTMLInputElement#,outerHTML:"<label data-reactid=\".0\"><input type=\"checkbox\" data-reactid=\".0.0\"><span data-reactid=\".0.1\">Off</span></label>",spellcheck:true,id:"",title:"",lang:"",classList:#DOMTokenList#,className:"",innerText:"Off",dir:"",innerHTML:"<input type=\"checkbox\" data-reactid=\".0.0\"><span data-reactid=\".0.1\">Off</span>",contentEditable:"inherit",tabIndex:-1,draggable:false,outerText:"Off",hidden:false,children:#function#,isContentEditable:false,style:#CSSStyleDeclaration#,dataset:#DOMStringMap#,clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:#HTMLElement#,offsetParent:null,nextElementSibling:null,tagName:"LABEL",previousElementSibling:null,childElementCount:2,scrollLeft:0,firstElementChild:#HTMLInputElement#,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:null,parentNode:#HTMLDivElement#,lastChild:#HTMLElement#,baseURI:null,firstChild:#HTMLInputElement#,nodeValue:null,textContent:"Off",nodeType:1,nodeName:"LABEL",prefix:null,childNodes:#function#,nextSibling:null,attributes:#NamedNodeMap#,ownerDocument:#HTMLDocument#,namespaceURI:"http://www.w3.org/1999/xhtml",localName:"label",parentElement:#HTMLDivElement#}
         ReactDOMComponent{_tag:"label",tagName:"LABEL",props:#Object#,_owner:#Object#,_lifeCycleState:"MOUNTED",_pendingCallbacks:null,_currentElement:#Object#,_pendingElement:null,_rootNodeID:".0",_mountDepth:1,_renderedChildren:#Object#}

  --- [string] 'On'
  +++ [string] label.getDOMNode().textContent
  @@ -1,2 +1,3 @@
   O
  -n
  +ff

もっと中を覗いてみたくなった(output.maxDepth)

var assert = require('power-assert').customize({
    output: {
        maxDepth: 3
    }
});

describe('CheckboxWithLabel', function() {

  it('changes the text after click', function() {
    var React = require('react/addons');
    var TestUtils = React.addons.TestUtils;
    var CheckboxWithLabel = require('../../lib/components/CheckboxWithLabel.jsx');

    var component = TestUtils.renderIntoDocument(
      <CheckboxWithLabel labelOn="On" labelOff="Off"/>
    );

    var label = TestUtils.findRenderedDOMComponentWithTag(
      component, 'label'
    );
    assert(label.getDOMNode().textContent === 'On')

    var input = TestUtils.findRenderedDOMComponentWithTag(
      component, 'input'
    );
    TestUtils.Simulate.change(input);
    assert(label.getDOMNode().textContent === 'On');
  });
});

学びがあった

var elem = someCheckbox.control;
elem.selectionEnd;

＿人人人人人人人人人人＿
＞　突然の TypeError　＜
￣ＹＹＹＹＹＹＹＹＹＹ￣

直しました

v0.10.2: Release 0.10.2 (2015-02-16) stringifier fix

改めて覗いてみよう

  1) CheckboxWithLabel changes the text after click:
     AssertionError:   # /home/takuto/work/react/test/components/CheckboxWithLabel_test.jsx:21

  assert(label.getDOMNode().textContent === 'On')
         |     |            |           |        
         |     |            "Off"       false    
         |     HTMLLabelElement{htmlFor:"",form:null,accessKey:"",control:HTMLInputElement{src:"",valueAsNumber:NaN,incremental:false,defaultChecked:false,form:null,multiple:false,list:null,size:20,checked:false,readOnly:false,formAction:"",autofocus:false,formMethod:"",indeterminate:false,maxLength:524288,value:"",accept:"",labels:#function#,min:"",alt:"",align:"",accessKey:"",step:"",useMap:"",max:"",formTarget:"",formEnctype:"",formNoValidate:false,defaultValue:"",willValidate:true,disabled:false,required:false,files:null,validationMessage:"",validity:ValidityState{rangeOverflow:false,stepMismatch:false,rangeUnderflow:false,valueMissing:false,tooLong:false,valid:true,patternMismatch:false,typeMismatch:false,customError:false},type:"checkbox",placeholder:"",name:"",pattern:"",valueAsDate:null,selectedOption:null,outerHTML:"<input type=\"checkbox\" data-reactid=\".0.0\">",spellcheck:true,id:"",title:"",lang:"",classList:DOMTokenList{length:0},className:"",innerText:"",dir:"",innerHTML:"",contentEditable:"inherit",tabIndex:0,draggable:false,outerText:"",hidden:false,children:#function#,isContentEditable:false,style:CSSStyleDeclaration{length:0,cssText:"",parentRule:null},dataset:DOMStringMap{reactid:".0.0"},clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:null,offsetParent:null,nextElementSibling:HTMLElement{outerHTML:"<span data-reactid=\".0.1\">Off</span>",spellcheck:true,id:"",title:"",lang:"",classList:#DOMTokenList#,className:"",innerText:"Off",dir:"",innerHTML:"Off",contentEditable:"inherit",tabIndex:-1,draggable:false,outerText:"Off",hidden:false,children:#function#,isContentEditable:false,style:#CSSStyleDeclaration#,dataset:#DOMStringMap#,clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:null,offsetParent:null,nextElementSibling:null,tagName:"SPAN",previousElementSibling:#@Circular#,childElementCount:0,scrollLeft:0,firstElementChild:null,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:#@Circular#,parentNode:#@Circular#,lastChild:#Text#,baseURI:null,firstChild:#Text#,nodeValue:null,textContent:"Off",nodeType:1,nodeName:"SPAN",prefix:null,childNodes:#function#,nextSibling:null,attributes:#NamedNodeMap#,ownerDocument:#HTMLDocument#,namespaceURI:"http://www.w3.org/1999/xhtml",localName:"span",parentElement:#@Circular#},tagName:"INPUT",previousElementSibling:null,childElementCount:0,scrollLeft:0,firstElementChild:null,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:null,parentNode:#@Circular#,lastChild:null,baseURI:null,firstChild:null,nodeValue:null,textContent:"",nodeType:1,nodeName:"INPUT",prefix:null,childNodes:#function#,nextSibling:HTMLElement{outerHTML:"<span data-reactid=\".0.1\">Off</span>",spellcheck:true,id:"",title:"",lang:"",classList:#DOMTokenList#,className:"",innerText:"Off",dir:"",innerHTML:"Off",contentEditable:"inherit",tabIndex:-1,draggable:false,outerText:"Off",hidden:false,children:#function#,isContentEditable:false,style:#CSSStyleDeclaration#,dataset:#DOMStringMap#,clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:null,offsetParent:null,nextElementSibling:null,tagName:"SPAN",previousElementSibling:#@Circular#,childElementCount:0,scrollLeft:0,firstElementChild:null,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:#@Circular#,parentNode:#@Circular#,lastChild:#Text#,baseURI:null,firstChild:#Text#,nodeValue:null,textContent:"Off",nodeType:1,nodeName:"SPAN",prefix:null,childNodes:#function#,nextSibling:null,attributes:#NamedNodeMap#,ownerDocument:#HTMLDocument#,namespaceURI:"http://www.w3.org/1999/xhtml",localName:"span",parentElement:#@Circular#},attributes:NamedNodeMap{"0":#Attr#,"1":#Attr#,length:2},ownerDocument:HTMLDocument{"_reactListenersID8561708815395832":0,bgColor:"",alinkColor:"",width:400,plugins:#function#,height:300,fgColor:"",vlinkColor:"",all:undefined,embeds:#function#,scripts:#function#,compatMode:"CSS1Compat",activeElement:#HTMLBodyElement#,dir:"",designMode:"off",linkColor:"",documentElement:#HTMLHtmlElement#,preferredStylesheetSet:null,xmlVersion:null,location:#Location#,xmlEncoding:null,implementation:#DOMImplementation#,referrer:"",head:#HTMLHeadElement#,defaultView:#DOMWindow#,domain:"",lastModified:"02/16/2015 11:07:10",anchors:#function#,applets:#function#,doctype:#DocumentType#,images:#function#,forms:#function#,charset:"UTF-8",styleSheets:#StyleSheetList#,URL:"file:///home/takuto/work/react/test-browser.html",readyState:"complete",selectedStylesheetSet:null,characterSet:"UTF-8",title:"Mocha Tests",cookie:"",body:#HTMLBodyElement#,inputEncoding:"UTF-8",xmlStandalone:false,documentURI:"file:///home/takuto/work/react/test-browser.html",defaultCharset:"iso-8859-1",links:#function#,previousSibling:null,parentNode:null,lastChild:#HTMLHtmlElement#,baseURI:"file:///home/takuto/work/react/test-browser.html",firstChild:#DocumentType#,nodeValue:null,textContent:null,nodeType:9,nodeName:"#document",prefix:null,childNodes:#function#,nextSibling:null,attributes:null,ownerDocument:null,namespaceURI:null,localName:null,parentElement:null},namespaceURI:"http://www.w3.org/1999/xhtml",localName:"input",parentElement:#@Circular#},outerHTML:"<label data-reactid=\".0\"><input type=\"checkbox\" data-reactid=\".0.0\"><span data-reactid=\".0.1\">Off</span></label>",spellcheck:true,id:"",title:"",lang:"",classList:DOMTokenList{length:0},className:"",innerText:"Off",dir:"",innerHTML:"<input type=\"checkbox\" data-reactid=\".0.0\"><span data-reactid=\".0.1\">Off</span>",contentEditable:"inherit",tabIndex:-1,draggable:false,outerText:"Off",hidden:false,children:#function#,isContentEditable:false,style:CSSStyleDeclaration{length:0,cssText:"",parentRule:null},dataset:DOMStringMap{reactid:".0"},clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:HTMLElement{outerHTML:"<span data-reactid=\".0.1\">Off</span>",spellcheck:true,id:"",title:"",lang:"",classList:DOMTokenList{length:0},className:"",innerText:"Off",dir:"",innerHTML:"Off",contentEditable:"inherit",tabIndex:-1,draggable:false,outerText:"Off",hidden:false,children:#function#,isContentEditable:false,style:CSSStyleDeclaration{length:0,cssText:"",parentRule:null},dataset:DOMStringMap{reactid:".0.1"},clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:null,offsetParent:null,nextElementSibling:null,tagName:"SPAN",previousElementSibling:HTMLInputElement{src:"",valueAsNumber:NaN,incremental:false,defaultChecked:false,form:null,multiple:false,list:null,size:20,checked:false,readOnly:false,formAction:"",autofocus:false,formMethod:"",indeterminate:false,maxLength:524288,value:"",accept:"",labels:#function#,min:"",alt:"",align:"",accessKey:"",step:"",useMap:"",max:"",formTarget:"",formEnctype:"",formNoValidate:false,defaultValue:"",willValidate:true,disabled:false,required:false,files:null,validationMessage:"",validity:#ValidityState#,type:"checkbox",placeholder:"",name:"",pattern:"",valueAsDate:null,selectedOption:null,outerHTML:"<input type=\"checkbox\" data-reactid=\".0.0\">",spellcheck:true,id:"",title:"",lang:"",classList:#DOMTokenList#,className:"",innerText:"",dir:"",innerHTML:"",contentEditable:"inherit",tabIndex:0,draggable:false,outerText:"",hidden:false,children:#function#,isContentEditable:false,style:#CSSStyleDeclaration#,dataset:#DOMStringMap#,clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:null,offsetParent:null,nextElementSibling:#@Circular#,tagName:"INPUT",previousElementSibling:null,childElementCount:0,scrollLeft:0,firstElementChild:null,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:null,parentNode:#@Circular#,lastChild:null,baseURI:null,firstChild:null,nodeValue:null,textContent:"",nodeType:1,nodeName:"INPUT",prefix:null,childNodes:#function#,nextSibling:#@Circular#,attributes:#NamedNodeMap#,ownerDocument:#HTMLDocument#,namespaceURI:"http://www.w3.org/1999/xhtml",localName:"input",parentElement:#@Circular#},childElementCount:0,scrollLeft:0,firstElementChild:null,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:HTMLInputElement{src:"",valueAsNumber:NaN,incremental:false,defaultChecked:false,form:null,multiple:false,list:null,size:20,checked:false,readOnly:false,formAction:"",autofocus:false,formMethod:"",indeterminate:false,maxLength:524288,value:"",accept:"",labels:#function#,min:"",alt:"",align:"",accessKey:"",step:"",useMap:"",max:"",formTarget:"",formEnctype:"",formNoValidate:false,defaultValue:"",willValidate:true,disabled:false,required:false,files:null,validationMessage:"",validity:#ValidityState#,type:"checkbox",placeholder:"",name:"",pattern:"",valueAsDate:null,selectedOption:null,outerHTML:"<input type=\"checkbox\" data-reactid=\".0.0\">",spellcheck:true,id:"",title:"",lang:"",classList:#DOMTokenList#,className:"",innerText:"",dir:"",innerHTML:"",contentEditable:"inherit",tabIndex:0,draggable:false,outerText:"",hidden:false,children:#function#,isContentEditable:false,style:#CSSStyleDeclaration#,dataset:#DOMStringMap#,clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:null,offsetParent:null,nextElementSibling:#@Circular#,tagName:"INPUT",previousElementSibling:null,childElementCount:0,scrollLeft:0,firstElementChild:null,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:null,parentNode:#@Circular#,lastChild:null,baseURI:null,firstChild:null,nodeValue:null,textContent:"",nodeType:1,nodeName:"INPUT",prefix:null,childNodes:#function#,nextSibling:#@Circular#,attributes:#NamedNodeMap#,ownerDocument:#HTMLDocument#,namespaceURI:"http://www.w3.org/1999/xhtml",localName:"input",parentElement:#@Circular#},parentNode:#@Circular#,lastChild:Text{wholeText:"Off",length:3,data:"Off",previousSibling:null,parentNode:#@Circular#,lastChild:null,baseURI:null,firstChild:null,nodeValue:"Off",textContent:"Off",nodeType:3,nodeName:"#text",prefix:null,childNodes:#function#,nextSibling:null,attributes:null,ownerDocument:#HTMLDocument#,namespaceURI:null,localName:null,parentElement:#@Circular#},baseURI:null,firstChild:Text{wholeText:"Off",length:3,data:"Off",previousSibling:null,parentNode:#@Circular#,lastChild:null,baseURI:null,firstChild:null,nodeValue:"Off",textContent:"Off",nodeType:3,nodeName:"#text",prefix:null,childNodes:#function#,nextSibling:null,attributes:null,ownerDocument:#HTMLDocument#,namespaceURI:null,localName:null,parentElement:#@Circular#},nodeValue:null,textContent:"Off",nodeType:1,nodeName:"SPAN",prefix:null,childNodes:#function#,nextSibling:null,attributes:NamedNodeMap{"0":#Attr#,length:1},ownerDocument:HTMLDocument{"_reactListenersID8561708815395832":0,bgColor:"",alinkColor:"",width:400,plugins:#function#,height:300,fgColor:"",vlinkColor:"",all:undefined,embeds:#function#,scripts:#function#,compatMode:"CSS1Compat",activeElement:#HTMLBodyElement#,dir:"",designMode:"off",linkColor:"",documentElement:#HTMLHtmlElement#,preferredStylesheetSet:null,xmlVersion:null,location:#Location#,xmlEncoding:null,implementation:#DOMImplementation#,referrer:"",head:#HTMLHeadElement#,defaultView:#DOMWindow#,domain:"",lastModified:"02/16/2015 11:07:10",anchors:#function#,applets:#function#,doctype:#DocumentType#,images:#function#,forms:#function#,charset:"UTF-8",styleSheets:#StyleSheetList#,URL:"file:///home/takuto/work/react/test-browser.html",readyState:"complete",selectedStylesheetSet:null,characterSet:"UTF-8",title:"Mocha Tests",cookie:"",body:#HTMLBodyElement#,inputEncoding:"UTF-8",xmlStandalone:false,documentURI:"file:///home/takuto/work/react/test-browser.html",defaultCharset:"iso-8859-1",links:#function#,previousSibling:null,parentNode:null,lastChild:#HTMLHtmlElement#,baseURI:"file:///home/takuto/work/react/test-browser.html",firstChild:#DocumentType#,nodeValue:null,textContent:null,nodeType:9,nodeName:"#document",prefix:null,childNodes:#function#,nextSibling:null,attributes:null,ownerDocument:null,namespaceURI:null,localName:null,parentElement:null},namespaceURI:"http://www.w3.org/1999/xhtml",localName:"span",parentElement:#@Circular#},offsetParent:null,nextElementSibling:null,tagName:"LABEL",previousElementSibling:null,childElementCount:2,scrollLeft:0,firstElementChild:HTMLInputElement{src:"",valueAsNumber:NaN,incremental:false,defaultChecked:false,form:null,multiple:false,list:null,size:20,checked:false,readOnly:false,formAction:"",autofocus:false,formMethod:"",indeterminate:false,maxLength:524288,value:"",accept:"",labels:#function#,min:"",alt:"",align:"",accessKey:"",step:"",useMap:"",max:"",formTarget:"",formEnctype:"",formNoValidate:false,defaultValue:"",willValidate:true,disabled:false,required:false,files:null,validationMessage:"",validity:ValidityState{rangeOverflow:false,stepMismatch:false,rangeUnderflow:false,valueMissing:false,tooLong:false,valid:true,patternMismatch:false,typeMismatch:false,customError:false},type:"checkbox",placeholder:"",name:"",pattern:"",valueAsDate:null,selectedOption:null,outerHTML:"<input type=\"checkbox\" data-reactid=\".0.0\">",spellcheck:true,id:"",title:"",lang:"",classList:DOMTokenList{length:0},className:"",innerText:"",dir:"",innerHTML:"",contentEditable:"inherit",tabIndex:0,draggable:false,outerText:"",hidden:false,children:#function#,isContentEditable:false,style:CSSStyleDeclaration{length:0,cssText:"",parentRule:null},dataset:DOMStringMap{reactid:".0.0"},clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:null,offsetParent:null,nextElementSibling:HTMLElement{outerHTML:"<span data-reactid=\".0.1\">Off</span>",spellcheck:true,id:"",title:"",lang:"",classList:#DOMTokenList#,className:"",innerText:"Off",dir:"",innerHTML:"Off",contentEditable:"inherit",tabIndex:-1,draggable:false,outerText:"Off",hidden:false,children:#function#,isContentEditable:false,style:#CSSStyleDeclaration#,dataset:#DOMStringMap#,clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:null,offsetParent:null,nextElementSibling:null,tagName:"SPAN",previousElementSibling:#@Circular#,childElementCount:0,scrollLeft:0,firstElementChild:null,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:#@Circular#,parentNode:#@Circular#,lastChild:#Text#,baseURI:null,firstChild:#Text#,nodeValue:null,textContent:"Off",nodeType:1,nodeName:"SPAN",prefix:null,childNodes:#function#,nextSibling:null,attributes:#NamedNodeMap#,ownerDocument:#HTMLDocument#,namespaceURI:"http://www.w3.org/1999/xhtml",localName:"span",parentElement:#@Circular#},tagName:"INPUT",previousElementSibling:null,childElementCount:0,scrollLeft:0,firstElementChild:null,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:null,parentNode:#@Circular#,lastChild:null,baseURI:null,firstChild:null,nodeValue:null,textContent:"",nodeType:1,nodeName:"INPUT",prefix:null,childNodes:#function#,nextSibling:HTMLElement{outerHTML:"<span data-reactid=\".0.1\">Off</span>",spellcheck:true,id:"",title:"",lang:"",classList:#DOMTokenList#,className:"",innerText:"Off",dir:"",innerHTML:"Off",contentEditable:"inherit",tabIndex:-1,draggable:false,outerText:"Off",hidden:false,children:#function#,isContentEditable:false,style:#CSSStyleDeclaration#,dataset:#DOMStringMap#,clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:null,offsetParent:null,nextElementSibling:null,tagName:"SPAN",previousElementSibling:#@Circular#,childElementCount:0,scrollLeft:0,firstElementChild:null,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:#@Circular#,parentNode:#@Circular#,lastChild:#Text#,baseURI:null,firstChild:#Text#,nodeValue:null,textContent:"Off",nodeType:1,nodeName:"SPAN",prefix:null,childNodes:#function#,nextSibling:null,attributes:#NamedNodeMap#,ownerDocument:#HTMLDocument#,namespaceURI:"http://www.w3.org/1999/xhtml",localName:"span",parentElement:#@Circular#},attributes:NamedNodeMap{"0":#Attr#,"1":#Attr#,length:2},ownerDocument:HTMLDocument{"_reactListenersID8561708815395832":0,bgColor:"",alinkColor:"",width:400,plugins:#function#,height:300,fgColor:"",vlinkColor:"",all:undefined,embeds:#function#,scripts:#function#,compatMode:"CSS1Compat",activeElement:#HTMLBodyElement#,dir:"",designMode:"off",linkColor:"",documentElement:#HTMLHtmlElement#,preferredStylesheetSet:null,xmlVersion:null,location:#Location#,xmlEncoding:null,implementation:#DOMImplementation#,referrer:"",head:#HTMLHeadElement#,defaultView:#DOMWindow#,domain:"",lastModified:"02/16/2015 11:07:10",anchors:#function#,applets:#function#,doctype:#DocumentType#,images:#function#,forms:#function#,charset:"UTF-8",styleSheets:#StyleSheetList#,URL:"file:///home/takuto/work/react/test-browser.html",readyState:"complete",selectedStylesheetSet:null,characterSet:"UTF-8",title:"Mocha Tests",cookie:"",body:#HTMLBodyElement#,inputEncoding:"UTF-8",xmlStandalone:false,documentURI:"file:///home/takuto/work/react/test-browser.html",defaultCharset:"iso-8859-1",links:#function#,previousSibling:null,parentNode:null,lastChild:#HTMLHtmlElement#,baseURI:"file:///home/takuto/work/react/test-browser.html",firstChild:#DocumentType#,nodeValue:null,textContent:null,nodeType:9,nodeName:"#document",prefix:null,childNodes:#function#,nextSibling:null,attributes:null,ownerDocument:null,namespaceURI:null,localName:null,parentElement:null},namespaceURI:"http://www.w3.org/1999/xhtml",localName:"input",parentElement:#@Circular#},clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:null,parentNode:HTMLDivElement{align:"",outerHTML:"<div><label data-reactid=\".0\"><input type=\"checkbox\" data-reactid=\".0.0\"><span data-reactid=\".0.1\">Off</span></label></div>",spellcheck:true,id:"",title:"",lang:"",classList:DOMTokenList{length:0},className:"",innerText:"Off",dir:"",innerHTML:"<label data-reactid=\".0\"><input type=\"checkbox\" data-reactid=\".0.0\"><span data-reactid=\".0.1\">Off</span></label>",contentEditable:"inherit",tabIndex:-1,draggable:false,outerText:"Off",hidden:false,children:#function#,isContentEditable:false,style:CSSStyleDeclaration{length:0,cssText:"",parentRule:null},dataset:DOMStringMap{},clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:#@Circular#,offsetParent:null,nextElementSibling:null,tagName:"DIV",previousElementSibling:null,childElementCount:1,scrollLeft:0,firstElementChild:#@Circular#,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:null,parentNode:null,lastChild:#@Circular#,baseURI:null,firstChild:#@Circular#,nodeValue:null,textContent:"Off",nodeType:1,nodeName:"DIV",prefix:null,childNodes:#function#,nextSibling:null,attributes:NamedNodeMap{length:0},ownerDocument:HTMLDocument{"_reactListenersID8561708815395832":0,bgColor:"",alinkColor:"",width:400,plugins:#function#,height:300,fgColor:"",vlinkColor:"",all:undefined,embeds:#function#,scripts:#function#,compatMode:"CSS1Compat",activeElement:#HTMLBodyElement#,dir:"",designMode:"off",linkColor:"",documentElement:#HTMLHtmlElement#,preferredStylesheetSet:null,xmlVersion:null,location:#Location#,xmlEncoding:null,implementation:#DOMImplementation#,referrer:"",head:#HTMLHeadElement#,defaultView:#DOMWindow#,domain:"",lastModified:"02/16/2015 11:07:10",anchors:#function#,applets:#function#,doctype:#DocumentType#,images:#function#,forms:#function#,charset:"UTF-8",styleSheets:#StyleSheetList#,URL:"file:///home/takuto/work/react/test-browser.html",readyState:"complete",selectedStylesheetSet:null,characterSet:"UTF-8",title:"Mocha Tests",cookie:"",body:#HTMLBodyElement#,inputEncoding:"UTF-8",xmlStandalone:false,documentURI:"file:///home/takuto/work/react/test-browser.html",defaultCharset:"iso-8859-1",links:#function#,previousSibling:null,parentNode:null,lastChild:#HTMLHtmlElement#,baseURI:"file:///home/takuto/work/react/test-browser.html",firstChild:#DocumentType#,nodeValue:null,textContent:null,nodeType:9,nodeName:"#document",prefix:null,childNodes:#function#,nextSibling:null,attributes:null,ownerDocument:null,namespaceURI:null,localName:null,parentElement:null},namespaceURI:"http://www.w3.org/1999/xhtml",localName:"div",parentElement:null},lastChild:HTMLElement{outerHTML:"<span data-reactid=\".0.1\">Off</span>",spellcheck:true,id:"",title:"",lang:"",classList:DOMTokenList{length:0},className:"",innerText:"Off",dir:"",innerHTML:"Off",contentEditable:"inherit",tabIndex:-1,draggable:false,outerText:"Off",hidden:false,children:#function#,isContentEditable:false,style:CSSStyleDeclaration{length:0,cssText:"",parentRule:null},dataset:DOMStringMap{reactid:".0.1"},clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:null,offsetParent:null,nextElementSibling:null,tagName:"SPAN",previousElementSibling:HTMLInputElement{src:"",valueAsNumber:NaN,incremental:false,defaultChecked:false,form:null,multiple:false,list:null,size:20,checked:false,readOnly:false,formAction:"",autofocus:false,formMethod:"",indeterminate:false,maxLength:524288,value:"",accept:"",labels:#function#,min:"",alt:"",align:"",accessKey:"",step:"",useMap:"",max:"",formTarget:"",formEnctype:"",formNoValidate:false,defaultValue:"",willValidate:true,disabled:false,required:false,files:null,validationMessage:"",validity:#ValidityState#,type:"checkbox",placeholder:"",name:"",pattern:"",valueAsDate:null,selectedOption:null,outerHTML:"<input type=\"checkbox\" data-reactid=\".0.0\">",spellcheck:true,id:"",title:"",lang:"",classList:#DOMTokenList#,className:"",innerText:"",dir:"",innerHTML:"",contentEditable:"inherit",tabIndex:0,draggable:false,outerText:"",hidden:false,children:#function#,isContentEditable:false,style:#CSSStyleDeclaration#,dataset:#DOMStringMap#,clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:null,offsetParent:null,nextElementSibling:#@Circular#,tagName:"INPUT",previousElementSibling:null,childElementCount:0,scrollLeft:0,firstElementChild:null,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:null,parentNode:#@Circular#,lastChild:null,baseURI:null,firstChild:null,nodeValue:null,textContent:"",nodeType:1,nodeName:"INPUT",prefix:null,childNodes:#function#,nextSibling:#@Circular#,attributes:#NamedNodeMap#,ownerDocument:#HTMLDocument#,namespaceURI:"http://www.w3.org/1999/xhtml",localName:"input",parentElement:#@Circular#},childElementCount:0,scrollLeft:0,firstElementChild:null,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:HTMLInputElement{src:"",valueAsNumber:NaN,incremental:false,defaultChecked:false,form:null,multiple:false,list:null,size:20,checked:false,readOnly:false,formAction:"",autofocus:false,formMethod:"",indeterminate:false,maxLength:524288,value:"",accept:"",labels:#function#,min:"",alt:"",align:"",accessKey:"",step:"",useMap:"",max:"",formTarget:"",formEnctype:"",formNoValidate:false,defaultValue:"",willValidate:true,disabled:false,required:false,files:null,validationMessage:"",validity:#ValidityState#,type:"checkbox",placeholder:"",name:"",pattern:"",valueAsDate:null,selectedOption:null,outerHTML:"<input type=\"checkbox\" data-reactid=\".0.0\">",spellcheck:true,id:"",title:"",lang:"",classList:#DOMTokenList#,className:"",innerText:"",dir:"",innerHTML:"",contentEditable:"inherit",tabIndex:0,draggable:false,outerText:"",hidden:false,children:#function#,isContentEditable:false,style:#CSSStyleDeclaration#,dataset:#DOMStringMap#,clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:null,offsetParent:null,nextElementSibling:#@Circular#,tagName:"INPUT",previousElementSibling:null,childElementCount:0,scrollLeft:0,firstElementChild:null,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:null,parentNode:#@Circular#,lastChild:null,baseURI:null,firstChild:null,nodeValue:null,textContent:"",nodeType:1,nodeName:"INPUT",prefix:null,childNodes:#function#,nextSibling:#@Circular#,attributes:#NamedNodeMap#,ownerDocument:#HTMLDocument#,namespaceURI:"http://www.w3.org/1999/xhtml",localName:"input",parentElement:#@Circular#},parentNode:#@Circular#,lastChild:Text{wholeText:"Off",length:3,data:"Off",previousSibling:null,parentNode:#@Circular#,lastChild:null,baseURI:null,firstChild:null,nodeValue:"Off",textContent:"Off",nodeType:3,nodeName:"#text",prefix:null,childNodes:#function#,nextSibling:null,attributes:null,ownerDocument:#HTMLDocument#,namespaceURI:null,localName:null,parentElement:#@Circular#},baseURI:null,firstChild:Text{wholeText:"Off",length:3,data:"Off",previousSibling:null,parentNode:#@Circular#,lastChild:null,baseURI:null,firstChild:null,nodeValue:"Off",textContent:"Off",nodeType:3,nodeName:"#text",prefix:null,childNodes:#function#,nextSibling:null,attributes:null,ownerDocument:#HTMLDocument#,namespaceURI:null,localName:null,parentElement:#@Circular#},nodeValue:null,textContent:"Off",nodeType:1,nodeName:"SPAN",prefix:null,childNodes:#function#,nextSibling:null,attributes:NamedNodeMap{"0":#Attr#,length:1},ownerDocument:HTMLDocument{"_reactListenersID8561708815395832":0,bgColor:"",alinkColor:"",width:400,plugins:#function#,height:300,fgColor:"",vlinkColor:"",all:undefined,embeds:#function#,scripts:#function#,compatMode:"CSS1Compat",activeElement:#HTMLBodyElement#,dir:"",designMode:"off",linkColor:"",documentElement:#HTMLHtmlElement#,preferredStylesheetSet:null,xmlVersion:null,location:#Location#,xmlEncoding:null,implementation:#DOMImplementation#,referrer:"",head:#HTMLHeadElement#,defaultView:#DOMWindow#,domain:"",lastModified:"02/16/2015 11:07:10",anchors:#function#,applets:#function#,doctype:#DocumentType#,images:#function#,forms:#function#,charset:"UTF-8",styleSheets:#StyleSheetList#,URL:"file:///home/takuto/work/react/test-browser.html",readyState:"complete",selectedStylesheetSet:null,characterSet:"UTF-8",title:"Mocha Tests",cookie:"",body:#HTMLBodyElement#,inputEncoding:"UTF-8",xmlStandalone:false,documentURI:"file:///home/takuto/work/react/test-browser.html",defaultCharset:"iso-8859-1",links:#function#,previousSibling:null,parentNode:null,lastChild:#HTMLHtmlElement#,baseURI:"file:///home/takuto/work/react/test-browser.html",firstChild:#DocumentType#,nodeValue:null,textContent:null,nodeType:9,nodeName:"#document",prefix:null,childNodes:#function#,nextSibling:null,attributes:null,ownerDocument:null,namespaceURI:null,localName:null,parentElement:null},namespaceURI:"http://www.w3.org/1999/xhtml",localName:"span",parentElement:#@Circular#},baseURI:null,firstChild:HTMLInputElement{src:"",valueAsNumber:NaN,incremental:false,defaultChecked:false,form:null,multiple:false,list:null,size:20,checked:false,readOnly:false,formAction:"",autofocus:false,formMethod:"",indeterminate:false,maxLength:524288,value:"",accept:"",labels:#function#,min:"",alt:"",align:"",accessKey:"",step:"",useMap:"",max:"",formTarget:"",formEnctype:"",formNoValidate:false,defaultValue:"",willValidate:true,disabled:false,required:false,files:null,validationMessage:"",validity:ValidityState{rangeOverflow:false,stepMismatch:false,rangeUnderflow:false,valueMissing:false,tooLong:false,valid:true,patternMismatch:false,typeMismatch:false,customError:false},type:"checkbox",placeholder:"",name:"",pattern:"",valueAsDate:null,selectedOption:null,outerHTML:"<input type=\"checkbox\" data-reactid=\".0.0\">",spellcheck:true,id:"",title:"",lang:"",classList:DOMTokenList{length:0},className:"",innerText:"",dir:"",innerHTML:"",contentEditable:"inherit",tabIndex:0,draggable:false,outerText:"",hidden:false,children:#function#,isContentEditable:false,style:CSSStyleDeclaration{length:0,cssText:"",parentRule:null},dataset:DOMStringMap{reactid:".0.0"},clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:null,offsetParent:null,nextElementSibling:HTMLElement{outerHTML:"<span data-reactid=\".0.1\">Off</span>",spellcheck:true,id:"",title:"",lang:"",classList:#DOMTokenList#,className:"",innerText:"Off",dir:"",innerHTML:"Off",contentEditable:"inherit",tabIndex:-1,draggable:false,outerText:"Off",hidden:false,children:#function#,isContentEditable:false,style:#CSSStyleDeclaration#,dataset:#DOMStringMap#,clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:null,offsetParent:null,nextElementSibling:null,tagName:"SPAN",previousElementSibling:#@Circular#,childElementCount:0,scrollLeft:0,firstElementChild:null,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:#@Circular#,parentNode:#@Circular#,lastChild:#Text#,baseURI:null,firstChild:#Text#,nodeValue:null,textContent:"Off",nodeType:1,nodeName:"SPAN",prefix:null,childNodes:#function#,nextSibling:null,attributes:#NamedNodeMap#,ownerDocument:#HTMLDocument#,namespaceURI:"http://www.w3.org/1999/xhtml",localName:"span",parentElement:#@Circular#},tagName:"INPUT",previousElementSibling:null,childElementCount:0,scrollLeft:0,firstElementChild:null,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:null,parentNode:#@Circular#,lastChild:null,baseURI:null,firstChild:null,nodeValue:null,textContent:"",nodeType:1,nodeName:"INPUT",prefix:null,childNodes:#function#,nextSibling:HTMLElement{outerHTML:"<span data-reactid=\".0.1\">Off</span>",spellcheck:true,id:"",title:"",lang:"",classList:#DOMTokenList#,className:"",innerText:"Off",dir:"",innerHTML:"Off",contentEditable:"inherit",tabIndex:-1,draggable:false,outerText:"Off",hidden:false,children:#function#,isContentEditable:false,style:#CSSStyleDeclaration#,dataset:#DOMStringMap#,clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:null,offsetParent:null,nextElementSibling:null,tagName:"SPAN",previousElementSibling:#@Circular#,childElementCount:0,scrollLeft:0,firstElementChild:null,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:#@Circular#,parentNode:#@Circular#,lastChild:#Text#,baseURI:null,firstChild:#Text#,nodeValue:null,textContent:"Off",nodeType:1,nodeName:"SPAN",prefix:null,childNodes:#function#,nextSibling:null,attributes:#NamedNodeMap#,ownerDocument:#HTMLDocument#,namespaceURI:"http://www.w3.org/1999/xhtml",localName:"span",parentElement:#@Circular#},attributes:NamedNodeMap{"0":#Attr#,"1":#Attr#,length:2},ownerDocument:HTMLDocument{"_reactListenersID8561708815395832":0,bgColor:"",alinkColor:"",width:400,plugins:#function#,height:300,fgColor:"",vlinkColor:"",all:undefined,embeds:#function#,scripts:#function#,compatMode:"CSS1Compat",activeElement:#HTMLBodyElement#,dir:"",designMode:"off",linkColor:"",documentElement:#HTMLHtmlElement#,preferredStylesheetSet:null,xmlVersion:null,location:#Location#,xmlEncoding:null,implementation:#DOMImplementation#,referrer:"",head:#HTMLHeadElement#,defaultView:#DOMWindow#,domain:"",lastModified:"02/16/2015 11:07:10",anchors:#function#,applets:#function#,doctype:#DocumentType#,images:#function#,forms:#function#,charset:"UTF-8",styleSheets:#StyleSheetList#,URL:"file:///home/takuto/work/react/test-browser.html",readyState:"complete",selectedStylesheetSet:null,characterSet:"UTF-8",title:"Mocha Tests",cookie:"",body:#HTMLBodyElement#,inputEncoding:"UTF-8",xmlStandalone:false,documentURI:"file:///home/takuto/work/react/test-browser.html",defaultCharset:"iso-8859-1",links:#function#,previousSibling:null,parentNode:null,lastChild:#HTMLHtmlElement#,baseURI:"file:///home/takuto/work/react/test-browser.html",firstChild:#DocumentType#,nodeValue:null,textContent:null,nodeType:9,nodeName:"#document",prefix:null,childNodes:#function#,nextSibling:null,attributes:null,ownerDocument:null,namespaceURI:null,localName:null,parentElement:null},namespaceURI:"http://www.w3.org/1999/xhtml",localName:"input",parentElement:#@Circular#},nodeValue:null,textContent:"Off",nodeType:1,nodeName:"LABEL",prefix:null,childNodes:#function#,nextSibling:null,attributes:NamedNodeMap{"0":Attr{isId:false,ownerElement:#@Circular#,name:"data-reactid",value:".0",specified:true,previousSibling:null,parentNode:null,lastChild:#Text#,baseURI:null,firstChild:#Text#,nodeValue:".0",textContent:".0",nodeType:2,nodeName:"data-reactid",prefix:null,childNodes:#function#,nextSibling:null,attributes:null,ownerDocument:#HTMLDocument#,namespaceURI:null,localName:"data-reactid",parentElement:null},length:1},ownerDocument:HTMLDocument{"_reactListenersID8561708815395832":0,bgColor:"",alinkColor:"",width:400,plugins:#function#,height:300,fgColor:"",vlinkColor:"",all:undefined,embeds:#function#,scripts:#function#,compatMode:"CSS1Compat",activeElement:HTMLBodyElement{bgColor:"",text:"",background:"",aLink:"",vLink:"",link:"",outerHTML:"<body>\n    <div id=\"mocha\"></div>\n    <script type=\"text/javascript\" src=\"./node_modules/mocha/mocha.js\"></script>\n    <script type=\"text/javascript\">\n      mocha.setup('bdd');\n    </script>\n    <script type=\"text/javascript\" src=\"./bundle_test.js\"></script>\n    <script type=\"text/javascript\">\n      mocha.checkLeaks();\n      if (window.mochaPhantomJS) {\n        mochaPhantomJS.run();\n      } else {\n        mocha.run();\n      }\n    </script>\n  \n\n</body>",spellcheck:true,id:"",title:"",lang:"",classList:#DOMTokenList#,className:"",innerText:"",dir:"",innerHTML:"\n    <div id=\"mocha\"></div>\n    <script type=\"text/javascript\" src=\"./node_modules/mocha/mocha.js\"></script>\n    <script type=\"text/javascript\">\n      mocha.setup('bdd');\n    </script>\n    <script type=\"text/javascript\" src=\"./bundle_test.js\"></script>\n    <script type=\"text/javascript\">\n      mocha.checkLeaks();\n      if (window.mochaPhantomJS) {\n        mochaPhantomJS.run();\n      } else {\n        mocha.run();\n      }\n    </script>\n  \n\n",contentEditable:"inherit",tabIndex:-1,draggable:false,outerText:"",hidden:false,children:#function#,isContentEditable:false,style:#CSSStyleDeclaration#,dataset:#DOMStringMap#,clientWidth:400,scrollWidth:400,offsetWidth:400,offsetLeft:0,clientTop:0,lastElementChild:#HTMLScriptElement#,offsetParent:null,nextElementSibling:null,tagName:"BODY",previousElementSibling:#HTMLHeadElement#,childElementCount:5,scrollLeft:0,firstElementChild:#HTMLDivElement#,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:300,previousSibling:#Text#,parentNode:#HTMLHtmlElement#,lastChild:#Text#,baseURI:"file:///home/takuto/work/react/test-browser.html",firstChild:#Text#,nodeValue:null,textContent:"\n    \n    \n    \n      mocha.setup('bdd');\n    \n    \n    \n      mocha.checkLeaks();\n      if (window.mochaPhantomJS) {\n        mochaPhantomJS.run();\n      } else {\n        mocha.run();\n      }\n    \n  \n\n",nodeType:1,nodeName:"BODY",prefix:null,childNodes:#function#,nextSibling:null,attributes:#NamedNodeMap#,ownerDocument:#@Circular#,namespaceURI:"http://www.w3.org/1999/xhtml",localName:"body",parentElement:#HTMLHtmlElement#},dir:"",designMode:"off",linkColor:"",documentElement:HTMLHtmlElement{version:"",manifest:"",outerHTML:"<html><head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <script type=\"text/javascript\" src=\"./node_modules/es5-shim/es5-shim.js\"></script>\n    <script type=\"text/javascript\" src=\"./node_modules/es5-shim/es5-sham.js\"></script>\n    <link rel=\"stylesheet\" href=\"./node_modules/mocha/mocha.css\">\n    <title>Mocha Tests</title>\n  </head>\n  <body>\n    <div id=\"mocha\"></div>\n    <script type=\"text/javascript\" src=\"./node_modules/mocha/mocha.js\"></script>\n    <script type=\"text/javascript\">\n      mocha.setup('bdd');\n    </script>\n    <script type=\"text/javascript\" src=\"./bundle_test.js\"></script>\n    <script type=\"text/javascript\">\n      mocha.checkLeaks();\n      if (window.mochaPhantomJS) {\n        mochaPhantomJS.run();\n      } else {\n        mocha.run();\n      }\n    </script>\n  \n\n</body></html>",spellcheck:true,id:"",title:"",lang:"",classList:#DOMTokenList#,className:"",innerText:"",dir:"",innerHTML:"<head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <script type=\"text/javascript\" src=\"./node_modules/es5-shim/es5-shim.js\"></script>\n    <script type=\"text/javascript\" src=\"./node_modules/es5-shim/es5-sham.js\"></script>\n    <link rel=\"stylesheet\" href=\"./node_modules/mocha/mocha.css\">\n    <title>Mocha Tests</title>\n  </head>\n  <body>\n    <div id=\"mocha\"></div>\n    <script type=\"text/javascript\" src=\"./node_modules/mocha/mocha.js\"></script>\n    <script type=\"text/javascript\">\n      mocha.setup('bdd');\n    </script>\n    <script type=\"text/javascript\" src=\"./bundle_test.js\"></script>\n    <script type=\"text/javascript\">\n      mocha.checkLeaks();\n      if (window.mochaPhantomJS) {\n        mochaPhantomJS.run();\n      } else {\n        mocha.run();\n      }\n    </script>\n  \n\n</body>",contentEditable:"inherit",tabIndex:-1,draggable:false,outerText:"",hidden:false,children:#function#,isContentEditable:false,style:#CSSStyleDeclaration#,dataset:#DOMStringMap#,clientWidth:400,scrollWidth:400,offsetWidth:400,offsetLeft:0,clientTop:0,lastElementChild:#HTMLBodyElement#,offsetParent:null,nextElementSibling:null,tagName:"HTML",previousElementSibling:null,childElementCount:2,scrollLeft:0,firstElementChild:#HTMLHeadElement#,clientLeft:0,offsetHeight:60,clientHeight:300,offsetTop:0,scrollTop:0,scrollHeight:60,previousSibling:#DocumentType#,parentNode:#@Circular#,lastChild:#HTMLBodyElement#,baseURI:"file:///home/takuto/work/react/test-browser.html",firstChild:#HTMLHeadElement#,nodeValue:null,textContent:"\n    \n    \n    \n    \n    \n    \n    Mocha Tests\n  \n  \n    \n    \n    \n      mocha.setup('bdd');\n    \n    \n    \n      mocha.checkLeaks();\n      if (window.mochaPhantomJS) {\n        mochaPhantomJS.run();\n      } else {\n        mocha.run();\n      }\n    \n  \n\n",nodeType:1,nodeName:"HTML",prefix:null,childNodes:#function#,nextSibling:null,attributes:#NamedNodeMap#,ownerDocument:#@Circular#,namespaceURI:"http://www.w3.org/1999/xhtml",localName:"html",parentElement:null},preferredStylesheetSet:null,xmlVersion:null,location:Location{origin:"file://",hash:"",href:"file:///home/takuto/work/react/test-browser.html",pathname:"/home/takuto/work/react/test-browser.html",hostname:"",protocol:"file:",port:"",host:"",search:""},xmlEncoding:null,implementation:DOMImplementation{},referrer:"",head:HTMLHeadElement{profile:"",outerHTML:"<head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <script type=\"text/javascript\" src=\"./node_modules/es5-shim/es5-shim.js\"></script>\n    <script type=\"text/javascript\" src=\"./node_modules/es5-shim/es5-sham.js\"></script>\n    <link rel=\"stylesheet\" href=\"./node_modules/mocha/mocha.css\">\n    <title>Mocha Tests</title>\n  </head>",spellcheck:true,id:"",title:"",lang:"",classList:#DOMTokenList#,className:"",innerText:"\n    \n    \n    \n    \n    \n    \n    Mocha Tests\n  ",dir:"",innerHTML:"\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <script type=\"text/javascript\" src=\"./node_modules/es5-shim/es5-shim.js\"></script>\n    <script type=\"text/javascript\" src=\"./node_modules/es5-shim/es5-sham.js\"></script>\n    <link rel=\"stylesheet\" href=\"./node_modules/mocha/mocha.css\">\n    <title>Mocha Tests</title>\n  ",contentEditable:"inherit",tabIndex:-1,draggable:false,outerText:"\n    \n    \n    \n    \n    \n    \n    Mocha Tests\n  ",hidden:false,children:#function#,isContentEditable:false,style:#CSSStyleDeclaration#,dataset:#DOMStringMap#,clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:#HTMLTitleElement#,offsetParent:null,nextElementSibling:#HTMLBodyElement#,tagName:"HEAD",previousElementSibling:null,childElementCount:7,scrollLeft:0,firstElementChild:#HTMLMetaElement#,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:null,parentNode:#HTMLHtmlElement#,lastChild:#Text#,baseURI:"file:///home/takuto/work/react/test-browser.html",firstChild:#Text#,nodeValue:null,textContent:"\n    \n    \n    \n    \n    \n    \n    Mocha Tests\n  ",nodeType:1,nodeName:"HEAD",prefix:null,childNodes:#function#,nextSibling:#Text#,attributes:#NamedNodeMap#,ownerDocument:#@Circular#,namespaceURI:"http://www.w3.org/1999/xhtml",localName:"head",parentElement:#HTMLHtmlElement#},defaultView:DOMWindow{document:#@Circular#,window:#@Circular#,_phantom:#QtRuntimeObject#,callPhantom:#function#,mochaPhantomJS:#Object#,returnExports:undefined,Mocha:#function#,mocha:#Mocha#,before:#function#,after:#function#,beforeEach:#function#,afterEach:#function#,context:#function#,describe:#function#,xcontext:#function#,xdescribe:#function#,specify:#function#,it:#function#,xspecify:#function#,xit:#function#,SVGTextElement:#SVGTextElementConstructor#,frames:#@Circular#,HTMLBodyElement:#HTMLBodyElementConstructor#,"Int8Array":#Int8ArrayConstructor#,onpageshow:null,ArrayBuffer:#ArrayBufferConstructor#,onseeking:null,menubar:#BarInfo#,onended:null,onsuspend:null,pageXOffset:0,length:0,CSSPrimitiveValue:#CSSPrimitiveValueConstructor#,DOMStringList:#DOMStringListConstructor#,frameElement:undefined,SVGNumberList:#SVGNumberListConstructor#,HTMLMenuElement:#HTMLMenuElementConstructor#,NodeFilter:#NodeFilterConstructor#,MouseEvent:#MouseEventConstructor#,TextEvent:#TextEventConstructor#,onreset:null,HTMLQuoteElement:#HTMLQuoteElementConstructor#,onwebkitanimationiteration:null,WebKitPoint:#WebKitPointConstructor#,HTMLIsIndexElement:#HTMLIsIndexElementConstructor#,XMLHttpRequestUpload:#XMLHttpRequestUploadConstructor#,CSSCharsetRule:#CSSCharsetRuleConstructor#,HTMLAppletElement:#HTMLAppletElementConstructor#,HTMLCollection:#HTMLCollectionConstructor#,statusbar:#BarInfo#,XMLHttpRequestException:#XMLHttpRequestExceptionConstructor#,HTMLStyleElement:#HTMLStyleElementConstructor#,ondragleave:null,SVGFEColorMatrixElement:#SVGFEColorMatrixElementConstructor#,DOMException:#DOMExceptionConstructor#,HTMLFrameSetElement:#HTMLFrameSetElementConstructor#,clientInformation:#Navigator#,SVGPathSegClosePath:#SVGPathSegClosePathConstructor#,localStorage:#Storage#,onhashchange:null,SVGTransformList:#SVGTransformListConstructor#,onloadedmetadata:null,HTMLUListElement:#HTMLUListElementConstructor#,CharacterData:#CharacterDataConstructor#,name:"",ondragstart:null,HTMLLegendElement:#HTMLLegendElementConstructor#,XPathResult:#XPathResultConstructor#,HTMLPreElement:#HTMLPreElementConstructor#,onkeydown:null,onwebkitanimationstart:null,CanvasGradient:#CanvasGradientConstructor#,SVGFontFaceFormatElement:#SVGFontFaceFormatElementConstructor#,SVGGlyphElement:#SVGGlyphElementConstructor#,ondblclick:null,SVGTextPositioningElement:#SVGTextPositioningElementConstructor#,CSSRuleList:#CSSRuleListConstructor#,onmousemove:null,WebKitTransitionEvent:#WebKitTransitionEventConstructor#,outerHeight:0,styleMedia:#StyleMedia#,SQLException:#SQLExceptionConstructor#,ondragend:null,history:#History#,SVGUnitTypes:#SVGUnitTypesConstructor#,top:#@Circular#,SVGPathSegLinetoVerticalAbs:#SVGPathSegLinetoVerticalAbsConstructor#,SVGMatrix:#SVGMatrixConstructor#,parent:#@Circular#,DOMTokenList:#DOMTokenListConstructor#,"CanvasRenderingContext2D":#CanvasRenderingContext2DConstructor#,TextMetrics:#TextMetricsConstructor#,ClientRectList:#ClientRectListConstructor#,HTMLButtonElement:#HTMLButtonElementConstructor#,onunload:null,HTMLMapElement:#HTMLMapElementConstructor#,onpagehide:null,scrollY:0,RGBColor:#RGBColorConstructor#,oninvalid:null,Plugin:#PluginConstructor#,SVGFESpotLightElement:#SVGFESpotLightElementConstructor#,CSSStyleSheet:#CSSStyleSheetConstructor#,ondrag:null,MessagePort:#MessagePortConstructor#,Attr:#AttrConstructor#,EntityReference:#EntityReferenceConstructor#,HTMLTableCaptionElement:#HTMLTableCaptionElementConstructor#,HTMLObjectElement:#HTMLObjectElementConstructor#,self:#@Circular#,HTMLMeterElement:#HTMLMeterElementConstructor#,PageTransitionEvent:#PageTransitionEventConstructor#,MutationEvent:#MutationEventConstructor#,SVGDocument:#SVGDocumentConstructor#,pageYOffset:0,HTMLInputElement:#HTMLInputElementConstructor#,screenLeft:0,SVGAnimatedLength:#SVGAnimatedLengthConstructor#,onkeyup:null,SVGPathSegMovetoAbs:#SVGPathSegMovetoAbsConstructor#,HTMLScriptElement:#HTMLScriptElementConstructor#,SVGPathSegList:#SVGPathSegListConstructor#,onmousewheel:null,ImageData:#ImageDataConstructor#,SVGAnimatedNumber:#SVGAnimatedNumberConstructor#,SVGAnimatedEnumeration:#SVGAnimatedEnumerationConstructor#,SVGDescElement:#SVGDescElementConstructor#,SVGFEFuncGElement:#SVGFEFuncGElementConstructor#,onstorage:null,webkitURL:#DOMURL#,HTMLOListElement:#HTMLOListElementConstructor#,HTMLCanvasElement:#HTMLCanvasElementConstructor#,CSSFontFaceRule:#CSSFontFaceRuleConstructor#,XMLDocument:#DocumentConstructor#,SVGMaskElement:#SVGMaskElementConstructor#,HTMLBRElement:#HTMLBRElementConstructor#,CSSStyleRule:#CSSStyleRuleConstructor#,SVGZoomEvent:#SVGZoomEventConstructor#,HTMLFontElement:#HTMLFontElementConstructor#,HTMLTitleElement:#HTMLTitleElementConstructor#,Node:#NodeConstructor#,HTMLTableSectionElement:#HTMLTableSectionElementConstructor#,Text:#TextConstructor#,onclick:null,HTMLOptionElement:#HTMLOptionElementConstructor#,File:#FileConstructor#,onvolumechange:null,StyleSheetList:#StyleSheetListConstructor#,Range:#RangeConstructor#,SVGUseElement:#SVGUseElementConstructor#,WebKitBlobBuilder:#WebKitBlobBuilderConstructor#,onmouseover:null,SVGAnimatedInteger:#SVGAnimatedIntegerConstructor#,"Float32Array":#Float32ArrayConstructor#,HTMLAnchorElement:#HTMLAnchorElementConstructor#,innerHeight:300,onplaying:null,CanvasPattern:#CanvasPatternConstructor#,CSSMediaRule:#CSSMediaRuleConstructor#,SVGViewElement:#SVGViewElementConstructor#,SVGLengthList:#SVGLengthListConstructor#,HTMLEmbedElement:#HTMLEmbedElementConstructor#,NodeList:#NodeListConstructor#,SVGMarkerElement:#SVGMarkerElementConstructor#,DataView:#DataViewConstructor#,MessageChannel:#MessageChannelConstructor#,onmouseup:null,WebKitAnimationEvent:#WebKitAnimationEventConstructor#,SVGColor:#SVGColorConstructor#,HTMLParamElement:#HTMLParamElementConstructor#,offscreenBuffering:true,HashChangeEvent:#HashChangeEventConstructor#,HTMLTextAreaElement:#HTMLTextAreaElementConstructor#,onratechange:null,SVGAltGlyphElement:#SVGAltGlyphElementConstructor#,locationbar:#BarInfo#,SVGLength:#SVGLengthConstructor#,BeforeLoadEvent:#BeforeLoadEventConstructor#,KeyboardEvent:#KeyboardEventConstructor#,SVGFontFaceNameElement:#SVGFontFaceNameElementConstructor#,MimeTypeArray:#MimeTypeArrayConstructor#,HTMLAllCollection:#HTMLAllCollectionConstructor#,ondragover:null,SVGPolygonElement:#SVGPolygonElementConstructor#,HTMLDivElement:#HTMLDivElementConstructor#,HTMLBaseElement:#HTMLBaseElementConstructor#,SVGTSpanElement:#SVGTSpanElementConstructor#,HTMLBaseFontElement:#HTMLBaseFontElementConstructor#,SVGFESpecularLightingElement:#SVGFESpecularLightingElementConstructor#,SVGTRefElement:#SVGTRefElementConstructor#,SVGFEConvolveMatrixElement:#SVGFEConvolveMatrixElementConstructor#,onsubmit:null,HTMLIFrameElement:#HTMLIFrameElementConstructor#,HTMLBlockquoteElement:#HTMLBlockquoteElementConstructor#,SVGPreserveAspectRatio:#SVGPreserveAspectRatioConstructor#,HTMLLIElement:#HTMLLIElementConstructor#,ontouchstart:null,webkitNotifications:#NotificationCenter#,SVGAngle:#SVGAngleConstructor#,SVGPathSegCurvetoQuadraticRel:#SVGPathSegCurvetoQuadraticRelConstructor#,SVGFETileElement:#SVGFETileElementConstructor#,location:#Location#,onstalled:null,scrollbars:#BarInfo#,HTMLMarqueeElement:#HTMLMarqueeElementConstructor#,SVGPaint:#SVGPaintConstructor#,FileReader:#FileReaderConstructor#,Entity:#EntityConstructor#,onprogress:null,onwaiting:null,HTMLModElement:#HTMLModElementConstructor#,HTMLFormElement:#HTMLFormElementConstructor#,SVGPathSegLinetoHorizontalAbs:#SVGPathSegLinetoHorizontalAbsConstructor#,opener:null,ontimeupdate:null,onfocus:null,outerWidth:0,onplay:null,HTMLHeadElement:#HTMLHeadElementConstructor#,ondurationchange:null,oncanplay:null,onemptied:null,SVGSVGElement:#SVGSVGElementConstructor#,MimeType:#MimeTypeConstructor#,DOMSettableTokenList:#DOMSettableTokenListConstructor#,CDATASection:#CDATASectionConstructor#,closed:false,event:undefined,DOMParser:#DOMParserConstructor#,CSSValueList:#CSSValueListConstructor#,navigator:#Navigator#,screen:#Screen#,FileList:#FileListConstructor#,sessionStorage:#Storage#,SVGPathSegCurvetoCubicSmoothRel:#SVGPathSegCurvetoCubicSmoothRelConstructor#,ProcessingInstruction:#ProcessingInstructionConstructor#,ononline:null,SVGStopElement:#SVGStopElementConstructor#,oncontextmenu:null,SVGPathSegArcAbs:#SVGPathSegArcAbsConstructor#,RangeException:#RangeExceptionConstructor#,onoffline:null,WheelEvent:#WheelEventConstructor#,onresize:null,Storage:#StorageConstructor#,SVGFECompositeElement:#SVGFECompositeElementConstructor#,innerWidth:400,Rect:#RectConstructor#,SVGFEPointLightElement:#SVGFEPointLightElementConstructor#,SVGFEFuncBElement:#SVGFEFuncBElementConstructor#,MessageEvent:#MessageEventConstructor#,StorageEvent:#StorageEventConstructor#,HTMLElement:#HTMLElementConstructor#,onsearch:null,onseeked:null,Counter:#CounterConstructor#,SVGPathSegCurvetoCubicRel:#SVGPathSegCurvetoCubicRelConstructor#,NamedNodeMap:#NamedNodeMapConstructor#,HTMLOptGroupElement:#HTMLOptGroupElementConstructor#,HTMLHeadingElement:#HTMLHeadingElementConstructor#,Worker:#WorkerConstructor#,SVGPathSegLinetoVerticalRel:#SVGPathSegLinetoVerticalRelConstructor#,ondragenter:null,SVGFEBlendElement:#SVGFEBlendElementConstructor#,onmessage:null,onblur:null,ontouchend:null,HTMLParagraphElement:#HTMLParagraphElementConstructor#,SVGAnimatedNumberList:#SVGAnimatedNumberListConstructor#,SVGElement:#SVGElementConstructor#,HTMLFieldSetElement:#HTMLFieldSetElementConstructor#,SVGAnimateColorElement:#SVGAnimateColorElementConstructor#,SVGComponentTransferFunctionElement:#SVGComponentTransferFunctionElementConstructor#,ondrop:null,SVGRect:#SVGRectConstructor#,SVGDefsElement:#SVGDefsElementConstructor#,personalbar:#BarInfo#,HTMLSelectElement:#HTMLSelectElementConstructor#,SVGCursorElement:#SVGCursorElementConstructor#,OverflowEvent:#OverflowEventConstructor#,XPathException:#XPathExceptionConstructor#,oncanplaythrough:null,ProgressEvent:#ProgressEventConstructor#,status:"",onselect:null,onpause:null,"Int32Array":#Int32ArrayConstructor#,HTMLFrameElement:#HTMLFrameElementConstructor#,CSSRule:#CSSRuleConstructor#,devicePixelRatio:1,CSSStyleDeclaration:#CSSStyleDeclarationConstructor#,SVGVKernElement:#SVGVKernElementConstructor#,WebKitCSSTransformValue:#WebKitCSSTransformValueConstructor#,HTMLTableRowElement:#HTMLTableRowElementConstructor#,HTMLDirectoryElement:#HTMLDirectoryElementConstructor#,SVGTitleElement:#SVGTitleElementConstructor#,SVGSymbolElement:#SVGSymbolElementConstructor#,HTMLKeygenElement:#HTMLKeygenElementConstructor#,SVGFEFuncRElement:#SVGFEFuncRElementConstructor#,Option:#OptionConstructor#,SVGEllipseElement:#SVGEllipseElementConstructor#,Image:#ImageConstructor#,onloadeddata:null,WebKitCSSKeyframesRule:#WebKitCSSKeyframesRuleConstructor#,SVGLinearGradientElement:#SVGLinearGradientElementConstructor#,scrollX:0,onwebkittransitionend:null,screenY:0,onkeypress:null,WebSocket:#WebSocketConstructor#,toolbar:#BarInfo#,SVGTextContentElement:#SVGTextContentElementConstructor#,HTMLAreaElement:#HTMLAreaElementConstructor#,Event:#EventConstructor#,screenTop:0,SVGFontFaceUriElement:#SVGFontFaceUriElementConstructor#,SVGAnimatedAngle:#SVGAnimatedAngleConstructor#,Element:#ElementConstructor#,SVGScriptElement:#SVGScriptElementConstructor#,SVGSetElement:#SVGSetElementConstructor#,"Uint8Array":#Uint8ArrayConstructor#,SVGStyleElement:#SVGStyleElementConstructor#,HTMLOutputElement:#HTMLOutputElementConstructor#,SVGAnimatedString:#SVGAnimatedStringConstructor#,DocumentType:#DocumentTypeConstructor#,TouchEvent:#TouchEventConstructor#,crypto:#Crypto#,ontouchmove:null,UIEvent:#UIEventConstructor#,EventException:#EventExceptionConstructor#,defaultStatus:"",SVGPathSegCurvetoCubicSmoothAbs:#SVGPathSegCurvetoCubicSmoothAbsConstructor#,onwebkitanimationend:null,screenX:0,SVGPathSegArcRel:#SVGPathSegArcRelConstructor#,SVGPolylineElement:#SVGPolylineElementConstructor#,SVGAnimateTransformElement:#SVGAnimateTransformElementConstructor#,SVGFEDiffuseLightingElement:#SVGFEDiffuseLightingElementConstructor#,SVGTransform:#SVGTransformConstructor#,SVGPathSegCurvetoQuadraticSmoothAbs:#SVGPathSegCurvetoQuadraticSmoothAbsConstructor#,HTMLHRElement:#HTMLHRElementConstructor#,CSSImportRule:#CSSImportRuleConstructor#,defaultstatus:"",DocumentFragment:#DocumentFragmentConstructor#,"Int16Array":#Int16ArrayConstructor#,applicationCache:#DOMApplicationCache#,CSSPageRule:#CSSPageRuleConstructor#,onload:null,onerror:#function#,SVGLineElement:#SVGLineElementConstructor#,XPathEvaluator:#XPathEvaluatorConstructor#,SVGImageElement:#SVGImageElementConstructor#,EventSource:#EventSourceConstructor#,onchange:null,"Uint32Array":#Uint32ArrayConstructor#,SVGFontFaceSrcElement:#SVGFontFaceSrcElementConstructor#,SVGFEGaussianBlurElement:#SVGFEGaussianBlurElementConstructor#,SVGPathElement:#SVGPathElementConstructor#,MediaList:#MediaListConstructor#,console:#Console#,onabort:null,onbeforeunload:null,oninput:null,onloadstart:null,onmousedown:null,onmouseout:null,onpopstate:null,onscroll:null,ontouchcancel:null,StyleSheet:#StyleSheetConstructor#,CSSValue:#CSSValueConstructor#,DOMImplementation:#DOMImplementationConstructor#,Document:#DocumentConstructor#,Comment:#CommentConstructor#,Notation:#NotationConstructor#,HTMLDocument:#HTMLDocumentConstructor#,HTMLDListElement:#HTMLDListElementConstructor#,HTMLHtmlElement:#HTMLHtmlElementConstructor#,HTMLImageElement:#HTMLImageElementConstructor#,HTMLLabelElement:#HTMLLabelElementConstructor#,HTMLLinkElement:#HTMLLinkElementConstructor#,HTMLMetaElement:#HTMLMetaElementConstructor#,HTMLProgressElement:#HTMLProgressElementConstructor#,HTMLTableCellElement:#HTMLTableCellElementConstructor#,HTMLTableColElement:#HTMLTableColElementConstructor#,HTMLTableElement:#HTMLTableElementConstructor#,DOMStringMap:#DOMStringMapConstructor#,"Uint16Array":#Uint16ArrayConstructor#,WebKitCSSKeyframeRule:#WebKitCSSKeyframeRuleConstructor#,WebKitCSSMatrix:#WebKitCSSMatrixConstructor#,Clipboard:#ClipboardConstructor#,Blob:#BlobConstructor#,XMLSerializer:#XMLSerializerConstructor#,XMLHttpRequest:#XMLHttpRequestConstructor#,SharedWorker:#SharedWorkerConstructor#,PluginArray:#PluginArrayConstructor#,ClientRect:#ClientRectConstructor#,SVGAElement:#SVGAElementConstructor#,SVGAnimatedBoolean:#SVGAnimatedBooleanConstructor#,SVGAnimatedLengthList:#SVGAnimatedLengthListConstructor#,SVGAnimatedPreserveAspectRatio:#SVGAnimatedPreserveAspectRatioConstructor#,SVGAnimatedRect:#SVGAnimatedRectConstructor#,SVGAnimatedTransformList:#SVGAnimatedTransformListConstructor#,SVGCircleElement:#SVGCircleElementConstructor#,SVGClipPathElement:#SVGClipPathElementConstructor#,SVGElementInstance:#SVGElementInstanceConstructor#,SVGElementInstanceList:#SVGElementInstanceListConstructor#,SVGException:#SVGExceptionConstructor#,SVGGElement:#SVGGElementConstructor#,SVGGradientElement:#SVGGradientElementConstructor#,SVGMetadataElement:#SVGMetadataElementConstructor#,SVGNumber:#SVGNumberConstructor#,SVGPathSeg:#SVGPathSegConstructor#,SVGPathSegCurvetoCubicAbs:#SVGPathSegCurvetoCubicAbsConstructor#,SVGPathSegCurvetoQuadraticAbs:#SVGPathSegCurvetoQuadraticAbsConstructor#,SVGPathSegCurvetoQuadraticSmoothRel:#SVGPathSegCurvetoQuadraticSmoothRelConstructor#,SVGPathSegLinetoAbs:#SVGPathSegLinetoAbsConstructor#,SVGPathSegLinetoHorizontalRel:#SVGPathSegLinetoHorizontalRelConstructor#,SVGPathSegLinetoRel:#SVGPathSegLinetoRelConstructor#,SVGPathSegMovetoRel:#SVGPathSegMovetoRelConstructor#,SVGPatternElement:#SVGPatternElementConstructor#,SVGPoint:#SVGPointConstructor#,SVGPointList:#SVGPointListConstructor#,SVGRadialGradientElement:#SVGRadialGradientElementConstructor#,SVGRectElement:#SVGRectElementConstructor#,SVGRenderingIntent:#SVGRenderingIntentConstructor#,SVGStringList:#SVGStringListConstructor#,SVGSwitchElement:#SVGSwitchElementConstructor#,SVGTextPathElement:#SVGTextPathElementConstructor#,SVGAnimateElement:#SVGAnimateElementConstructor#,SVGFontElement:#SVGFontElementConstructor#,SVGFontFaceElement:#SVGFontFaceElementConstructor#,SVGHKernElement:#SVGHKernElementConstructor#,SVGMissingGlyphElement:#SVGMissingGlyphElementConstructor#,SVGForeignObjectElement:#SVGForeignObjectElementConstructor#,SVGFEComponentTransferElement:#SVGFEComponentTransferElementConstructor#,SVGFEDisplacementMapElement:#SVGFEDisplacementMapElementConstructor#,SVGFEDistantLightElement:#SVGFEDistantLightElementConstructor#,SVGFEDropShadowElement:#SVGFEDropShadowElementConstructor#,SVGFEFloodElement:#SVGFEFloodElementConstructor#,SVGFEFuncAElement:#SVGFEFuncAElementConstructor#,SVGFEImageElement:#SVGFEImageElementConstructor#,SVGFEMergeElement:#SVGFEMergeElementConstructor#,SVGFEMergeNodeElement:#SVGFEMergeNodeElementConstructor#,SVGFEMorphologyElement:#SVGFEMorphologyElementConstructor#,SVGFEOffsetElement:#SVGFEOffsetElementConstructor#,SVGFETurbulenceElement:#SVGFETurbulenceElementConstructor#,SVGFilterElement:#SVGFilterElementConstructor#,FormData:#FormDataConstructor#,FileError:#FileErrorConstructor#},domain:"",lastModified:"02/16/2015 11:07:10",anchors:#function#,applets:#function#,doctype:DocumentType{publicId:"",notations:null,name:"html",entities:null,systemId:"",internalSubset:null,previousSibling:null,parentNode:#@Circular#,lastChild:null,baseURI:null,firstChild:null,nodeValue:null,textContent:null,nodeType:10,nodeName:"html",prefix:null,childNodes:#function#,nextSibling:#HTMLHtmlElement#,attributes:null,ownerDocument:#@Circular#,namespaceURI:null,localName:null,parentElement:null},images:#function#,forms:#function#,charset:"UTF-8",styleSheets:StyleSheetList{"0":#CSSStyleSheet#,length:1},URL:"file:///home/takuto/work/react/test-browser.html",readyState:"complete",selectedStylesheetSet:null,characterSet:"UTF-8",title:"Mocha Tests",cookie:"",body:HTMLBodyElement{bgColor:"",text:"",background:"",aLink:"",vLink:"",link:"",outerHTML:"<body>\n    <div id=\"mocha\"></div>\n    <script type=\"text/javascript\" src=\"./node_modules/mocha/mocha.js\"></script>\n    <script type=\"text/javascript\">\n      mocha.setup('bdd');\n    </script>\n    <script type=\"text/javascript\" src=\"./bundle_test.js\"></script>\n    <script type=\"text/javascript\">\n      mocha.checkLeaks();\n      if (window.mochaPhantomJS) {\n        mochaPhantomJS.run();\n      } else {\n        mocha.run();\n      }\n    </script>\n  \n\n</body>",spellcheck:true,id:"",title:"",lang:"",classList:#DOMTokenList#,className:"",innerText:"",dir:"",innerHTML:"\n    <div id=\"mocha\"></div>\n    <script type=\"text/javascript\" src=\"./node_modules/mocha/mocha.js\"></script>\n    <script type=\"text/javascript\">\n      mocha.setup('bdd');\n    </script>\n    <script type=\"text/javascript\" src=\"./bundle_test.js\"></script>\n    <script type=\"text/javascript\">\n      mocha.checkLeaks();\n      if (window.mochaPhantomJS) {\n        mochaPhantomJS.run();\n      } else {\n        mocha.run();\n      }\n    </script>\n  \n\n",contentEditable:"inherit",tabIndex:-1,draggable:false,outerText:"",hidden:false,children:#function#,isContentEditable:false,style:#CSSStyleDeclaration#,dataset:#DOMStringMap#,clientWidth:400,scrollWidth:400,offsetWidth:400,offsetLeft:0,clientTop:0,lastElementChild:#HTMLScriptElement#,offsetParent:null,nextElementSibling:null,tagName:"BODY",previousElementSibling:#HTMLHeadElement#,childElementCount:5,scrollLeft:0,firstElementChild:#HTMLDivElement#,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:300,previousSibling:#Text#,parentNode:#HTMLHtmlElement#,lastChild:#Text#,baseURI:"file:///home/takuto/work/react/test-browser.html",firstChild:#Text#,nodeValue:null,textContent:"\n    \n    \n    \n      mocha.setup('bdd');\n    \n    \n    \n      mocha.checkLeaks();\n      if (window.mochaPhantomJS) {\n        mochaPhantomJS.run();\n      } else {\n        mocha.run();\n      }\n    \n  \n\n",nodeType:1,nodeName:"BODY",prefix:null,childNodes:#function#,nextSibling:null,attributes:#NamedNodeMap#,ownerDocument:#@Circular#,namespaceURI:"http://www.w3.org/1999/xhtml",localName:"body",parentElement:#HTMLHtmlElement#},inputEncoding:"UTF-8",xmlStandalone:false,documentURI:"file:///home/takuto/work/react/test-browser.html",defaultCharset:"iso-8859-1",links:#function#,previousSibling:null,parentNode:null,lastChild:HTMLHtmlElement{version:"",manifest:"",outerHTML:"<html><head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <script type=\"text/javascript\" src=\"./node_modules/es5-shim/es5-shim.js\"></script>\n    <script type=\"text/javascript\" src=\"./node_modules/es5-shim/es5-sham.js\"></script>\n    <link rel=\"stylesheet\" href=\"./node_modules/mocha/mocha.css\">\n    <title>Mocha Tests</title>\n  </head>\n  <body>\n    <div id=\"mocha\"></div>\n    <script type=\"text/javascript\" src=\"./node_modules/mocha/mocha.js\"></script>\n    <script type=\"text/javascript\">\n      mocha.setup('bdd');\n    </script>\n    <script type=\"text/javascript\" src=\"./bundle_test.js\"></script>\n    <script type=\"text/javascript\">\n      mocha.checkLeaks();\n      if (window.mochaPhantomJS) {\n        mochaPhantomJS.run();\n      } else {\n        mocha.run();\n      }\n    </script>\n  \n\n</body></html>",spellcheck:true,id:"",title:"",lang:"",classList:#DOMTokenList#,className:"",innerText:"",dir:"",innerHTML:"<head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <script type=\"text/javascript\" src=\"./node_modules/es5-shim/es5-shim.js\"></script>\n    <script type=\"text/javascript\" src=\"./node_modules/es5-shim/es5-sham.js\"></script>\n    <link rel=\"stylesheet\" href=\"./node_modules/mocha/mocha.css\">\n    <title>Mocha Tests</title>\n  </head>\n  <body>\n    <div id=\"mocha\"></div>\n    <script type=\"text/javascript\" src=\"./node_modules/mocha/mocha.js\"></script>\n    <script type=\"text/javascript\">\n      mocha.setup('bdd');\n    </script>\n    <script type=\"text/javascript\" src=\"./bundle_test.js\"></script>\n    <script type=\"text/javascript\">\n      mocha.checkLeaks();\n      if (window.mochaPhantomJS) {\n        mochaPhantomJS.run();\n      } else {\n        mocha.run();\n      }\n    </script>\n  \n\n</body>",contentEditable:"inherit",tabIndex:-1,draggable:false,outerText:"",hidden:false,children:#function#,isContentEditable:false,style:#CSSStyleDeclaration#,dataset:#DOMStringMap#,clientWidth:400,scrollWidth:400,offsetWidth:400,offsetLeft:0,clientTop:0,lastElementChild:#HTMLBodyElement#,offsetParent:null,nextElementSibling:null,tagName:"HTML",previousElementSibling:null,childElementCount:2,scrollLeft:0,firstElementChild:#HTMLHeadElement#,clientLeft:0,offsetHeight:60,clientHeight:300,offsetTop:0,scrollTop:0,scrollHeight:60,previousSibling:#DocumentType#,parentNode:#@Circular#,lastChild:#HTMLBodyElement#,baseURI:"file:///home/takuto/work/react/test-browser.html",firstChild:#HTMLHeadElement#,nodeValue:null,textContent:"\n    \n    \n    \n    \n    \n    \n    Mocha Tests\n  \n  \n    \n    \n    \n      mocha.setup('bdd');\n    \n    \n    \n      mocha.checkLeaks();\n      if (window.mochaPhantomJS) {\n        mochaPhantomJS.run();\n      } else {\n        mocha.run();\n      }\n    \n  \n\n",nodeType:1,nodeName:"HTML",prefix:null,childNodes:#function#,nextSibling:null,attributes:#NamedNodeMap#,ownerDocument:#@Circular#,namespaceURI:"http://www.w3.org/1999/xhtml",localName:"html",parentElement:null},baseURI:"file:///home/takuto/work/react/test-browser.html",firstChild:DocumentType{publicId:"",notations:null,name:"html",entities:null,systemId:"",internalSubset:null,previousSibling:null,parentNode:#@Circular#,lastChild:null,baseURI:null,firstChild:null,nodeValue:null,textContent:null,nodeType:10,nodeName:"html",prefix:null,childNodes:#function#,nextSibling:#HTMLHtmlElement#,attributes:null,ownerDocument:#@Circular#,namespaceURI:null,localName:null,parentElement:null},nodeValue:null,textContent:null,nodeType:9,nodeName:"#document",prefix:null,childNodes:#function#,nextSibling:null,attributes:null,ownerDocument:null,namespaceURI:null,localName:null,parentElement:null},namespaceURI:"http://www.w3.org/1999/xhtml",localName:"label",parentElement:HTMLDivElement{align:"",outerHTML:"<div><label data-reactid=\".0\"><input type=\"checkbox\" data-reactid=\".0.0\"><span data-reactid=\".0.1\">Off</span></label></div>",spellcheck:true,id:"",title:"",lang:"",classList:DOMTokenList{length:0},className:"",innerText:"Off",dir:"",innerHTML:"<label data-reactid=\".0\"><input type=\"checkbox\" data-reactid=\".0.0\"><span data-reactid=\".0.1\">Off</span></label>",contentEditable:"inherit",tabIndex:-1,draggable:false,outerText:"Off",hidden:false,children:#function#,isContentEditable:false,style:CSSStyleDeclaration{length:0,cssText:"",parentRule:null},dataset:DOMStringMap{},clientWidth:0,scrollWidth:0,offsetWidth:0,offsetLeft:0,clientTop:0,lastElementChild:#@Circular#,offsetParent:null,nextElementSibling:null,tagName:"DIV",previousElementSibling:null,childElementCount:1,scrollLeft:0,firstElementChild:#@Circular#,clientLeft:0,offsetHeight:0,clientHeight:0,offsetTop:0,scrollTop:0,scrollHeight:0,previousSibling:null,parentNode:null,lastChild:#@Circular#,baseURI:null,firstChild:#@Circular#,nodeValue:null,textContent:"Off",nodeType:1,nodeName:"DIV",prefix:null,childNodes:#function#,nextSibling:null,attributes:NamedNodeMap{length:0},ownerDocument:HTMLDocument{"_reactListenersID8561708815395832":0,bgColor:"",alinkColor:"",width:400,plugins:#function#,height:300,fgColor:"",vlinkColor:"",all:undefined,embeds:#function#,scripts:#function#,compatMode:"CSS1Compat",activeElement:#HTMLBodyElement#,dir:"",designMode:"off",linkColor:"",documentElement:#HTMLHtmlElement#,preferredStylesheetSet:null,xmlVersion:null,location:#Location#,xmlEncoding:null,implementation:#DOMImplementation#,referrer:"",head:#HTMLHeadElement#,defaultView:#DOMWindow#,domain:"",lastModified:"02/16/2015 11:07:10",anchors:#function#,applets:#function#,doctype:#DocumentType#,images:#function#,forms:#function#,charset:"UTF-8",styleSheets:#StyleSheetList#,URL:"file:///home/takuto/work/react/test-browser.html",readyState:"complete",selectedStylesheetSet:null,characterSet:"UTF-8",title:"Mocha Tests",cookie:"",body:#HTMLBodyElement#,inputEncoding:"UTF-8",xmlStandalone:false,documentURI:"file:///home/takuto/work/react/test-browser.html",defaultCharset:"iso-8859-1",links:#function#,previousSibling:null,parentNode:null,lastChild:#HTMLHtmlElement#,baseURI:"file:///home/takuto/work/react/test-browser.html",firstChild:#DocumentType#,nodeValue:null,textContent:null,nodeType:9,nodeName:"#document",prefix:null,childNodes:#function#,nextSibling:null,attributes:null,ownerDocument:null,namespaceURI:null,localName:null,parentElement:null},namespaceURI:"http://www.w3.org/1999/xhtml",localName:"div",parentElement:null}}
         ReactDOMComponent{_tag:"label",tagName:"LABEL",props:Object{children:[#Object#,"Off"]},_owner:Object{props:Object{labelOn:"On",labelOff:"Off"},_owner:null,_lifeCycleState:"MOUNTED",_pendingCallbacks:null,_currentElement:Object{type:#function#,key:null,ref:null,_owner:null,_context:#Object#,_store:#Object#},_pendingElement:null,refs:Object{},state:Object{isChecked:false},_pendingState:null,context:null,_compositeLifeCycleState:null,_rootNodeID:".0",_mountDepth:0,getDOMNode:#function#,onChange:#function#,_pendingForceUpdate:false,_renderedComponent:#@Circular#},_lifeCycleState:"MOUNTED",_pendingCallbacks:null,_currentElement:Object{type:"label",key:null,ref:null,_owner:Object{props:#Object#,_owner:null,_lifeCycleState:"MOUNTED",_pendingCallbacks:null,_currentElement:#Object#,_pendingElement:null,refs:#Object#,state:#Object#,_pendingState:null,context:null,_compositeLifeCycleState:null,_rootNodeID:".0",_mountDepth:0,getDOMNode:#function#,onChange:#function#,_pendingForceUpdate:false,_renderedComponent:#@Circular#},_context:Object{},_store:Object{validated:false,props:#Object#}},_pendingElement:null,_rootNodeID:".0",_mountDepth:1,_renderedChildren:Object{".0":Object{props:#Object#,_owner:#Object#,_lifeCycleState:"MOUNTED",_pendingCallbacks:null,_currentElement:#Object#,_pendingElement:null,refs:#Object#,state:#Object#,_pendingState:null,context:null,_compositeLifeCycleState:null,_rootNodeID:".0.0",_mountDepth:2,getDOMNode:#function#,_handleChange:#function#,_pendingForceUpdate:false,_renderedComponent:#ReactDOMComponent#,_mountIndex:0},".1":Object{props:"Off",_owner:null,_lifeCycleState:"MOUNTED",_pendingCallbacks:null,_currentElement:#Object#,_pendingElement:null,_rootNodeID:".0.1",_mountDepth:2,_mountIndex:1}}}

  --- [string] 'On'
  +++ [string] label.getDOMNode().textContent
  @@ -1,2 +1,3 @@
   O
  -n
  +ff

Have fun!

まとめ

Special Thanks to

mizchi さん
koba04 さん
saneyuki_s さん
この3人がいなければ React / Flux を使っていなかったと思う。ただただ感謝。

「React / Flux を実案件で使ってみた」その後

2015/02/16 歌舞伎座.tech#6「VirtualDOMとReact」

自己紹介

React / Flux を知ったきっかけ

React をどう勉強したか

今なら React をどう勉強するか

Flux をどう勉強したか

実案件で適用したところ

開発環境

チームにどう伝えたか

実際に使ってみてどうだったか (1)

実際に使ってみてどうだったか (2)

はまったところなど

テストについて(当時)

だが… Jest はつらい

Mocha + power-assert で書きたい

Jest の React サンプル

Mocha + power-assert に移植してみる

普通に動く

もっと中を覗いてみたくなった(output.maxDepth)

学びがあった

直しました

改めて覗いてみよう

まとめ

Special Thanks to

Takuto Wada

@t_wada