SIROK技術勉強会 #1 「Reactってなんだ？」

1. Reactってなんだ？

2. JavaScriptで UIを作るためのライブラリ

3. SIROKのUI構築の変遷

4. My365: PHP テンプレートエンジンとして使う

5. ピプル Apache Velocity サーバサイド処理

6. Growth Push Backbone + Handlebars 本格的にJSでUI実装

7. Growth Point TypeScript + Backbone + Handlebars 生のJSつらくなってきた

8. Growthbeat TypeScript + Backbone + Underscore template ロジックレスつらい

9. 新規プロジェクト TypeScript + React？

10. Reactとは？

11. JavaScriptで UIを作るためのライブラリ

12. MVCのViewの部分のみを担当基本的にそれ以外には関わらない

13. 高速な描画処理 Virtual DOMという概念

14. ビュー操作の難しさ

15. DOM操作は遅い。想像しているよりもずっと。

16. 大抵は、こういうことがしたい。データ (JS Object) ビュー (HTML)

17. サーバから取得したり、ユーザーが変更してデータが変化。データ (JS Object) ビュー (HTML) 更新

18. データの更新に合わせてビューも更新する必要がある。データ (JS Object) ビュー (HTML) 更新

19. 1.  まるごと書き換えるパターン 2.  差分更新するパターン

20. まるごと書き換えるパターンデータが少しでも変化したら、 HTMLを全部まるごと書き換える。データ (JS Object) ビュー (HTML) テンプレートで全更新

21. DOM操作は遅い。想像しているよりもずっと。

22. リストオブジェクトのデータ追加 <table>への大量の行追加

23. 突然の死

24. エンジニアががんばって DOMを差分更新するパターンデータ (JS Object) ビュー (HTML) 変化したところだけ差分更新

25. どこかでミスして変な中間状態におちいる

26. 結局のところ死

27. 1.  簡単だけど遅い 2.  高速だけど複雑

28. なぜReactか？

29. 結局のところ死

30. そこでVirtual DOM

31. データ (JS Object) ビュー (HTML) テンプレートで全更新 (簡単) Virtual DOM システム的に差分更新 (高速)

32. エンジニア的には、常に全更新で良いので簡単で間違えない。システム的には、差分更新なので高速に実行可能。

33. つまり、簡単で速い

34. 1.  Virtual DOMの全更新 2.  Virtual DOMの差分計算 3. DOMへの差分適用･･･は「DOMの全更新」より速い

35. Hello React

36. <!DOCTYPE html> <html> <head> <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></ script> </head> <body> <div id="example"></div> <script type="text/jsx"> React.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>

37. React.render( <h1>Hello, world!</h1>, document.getElementById('example') );

38. #example要素の中に <h1>Hello, world!</h1> を表示

39. React.render( <h1>Hello, world!</h1>, document.getElementById('example') );

40. JSX

41. これじゃない

42. これでもない

43. JSX is a JavaScript syntax extension that looks similar to XML.

44. XMLっぽいのが使える JavaScript

45. <!DOCTYPE html> <html> <head> <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></ script> </head> <body> <div id="example"></div> <script type="text/jsx"> React.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>

46. JSXTransformerで JavaScriptに変換してから実行 JSX JavaScript react.js JSXTransformer 実行

47. JSXのプリコンパイル

48. 実行時にコンパイルしたくない。

49. npm install -g react-tools JSX JavaScript react.js react-tools 実行

50. React.render( React.createElement("h1", null, "Hello, world!"), document.getElementById('example') );

51. <!DOCTYPE html> <html> <head> <script src="build/react.js"></script>  </head> <body> <div id="example"></div> <script src="build/helloworld.js"></script> </body> </html>

52. Component

53. Componentとは？

54. Viewをオブジェクト化したもの

55. var Hello = React.createClass({ render() { return ( <div>Hello {this.props.name}</div> ) } }); React.render( <Hello name="World" />, document.getElementById('example') );

56. React#createClassで、 Componetを作成

57. renderメソッドで、描画するDOM定義を返す。

59. Componentに対して、 propsで値の受け渡しが可能

61. props

62. props？

63. Componentに対して外部から値を渡す受け口

64. propsが外部とのインタフェースになる propsで何でも渡せる(関数も)

65. propsはImmutableに扱う外からpropsを渡し直すときは、 setProps、replaceProps

66. state

67. state？

68. Component内部の状態を保持するための変数

69. propsが外部とのインタフェース stateは内部の状態変数 State props render Component

70. var Hello = React.createClass({ getInitialState() { return { name: 'World' }; }, onClick() { this.setState({ name: this.state.name + '!' }); }, render() { return ( <div> <h1>Hello {this.state.name}</h1> <button onClick={this.onClick}>click</button> </div> ) } });

71. あるComponentのstateが、その子のpropsになるかも

72. Users User ID Name … User ID Name … … [ {ID, Name, …}, {ID, Name, …}, {ID, Name, …}, … ]

73. var User = React.createClass({ render() { return ( <li>Hello {this.props.user.name}</li> ) } });

74. var Users = React.createClass({ // …(略)… render() { var users = this.state.users.map((user) => { return <User user={user}/> }); return ( <ul> {users} </ul> ) } });

75. まとめ

76. 便利そう。

77. 次回予告

78. ・週に1回、誰かが発表しています。・発表者はリレー形式でやっています。・内容は指名された人が主張したいことや興味があることなど・時間は、10∼30分程度です。・形式も色々です。(プレゼン形式、クイズ形式、など) ・途中参加、途中退出もOKです。・飛び込みでの発表もOKです。

79. @uchidas

80. 3/10(火) 19:00∼

SIROK技術勉強会 #1 「Reactってなんだ？」

Naoyuki Kataoka

Transcript