Downloaded 47 times
React を導入した フロントエンド開発
- 1.
- 2.
- 3. アジェンダ • 絶対王者 Angularvs 挑戦者 React • React での SPA 設計 １．コンポーネントを分ける ２．ReactRouter ３．jQuery との共存
- 4. アジェンダ • 絶対王者 Angularvs 挑戦者 React • React での SPA 設計 １．コンポーネントを分ける ２．ReactRouter ３．jQuery との共存
- 5.
- 6.
- 8.
- 9.
- 10.
- 11.
- 12. システムの特徴 • バックエンド データ操作用 APIサーバを用意。 （外部連携を意図） • 管理画面＝ フロントエンドだけ 1. JS による SPA から API を叩く。 2. 管理画面なので そこまで厳しいパフォーマンス要件はない
- 13.
- 14.
- 15.
- 16.
- 18. 絶対王者 Angular • Googleが開発 • 高機能 フロントエンドMVC全部盛り 双方向データバインディング ヴァリデーションとか全自動機能多い • HTML拡張 デザイナーでも見やすい
- 20. React が注目された理由 • Facebook/ Instagram で開発+利用 • 双方向データバインディングに対する懐疑 （高機能すぎて複雑、処理が重い）
- 21. React の斬新なコンセプト • VirtualDOM １．実装者は仮想のDOMを記述 ２．Reactは変更発生した場合仮想DOMの 差分を確認し、リアルDOMを更新 ⇒ 軽量な描画コスト • 一方向なデータフロー かならず同じ順序で処理される。 状態が変わるたびに再描画される。 ⇒ 保守しやすい
- 22. React でできること • 画面描画処理の統一化 Reactのライフサイクルに合わせて描画 • 画面パーツのコンポーネント化 共通のパーツ整理
- 23.
- 24. 比較項目 Angular React 機能高機能 管理画面構築は 非常に楽。 実装が必要 デザイナー親和性 高 基本HTML 低 JSX+カスタムタグは 読みづらい パフォーマンス 低 高 将来性 1系×（打ち切り） 2系？？ 枯れてない。 どんどん変わる。 好み もりもりすぎなん じゃないの？ 一方向なデータフロー が読みやすい！
- 25.
- 26.
- 27. アジェンダ • 絶対王者 Angularvs 挑戦者 React • React での SPA 設計 １．コンポーネントを分ける ２．ReactRouter ３．jQuery との共存
- 28.
- 29. React での設計ポイント • 画面パーツをコンポーネントにする。 •親コンポーネント子コンポーネントで 値の受け渡し＋イベントを整理する。
- 30.
- 31.
- 32. var HomeScreen =React.createClass(){ render : function() {return <div> <DaySelect/> <TableSchedule/> <ReservationFooter/> <Modal> <ReserveForm/> </Modal> </div>})..}; JSX＋コンポーネントタグ ＝JS内のrender()中に HTMLと独自タグを記述
- 33. var DaySelect =React.createClass(){ //初期化 getInitialState(){...}, //描画前 componentWillMount() {...}, //描画 render() {...}, //描画後 componentDidMount() {...}, //クリックイベント onClickBotton() {...} }
- 34.
- 35.
- 36.
- 37. var HomeScreen =React.createClass(){ render : function() {return <div> <DaySelect/> <TableSchedule onClickReservation={this.onClickReservation}/> <ReservationFooter/> <Modal> <ReserveForm/> </Modal>
- 38. var HomeScreen =React.createClass({ onClickReservation: function(reservation) { this.setState({ inputReservation: reservation, isModalOpen: true, doneButtonName:‘予約修正’, cancelButtonName:'予約取消' }); }, setState() ⇒再描画
- 39.
- 40. var HomeScreen =React.createClass(){ render : function() {return <div> <DaySelect/> <TableSchedule onClickReservation={this.onClickReservation}/> <ReservationFooter/> <Modal> <ReserveForm onDone={this.updateReservation}/> </Modal> </div>})..};
- 41. updateReservation: function(reservation) { request.post(apiHost +‘/shops/’ + this.props.shopId + ‘/reservations’) .query({token:accessToken}) .send(query) .end(function (err, res) { //保存完了したら戻る処理 }; }; ※request オブジェクトは superagent.js をラップ
- 42. React コンポーネント理解のポイント • ライフサイクルメソッドで生成される！ •setState() で再描画される！
- 43.
- 44. React Router • ルーティングライブラリ •URL と Reactコンポーネントの対応定義 • ヘッダー、サイドバー、フッターの共通化
- 45. SPA=1画面制御 ログイン画面 ホーム画面 週間スケジュール 画面 すべて app.jsからRouting される
- 46.
- 47. <Route name="app" path="/"handler={App}> <Route name="home" path="/shops/:shopId“ handler={HomeScreen}/> <Route name="weekSchedule“ path="/shops/:shopId/week_schedule“ handler={WeekScheduleScreen}/> <Route name="login" path="/" handler={LoginScreen}/> <DefaultRoute handler={LoginScreen}/> </Route> 一元管理
- 48.
- 49.
- 50.
- 51. jQuery 初期化は画面描画時 <script> //画面描画後に呼ばれる jQueryの処理 $(document).ready(function(){ // datepckr に機能をバインドする $("#datepckr").datepicker(); }); </script> <input type="text" id="datepckr" />
- 52. React は setStateで何度も再描画 getInitialState : 初期化時に1回だけ componentWillMount ： render 前処理 render ： 描画処理 componentDidMount ： render 後処理 componentWillUpdate ： State 変更後 render の前 componentDidUpdate ： State 変更後 componentWillUnmount ：コンポーネント削除前 ＝クリックイベント処理のバインドが外れてしまう
- 53.
- 54. render 直後であれば DOM操作可能 getInitialState : 初期化時に1回だけ componentWillMount ： render 前処理 render ： 描画処理 componentDidMount ： render 後処理 componentWillUpdate ： State 変更後 render の前 componentDidUpdate ： State 変更後 componentWillUnmount ：コンポーネント削除前
- 55. componentDidMount: function (){ self = this; $('.input-date').datepicker( { //Datepicker 初期化のための値 dateFormat: 'yy-mm-dd', //選択時のイベント処理 onSelect: function(dateVal) { //親コンポーネントに変数渡すなどの処理 } } ); }
- 56. jQuery が data-reactidを いじってしまうと 破壊されるので注意 <section data-reactid=".0.1.0.1"> <div data-reactid=".0.1.0.1.0"> <dl data-reactid=".0.1.0.1.0.0"> <dt data-reactid=".0.1.0.1.0.0.0">
- 57.
- 58.
- 59. まとめ • Angular もいいけどReact が平易そう • React での SPA 設計 １．コンポーネント化が基本 ２．ReactRouterで統一的に画面遷移制御 ３．jQuery との共存の方法は ライフサイクルを把握する
- 60.
- 61. アジェンダ • 絶対王者 Angularvs 挑戦者 React • React での SPA 設計 １．コンポーネントを分ける ２．ReactRouter ３．jQuery との共存 • もうちょっとがんばれば Flux
- 62.
- 63. 改善できるところ • もっと Fluxをやるなら
- 64.
- 65.
- 66. • View = Reactでつくった画面。 onClick などイベントがあればActionを呼ぶ。 • Action onClickなどのイベント処理の集約クラス。 イベントが発生したら Dispatcher を呼ぶ。 渡すデータのことをペイロードと呼ぶ。 • Dispatcher Actionからデータ（ペイロード）をもらって Store を操作 するクラス。 • Store Ajax や Localstorage などデータ取得・保存系の処理を行 うクラス。
- 67. 結局Fluxとは 一方向MVC • Model ≒Store • View = View • Controller ≒ Action + Dispatcher ※厳密には違うが、理解の取っ掛かりに
- 68.
- 69. Fluxに変更する上で必要なこと たとえば HomeScreen コンポーネントなら 画面描画系⇒ React コンポーネント （いままで通り） イベント系 onClickReservation ⇒ Action クラスへ 保存イベント系 onSave ⇒ Action + Dispatcher クラスへ 保存処理 request.post (ajax) ⇒ Store クラスへ