Your SlideShare is downloading. ×
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

532

Published on

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

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
532
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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> <!--<script src="build/JSXTransformer.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定義を返す。
  • 58. var Hello = React.createClass({ render() { return ( <div>Hello {this.props.name}</div> ) } }); React.render( <Hello name="World" />, document.getElementById('example') );
  • 59. Componentに対して、 propsで値の受け渡しが可能
  • 60. var Hello = React.createClass({ render() { return ( <div>Hello {this.props.name}</div> ) } }); React.render( <Hello name="World" />, document.getElementById('example') );
  • 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∼

×