春のJavaScript祭　in GMO Yours の資料ですよー

1. Start React with
Browserify

2. About me
me = {
name: "muyuu",
Twitter: "@anticyborg",
belongs: "freelance",
job: "Web Front-End Engineer"
};

3. Agenda
• React
• browserify
• gulp

4. About React

5. About React
• Facebook製Viewフレームワーク
• コンポーネント指向
• VirtualDOM

6. About React
var Hello = React.createClass({
render: function(){
return (
<div className="hello">
Hello World!
</div>
);
}
});
React.render( <Hello />, document.getElementById('helloBox') );

7. 何が良いのか
• DOM操作を単純化
• コンポーネント単位での設計
• 可読性が高い
• メンテしやすい
• 壊れにくい

8. DOM操作を単純化
jQueryは「今ある要素に対して処理をする」方式
<ul>
<li class="list" data-item="1">list1</li>
<li class="list" data-item="2">list2</li>
<li class="list" data-item="3">list3</li>
</ul>
// js
$('.list').on("click", function(){
$(this).toggleClass('delete');
});

9. DOM操作を単純化
• DOM変更に弱い
• 現状の状態がDOMにしかない
• 拡張しずらい

10. DOM操作を単純化
Reactは「今のデータを元にDOMをレンダリングする」方式
var dataList = React.createClass({
render: function(){
var items = this.props.items.map(
function(item){ return <li>{item}</li>; }
);
return(
<ul>{items}</ul>
);
}
});

11. コンポーネント単位での設計
• 構成要素をコンポーネントに分ける
• 各コンポーネントの実装とDOMを1箇所に記述
• htmlライクな記述をJSファイル内に記述(JSX)

12. JSX?
JavaScript内にxmlライクなシンタックスで記述できる
var name = React.createClass({
render: function(){
return(
<div className="Wrap">
<div className="first">{this.props.first}</div>
<div className="last">{this.props.last}</div>
</div>
);
}
});

13. DEMO

14. Points
• React.createClass() でコンポーネントを作成
• renderメソッドにコンポーネントのDOMを記述
• propはコンポーネントに渡されるデータ
• stateはアプリケーションの状態を持つデータ
• stateに変更があった際には再描画される
• コンポーネント間で値を受け渡す

15. Components
• 1つのコンポーネントは機能もviewも1箇所に記述
• like Web components

16. Everything can be
Component!

17. Components
これからはアプリケーション設計の際には
• コンポーネント単位での設計
• 各コンポーネントの組み合わせ
これらをより重視して作らなければならない

18. Require?

19. JSはモジュールの仕組みがない
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="something.js"></script>
<script src="more.js"></script>
<script src="inquisitive.js"></script>
<script src="app.js"></script>
</body>
</html>

20. importしたい！

21. Browserify
Browserify

22. Browserify
// moduleA.js
module.exports = {
log: function(){
console.log('it is moduleA');
}
};
// moduleB.js
module.exports = {
log: function(){
console.log('this is moduleB');
}
};

23. Browserify
// main.js
var moduleA = require('moduleA');
var moduleB = require('moduleB');
moduleA.log();
moduleB.log();
// it is moduleA
// this is moduleB

24. Browserify
• jQueryを使う場合
// main.js
var $ = require('jquery');
$('.ele').on("click", anything);

25. Browserify
npm install -g browserify
npm install --save jquery
browserify main.js -o bundle.js
// make bundle.js

26. React Components with Browserify
var React = require('react');
var Child = require('./child'); // React component
var main = React.createClass({
render(){
return (
<div className="main">
<Child data={this.state.data}/>
</div>
);
}
});

27. Watchify
• ファイルを監視してBrowserifyのビルドを自動化
• 通常はrequireしたファイル全てを結合する
• 速度が遅い（Reactは130KB,jQueryは84KB）
• watchifyなら差分ビルドが可能

28. Browserify on Gulp
• jsだけではなくcss等のビルドもやってる
• gulp watch?
• gulp watchでは差分ビルドできない
• 遅い
• 1コマンドでwatchもwatchifyも動かしたい

29. DEMO

30. https://github.com/muyuu/
searchKindle

31. After AJAX

32. JSの必須スキルは
増える一方

33. MVW
Framework

34. Unit Test

35. E2E Test

36. Node.js

37. AltJS

38. Build Tool

39. おなかいっぱい

40. フロントエンドは進化の
速度が早すぎる

41. じゃあやめる？

42. 人はいつ死ぬかって？
自らを成長させることを
辞めたときさ
— おれ

43. like tuna?

44. like hamster?

45. No!

46. Have Frontier Spirit

47. 走って走って走って
なお走り続けてこそ
良い未来に進める

48. さ、Reactやろう