React.js meetup #2 http://eventdots.jp/event/568979

1. Google Closure Toolsで
作った大規模サービスに
Reactを導入した話
React.js meetup #2
@ama_ch
2015/09/08

2. 自己紹介
• 天野 祐介 (@ama_ch)
• front-end developer
• サイボウズ株式会社
• kintone

3. React導入前
• Closure Library (JSライブラリ)
• Closure Compiler (minify&型検査)
• Closure Templates (テンプレートエンジン)
• プログラマ15名
• JS30万行

4. React導入前
• UIはClosure Library + Closure Templatesで実装
• コンポーネント指向 (goog.ui.Component)
• Closure Compilerで型を保証
• 全体的にコードが長くなりがちでイベント制御などが
複雑
• サードパーティライブラリとの相性が悪い

5. 疑問
• Closure CompilerでReactのコードをコンパイ
ルできるの？
• ReactのコードをClosure Compilerで型チェッ
クできるの？
• Closure LibraryとReactを混ぜるとどういう書
き方になるの？
• 既存UI資産はどうなるの？

6. 疑問
• Closure CompilerでReactのコードをコンパイ
ルできるの？
• ReactのコードをClosure Compilerで型チェッ
クできるの？
• Closure LibraryとReactを混ぜるとどういう書
き方になるの？
• 既存UI資産はどうなるの？

7. • できる
• Closure Compilerではexternsというd.tsみた
いなファイルを渡すことでリネームから保護できる
• Reactのexternsがオープンソースで公開されてる
https://github.com/steida/react-externs
• 微妙に動かないところがあるから独自externsも書
いてる

8. 疑問
• Closure CompilerでReactのコードをコンパイ
ルできるの？
• ReactのコードをClosure Compilerで型チェッ
クできるの？
• Closure LibraryとReactを混ぜるとどういう書
き方になるの？
• 既存UI資産はどうなるの？

9. • React.createClass()では型チェックが効かない
• React.Component(ES6 Classes)を使いたいけ
どまだES6使ってない
• ES5 + Closure LibraryでReact.Component
を使う方法で解決。JSDocアノテーションも効く
• 型に守られたReact!!!

10. NG
sample.components.MyComponent = React.createclass({
/**
* @param {string} name
* @return {string}
*/
hello: function(name) {
return 'Hello, ' + name;
},
/** @override */
render: function() {
var text = this.hello(1); // Error!
return (
<div>{text}</div>
);
}
});

11. OK
/**
* @param {Object} props
* @param {Object} context
* @constructor
* @extends {React.Component}
*/
sample.components.MyComponent = function(props, context) {
sample.components.MyComponent.base(this, 'constructor', props, context);
};
goog.inherits(sample.components.MyComponent, React.Component);
/**
* @param {string} name
* @return {string}
*/
sample.components.MyComponent.prototype.hello = function(name) {
return 'Hello, ' + name;
};
/** @override */
sample.components.MyComponent.prototype.render = function() {
var text = this.hello(1); // Error!
return (
<div>{text}</div>
);
};

12. 疑問
• Closure CompilerでReactのコードをコンパイ
ルできるの？
• ReactのコードをClosure Compilerで型チェッ
クできるの？
• Closure LibraryとReactを混ぜるとどういう書
き方になるの？
• 既存UI資産はどうなるの？

13. • ClosureコンポーネントツリーとReactコンポーネ
ントツリーの接続部分をどうするか
• ベースはClosureなのでgoog.ui.Componentで
Reactコンポーネントをラップした
• Reactツリーの中ではコンポーネント同士でイベント
のやり取りをしたりメソッド呼び出しができない
• React部分にはFluxを導入
• DispatcherをClosureで書き直したほぼ素のFlux

14. Closure
Closure
Closure React
Closure
React React
Flux

15. 疑問
• Closure CompilerでReactのコードをコンパイ
ルできるの？
• ReactのコードをClosure Compilerで型チェッ
クできるの？
• Closure LibraryとReactを混ぜるとどういう書
き方になるの？
• 既存UI資産はどうなるの？

16. • Reactコンポーネント内でgoog.ui.Component
をrenderする
• componentDidMountと
componentDidUpdateで手動更新すれば対応可
能
• 既存UI資産をReact化してJSXの中で使える
• けっこうコツがいる

17. React/Flux導入の効果
• Fluxによって役割分担しやすくなった
• Viewが肥大化しない
• イベントを追ってあっちこっち飛ばないのが楽
• モデルが一箇所だけで更新される安心感
• 手続き的に書いてたUIコードがほぼマークアップに
なるのがすごい

18. 今後
• チーム内に布教
• 既存UI資産のReactコンポーネント化
• ベストプラクティスの探求

19. 現場からは以上です！
Thank you!

20. WE RE HIRING!!
型のあるReact/Fluxを探求したい方はぜひサイボウズへ！
http://cybozu.co.jp/company/job/