React を導入した フロントエンド開発
- 3. アジェンダ • 絶対王者 Angular vs 挑戦者 React • React での SPA 設計 １．コンポーネントを分ける ２．ReactRouter ３．jQuery との共存
- 4. アジェンダ • 絶対王者 Angular vs 挑戦者 React • React での SPA 設計 １．コンポーネントを分ける ２．ReactRouter ３．jQuery との共存
- 6. 飲食店向け予約一元管理
- 10. デモ
- 11. フロントエンド 実装期間1ヶ月弱
- 12. システムの特徴 • バックエンド データ操作用 API サーバを用意。 （外部連携を意図） • 管理画面＝ フロントエンドだけ 1. JS による SPA から API を叩く。 2. 管理画面なので そこまで厳しいパフォーマンス要件はない
- 15. JS フレームワーク戦国時代
- 18. 絶対王者 Angular • Google が開発 • 高機能 フロントエンドMVC全部盛り 双方向データバインディング ヴァリデーションとか全自動機能多い • HTML拡張 デザイナーでも見やすい
- 20. React が注目された理由 • Facebook / Instagram で開発+利用 • 双方向データバインディングに対する懐疑 （高機能すぎて複雑、処理が重い）
- 21. React の斬新なコンセプト • VirtualDOM １．実装者は仮想のDOMを記述 ２．React は変更発生した場合仮想DOMの 差分を確認し、リアルDOMを更新 ⇒ 軽量な描画コスト • 一方向なデータフロー かならず同じ順序で処理される。 状態が変わるたびに再描画される。 ⇒ 保守しやすい
- 22. React でできること • 画面描画処理の統一化 React のライフサイクルに合わせて描画 • 画面パーツのコンポーネント化 共通のパーツ整理
- 24. 比較項目 Angular React 機能 高機能 管理画面構築は 非常に楽。 実装が必要 デザイナー親和性 高 基本HTML 低 JSX+カスタムタグは 読みづらい パフォーマンス 低 高 将来性 1系×（打ち切り） 2系？？ 枯れてない。 どんどん変わる。 好み もりもりすぎなん じゃないの？ 一方向なデータフロー が読みやすい！
- 26. React での SPA 設計
- 27. アジェンダ • 絶対王者 Angular vs 挑戦者 React • React での SPA 設計 １．コンポーネントを分ける ２．ReactRouter ３．jQuery との共存
- 29. React での設計ポイント • 画面パーツをコンポーネントにする。 • 親コンポーネント子コンポーネントで 値の受け渡し＋イベントを整理する。
- 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() {...} }
- 35. http://qiita.com/kawachi/items/092bfc281f88e3a6e456 ライフサイクルさえ 把握すればReact を制したも同然
- 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() ⇒再描画
- 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. React Router
- 44. React Router • ルーティングライブラリ • URL と Reactコンポーネントの対応定義 • ヘッダー、サイドバー、フッターの共通化
- 45. SPA=1画面制御 ログイン画面 ホーム画面 週間スケジュール 画面 すべて app.js からRouting される
- 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. jQuery との共存
- 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 ：コンポーネント削除前 ＝クリックイベント処理のバインドが外れてしまう
- 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">
- 59. まとめ • Angular もいいけど React が平易そう • React での SPA 設計 １．コンポーネント化が基本 ２．ReactRouterで統一的に画面遷移制御 ３．jQuery との共存の方法は ライフサイクルを把握する
- 60. ご清聴ありがとうございました
- 61. アジェンダ • 絶対王者 Angular vs 挑戦者 React • React での SPA 設計 １．コンポーネントを分ける ２．ReactRouter ３．jQuery との共存 • もうちょっとがんばれば Flux
- 62. 改善できそうなところ
- 63. 改善できるところ • もっと Flux をやるなら
- 64. 良く見るFluxの図
- 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 クラスへ