SlideShare a Scribd company logo
1 of 20
Download to read offline
Google Closure Toolsで
作った大規模サービスに
Reactを導入した話
React.js meetup #2
@ama_ch
2015/09/08
自己紹介
• 天野 祐介 (@ama_ch)
• front-end developer
• サイボウズ株式会社
• kintone
React導入前
• Closure Library (JSライブラリ)
• Closure Compiler (minify&型検査)
• Closure Templates (テンプレートエンジン)
• プログラマ15名
• JS30万行
React導入前
• UIはClosure Library + Closure Templatesで実装
• コンポーネント指向 (goog.ui.Component)
• Closure Compilerで型を保証
• 全体的にコードが長くなりがちでイベント制御などが
複雑
• サードパーティライブラリとの相性が悪い
疑問
• Closure CompilerでReactのコードをコンパイ
ルできるの?
• ReactのコードをClosure Compilerで型チェッ
クできるの?
• Closure LibraryとReactを混ぜるとどういう書
き方になるの?
• 既存UI資産はどうなるの?
疑問
• Closure CompilerでReactのコードをコンパイ
ルできるの?
• ReactのコードをClosure Compilerで型チェッ
クできるの?
• Closure LibraryとReactを混ぜるとどういう書
き方になるの?
• 既存UI資産はどうなるの?
• できる
• Closure Compilerではexternsというd.tsみた
いなファイルを渡すことでリネームから保護できる
• Reactのexternsがオープンソースで公開されてる
https://github.com/steida/react-externs
• 微妙に動かないところがあるから独自externsも書
いてる
疑問
• Closure CompilerでReactのコードをコンパイ
ルできるの?
• ReactのコードをClosure Compilerで型チェッ
クできるの?
• Closure LibraryとReactを混ぜるとどういう書
き方になるの?
• 既存UI資産はどうなるの?
• React.createClass()では型チェックが効かない
• React.Component(ES6 Classes)を使いたいけ
どまだES6使ってない
• ES5 + Closure LibraryでReact.Component
を使う方法で解決。JSDocアノテーションも効く
• 型に守られたReact!!!
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>
);
}
});
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>
);
};
疑問
• Closure CompilerでReactのコードをコンパイ
ルできるの?
• ReactのコードをClosure Compilerで型チェッ
クできるの?
• Closure LibraryとReactを混ぜるとどういう書
き方になるの?
• 既存UI資産はどうなるの?
• ClosureコンポーネントツリーとReactコンポーネ
ントツリーの接続部分をどうするか
• ベースはClosureなのでgoog.ui.Componentで
Reactコンポーネントをラップした
• Reactツリーの中ではコンポーネント同士でイベント
のやり取りをしたりメソッド呼び出しができない
• React部分にはFluxを導入
• DispatcherをClosureで書き直したほぼ素のFlux
Closure
Closure
Closure React
Closure
React React
Flux
疑問
• Closure CompilerでReactのコードをコンパイ
ルできるの?
• ReactのコードをClosure Compilerで型チェッ
クできるの?
• Closure LibraryとReactを混ぜるとどういう書
き方になるの?
• 既存UI資産はどうなるの?
• Reactコンポーネント内でgoog.ui.Component
をrenderする
• componentDidMountと
componentDidUpdateで手動更新すれば対応可
能
• 既存UI資産をReact化してJSXの中で使える
• けっこうコツがいる
React/Flux導入の効果
• Fluxによって役割分担しやすくなった
• Viewが肥大化しない
• イベントを追ってあっちこっち飛ばないのが楽
• モデルが一箇所だけで更新される安心感
• 手続き的に書いてたUIコードがほぼマークアップに
なるのがすごい
今後
• チーム内に布教
• 既存UI資産のReactコンポーネント化
• ベストプラクティスの探求
現場からは以上です!
Thank you!
WE RE HIRING!!
型のあるReact/Fluxを探求したい方はぜひサイボウズへ!
http://cybozu.co.jp/company/job/

More Related Content

More from Yusuke Amano

市場価値で給料が決まるサイボウズの社員だけど、転職ドラフトに参加して給与交渉に挑戦してみました —結果編—
市場価値で給料が決まるサイボウズの社員だけど、転職ドラフトに参加して給与交渉に挑戦してみました —結果編—市場価値で給料が決まるサイボウズの社員だけど、転職ドラフトに参加して給与交渉に挑戦してみました —結果編—
市場価値で給料が決まるサイボウズの社員だけど、転職ドラフトに参加して給与交渉に挑戦してみました —結果編—Yusuke Amano
 
現役スクラムマスターが考える「こんなプロダクトオーナーは嫌だ」
現役スクラムマスターが考える「こんなプロダクトオーナーは嫌だ」現役スクラムマスターが考える「こんなプロダクトオーナーは嫌だ」
現役スクラムマスターが考える「こんなプロダクトオーナーは嫌だ」Yusuke Amano
 
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-Yusuke Amano
 
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-Yusuke Amano
 
