Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

30,168 views

Published on

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

Published in: Technology
  • Be the first to comment

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

  1. 1. Reactってなんだ?
  2. 2. JavaScriptで UIを作るためのライブラリ
  3. 3. SIROKのUI構築の変遷
  4. 4. My365: PHP テンプレートエンジンとして使う
  5. 5. ピプル Apache Velocity サーバサイド処理
  6. 6. Growth Push Backbone + Handlebars 本格的にJSでUI実装
  7. 7. Growth Point TypeScript + Backbone + Handlebars 生のJSつらくなってきた
  8. 8. Growthbeat TypeScript + Backbone + Underscore template ロジックレスつらい
  9. 9. 新規プロジェクト TypeScript + React?
  10. 10. Reactとは?
  11. 11. JavaScriptで UIを作るためのライブラリ
  12. 12. MVCのViewの部分のみを担当 基本的にそれ以外には関わらない
  13. 13. 高速な描画処理 Virtual DOMという概念
  14. 14. ビュー操作の難しさ
  15. 15. DOM操作は遅い。 想像しているよりもずっと。
  16. 16. 大抵は、こういうことがしたい。 データ (JS Object) ビュー (HTML)
  17. 17. サーバから取得したり、ユーザー が変更してデータが変化。 データ (JS Object) ビュー (HTML) 更新
  18. 18. データの更新に合わせてビューも 更新する必要がある。 データ (JS Object) ビュー (HTML) 更新
  19. 19. 1.  まるごと書き換えるパターン 2.  差分更新するパターン
  20. 20. まるごと書き換えるパターン データが少しでも変化したら、 HTMLを全部まるごと書き換える。 データ (JS Object) ビュー (HTML) テンプレートで全更新
  21. 21. DOM操作は遅い。 想像しているよりもずっと。
  22. 22. リストオブジェクトのデータ追加 <table>への大量の行追加
  23. 23. 突然の死
  24. 24. エンジニアががんばって DOMを差分更新するパターン データ (JS Object) ビュー (HTML) 変化したところだけ 差分更新
  25. 25. どこかでミスして 変な中間状態におちいる
  26. 26. 結局のところ死
  27. 27. 1.  簡単だけど遅い 2.  高速だけど複雑
  28. 28. なぜReactか?
  29. 29. 結局のところ死
  30. 30. そこでVirtual DOM
  31. 31. データ (JS Object) ビュー (HTML) テンプレートで全更新 (簡単) Virtual DOM システム的に差分更新 (高速)
  32. 32. エンジニア的には、常に全更新で 良いので簡単で間違えない。 システム的には、差分更新なので 高速に実行可能。
  33. 33. つまり、簡単で速い
  34. 34. 1.  Virtual DOMの全更新 2.  Virtual DOMの差分計算 3. DOMへの差分適用 ・・・は「DOMの全更新」より速い
  35. 35. Hello React
  36. 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. 37. React.render( <h1>Hello, world!</h1>, document.getElementById('example') );
  38. 38. #example要素の中に <h1>Hello, world!</h1> を表示
  39. 39. React.render( <h1>Hello, world!</h1>, document.getElementById('example') );
  40. 40. JSX
  41. 41. これじゃない
  42. 42. これでもない
  43. 43. JSX is a JavaScript syntax extension that looks similar to XML.
  44. 44. XMLっぽいのが使える JavaScript
  45. 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. 46. JSXTransformerで JavaScriptに変換してから実行 JSX JavaScript react.js JSXTransformer 実行
  47. 47. JSXのプリコンパイル
  48. 48. 実行時にコンパイルしたくない。
  49. 49. npm install -g react-tools JSX JavaScript react.js react-tools 実行
  50. 50. React.render( React.createElement("h1", null, "Hello, world!"), document.getElementById('example') );
  51. 51. <!DOCTYPE html> <html> <head> <script src="build/react.js"></script> <!--<script src="build/JSXTransformer.js"></ script>--> </head> <body> <div id="example"></div> <script src="build/helloworld.js"></script> </body> </html>
  52. 52. Component
  53. 53. Componentとは?
  54. 54. Viewをオブジェクト化したもの
  55. 55. var Hello = React.createClass({ render() { return ( <div>Hello {this.props.name}</div> ) } }); React.render( <Hello name="World" />, document.getElementById('example') );
  56. 56. React#createClassで、 Componetを作成
  57. 57. renderメソッドで、 描画するDOM定義を返す。
  58. 58. var Hello = React.createClass({ render() { return ( <div>Hello {this.props.name}</div> ) } }); React.render( <Hello name="World" />, document.getElementById('example') );
  59. 59. Componentに対して、 propsで値の受け渡しが可能
  60. 60. var Hello = React.createClass({ render() { return ( <div>Hello {this.props.name}</div> ) } }); React.render( <Hello name="World" />, document.getElementById('example') );
  61. 61. props
  62. 62. props?
  63. 63. Componentに対して 外部から値を渡す受け口
  64. 64. propsが外部との インタフェースになる propsで何でも渡せる(関数も)
  65. 65. propsはImmutableに扱う 外からpropsを渡し直すときは、 setProps、replaceProps
  66. 66. state
  67. 67. state?
  68. 68. Component内部の 状態を保持するための変数
  69. 69. propsが外部とのインタフェース stateは内部の状態変数 State props render Component
  70. 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. 71. あるComponentのstateが、 その子のpropsになるかも
  72. 72. Users User ID Name … User ID Name … … [ {ID, Name, …}, {ID, Name, …}, {ID, Name, …}, … ]
  73. 73. var User = React.createClass({ render() { return ( <li>Hello {this.props.user.name}</li> ) } });
  74. 74. var Users = React.createClass({ // …(略)… render() { var users = this.state.users.map((user) => { return <User user={user}/> }); return ( <ul> {users} </ul> ) } });
  75. 75. まとめ
  76. 76. 便利そう。
  77. 77. 次回予告
  78. 78. ・週に1回、誰かが発表しています。 ・発表者はリレー形式でやってい ます。 ・内容は指名された人が主張した いことや興味があることなど ・時間は、10∼30分程度です。 ・形式も色々です。(プレゼン形式、 クイズ形式、など) ・途中参加、途中退出もOKです。 ・飛び込みでの発表もOKです。
  79. 79. @uchidas
  80. 80. 3/10(火) 19:00∼

×