ウォーターフォールからスクラム、そしてリモートスクラムへ〜サイボウズのスクラムの形〜
ウォーターフォールからスクラム、そしてリモートスクラムへ〜サイボウズのスクラムの形〜ウォーターフォールからスクラム、そしてリモートスクラムへ〜サイボウズのスクラムの形〜
ウォーターフォールからスクラム、そしてリモートスクラムへ〜サイボウズのスクラムの形〜Yusuke Amano
 
kintone開発チームのアジャイル開発の取り組み
kintone開発チームのアジャイル開発の取り組みkintone開発チームのアジャイル開発の取り組み
kintone開発チームのアジャイル開発の取り組みYusuke Amano
 
チームワークあふれる働き方って何だろう?
チームワークあふれる働き方って何だろう?チームワークあふれる働き方って何だろう?
チームワークあふれる働き方って何だろう?Yusuke Amano
 
あなたの開発チームには、チームワークがあふれていますか?
 あなたの開発チームには、チームワークがあふれていますか? あなたの開発チームには、チームワークがあふれていますか?
あなたの開発チームには、チームワークがあふれていますか?Yusuke Amano
 
サイボウズはいかにしてReactを導入したか
サイボウズはいかにしてReactを導入したかサイボウズはいかにしてReactを導入したか
サイボウズはいかにしてReactを導入したかYusuke Amano
 
我々がスクラム挑戦権を得るためにやったこと
我々がスクラム挑戦権を得るためにやったこと我々がスクラム挑戦権を得るためにやったこと
我々がスクラム挑戦権を得るためにやったことYusuke Amano
 
エンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めました
エンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めましたエンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めました
エンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めましたYusuke Amano
 
kintoneフロントエンド開発 モダン化への道
kintoneフロントエンド開発 モダン化への道kintoneフロントエンド開発 モダン化への道
kintoneフロントエンド開発 モダン化への道Yusuke Amano
 
こだわりのkintone
こだわりのkintoneこだわりのkintone
こだわりのkintoneYusuke Amano
 
Closure Toolsの紹介
Closure Toolsの紹介Closure Toolsの紹介
Closure Toolsの紹介Yusuke Amano
 
Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜
Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜
Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜Yusuke Amano
 

More from Yusuke Amano (15)

市場価値で給料が決まるサイボウズの社員だけど、転職ドラフトに参加して給与交渉に挑戦してみました —結果編—
市場価値で給料が決まるサイボウズの社員だけど、転職ドラフトに参加して給与交渉に挑戦してみました —結果編—市場価値で給料が決まるサイボウズの社員だけど、転職ドラフトに参加して給与交渉に挑戦してみました —結果編—
市場価値で給料が決まるサイボウズの社員だけど、転職ドラフトに参加して給与交渉に挑戦してみました —結果編—
 
現役スクラムマスターが考える「こんなプロダクトオーナーは嫌だ」
現役スクラムマスターが考える「こんなプロダクトオーナーは嫌だ」現役スクラムマスターが考える「こんなプロダクトオーナーは嫌だ」
現役スクラムマスターが考える「こんなプロダクトオーナーは嫌だ」
 
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-
 
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-
 
ウォーターフォールからスクラム、そしてリモートスクラムへ〜サイボウズのスクラムの形〜
ウォーターフォールからスクラム、そしてリモートスクラムへ〜サイボウズのスクラムの形〜ウォーターフォールからスクラム、そしてリモートスクラムへ〜サイボウズのスクラムの形〜
ウォーターフォールからスクラム、そしてリモートスクラムへ〜サイボウズのスクラムの形〜
 
kintone開発チームのアジャイル開発の取り組み
kintone開発チームのアジャイル開発の取り組みkintone開発チームのアジャイル開発の取り組み
kintone開発チームのアジャイル開発の取り組み
 
チームワークあふれる働き方って何だろう?
チームワークあふれる働き方って何だろう?チームワークあふれる働き方って何だろう?
チームワークあふれる働き方って何だろう?
 
あなたの開発チームには、チームワークがあふれていますか?
 あなたの開発チームには、チームワークがあふれていますか? あなたの開発チームには、チームワークがあふれていますか?
あなたの開発チームには、チームワークがあふれていますか?
 
サイボウズはいかにしてReactを導入したか
サイボウズはいかにしてReactを導入したかサイボウズはいかにしてReactを導入したか
サイボウズはいかにしてReactを導入したか
 
我々がスクラム挑戦権を得るためにやったこと
我々がスクラム挑戦権を得るためにやったこと我々がスクラム挑戦権を得るためにやったこと
我々がスクラム挑戦権を得るためにやったこと
 
エンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めました
エンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めましたエンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めました
エンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めました
 
kintoneフロントエンド開発 モダン化への道
kintoneフロントエンド開発 モダン化への道kintoneフロントエンド開発 モダン化への道
kintoneフロントエンド開発 モダン化への道
 
こだわりのkintone
こだわりのkintoneこだわりのkintone
こだわりのkintone
 
Closure Toolsの紹介
Closure Toolsの紹介Closure Toolsの紹介
Closure Toolsの紹介
 
Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜
Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜
Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜
 

Recently uploaded

TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdfAyachika Kitazaki
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦Sadao Tokuyama
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~arts yokohama
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 

Recently uploaded (12)

TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 
2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
 

Google Closure Toolsで作った大規模サービスにReactを導入した話