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.

React を導入した フロントエンド開発

22,955 views

Published on

フレームワークを利用した シングルページアプリケーションの制御

GMOインターネット次世代システム研究室の勉強会発表資料。
2015年12月作成。
案件対応期間は2015年4月-8月。

Published in: Internet
  • Be the first to comment

React を導入した フロントエンド開発

  1. 1. React を導入した フロントエンド開発 ~フレームワークを利用した シングルページアプリケーションの制御~ 2015.12 GMOインターネット 次世代システム研究室 松井 大介
  2. 2. 管理画面のフロントエンドに Reactを導入したっていう話です。
  3. 3. アジェンダ • 絶対王者 Angular vs 挑戦者 React • React での SPA 設計 1.コンポーネントを分ける 2.ReactRouter 3.jQuery との共存
  4. 4. アジェンダ • 絶対王者 Angular vs 挑戦者 React • React での SPA 設計 1.コンポーネントを分ける 2.ReactRouter 3.jQuery との共存
  5. 5. GMOスマートリザーブの ご紹介
  6. 6. 飲食店向け予約一元管理
  7. 7. 2015年4月-8月 次世代システムが サービス立ち上げを 支援しました
  8. 8. 【日本】 マネージャー 1名 ベトナムブリッジ 1名 【ベトナム】 ベトナム 3名
  9. 9. デモ
  10. 10. フロントエンド 実装期間1ヶ月弱
  11. 11. システムの特徴 • バックエンド データ操作用 API サーバを用意。 (外部連携を意図) • 管理画面= フロントエンドだけ 1. JS による SPA から API を叩く。 2. 管理画面なので そこまで厳しいパフォーマンス要件はない
  12. 12. SPA シングルページアプリケーション 1.HTML のレンダリングを 全てクライアントサイドでやる! 2.サーバにアクセスするのはAPIで データ取得・保存するときだけ!
  13. 13. SPA シングルページアプリケーション 1.HTML のレンダリングを 全てクライアントサイドでやる! 2.サーバにアクセスするのはAPIで データ取得・保存するときだけ! ここぞとばかりに 新しい JSフレームワーク 使いたい!!!
  14. 14. JS フレームワーク戦国時代
  15. 15. Googleトレンド https://www.google.co.jp/trends/explore#q=angular%20js%2C%20backbone%20js%2 C%20react%20js&cmpt=q&tz=Etc%2FGMT-9
  16. 16. 絶対王者 Angular • Google が開発 • 高機能 フロントエンドMVC全部盛り 双方向データバインディング ヴァリデーションとか全自動機能多い • HTML拡張 デザイナーでも見やすい
  17. 17. React が注目された理由 • Facebook / Instagram で開発+利用 • 双方向データバインディングに対する懐疑 (高機能すぎて複雑、処理が重い)
  18. 18. React の斬新なコンセプト • VirtualDOM 1.実装者は仮想のDOMを記述 2.React は変更発生した場合仮想DOMの 差分を確認し、リアルDOMを更新 ⇒ 軽量な描画コスト • 一方向なデータフロー かならず同じ順序で処理される。 状態が変わるたびに再描画される。 ⇒ 保守しやすい
  19. 19. React でできること • 画面描画処理の統一化 React のライフサイクルに合わせて描画 • 画面パーツのコンポーネント化 共通のパーツ整理
  20. 20. 描画パフォーマンス https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance- comparison-knockout
  21. 21. 比較項目 Angular React 機能 高機能 管理画面構築は 非常に楽。 実装が必要 デザイナー親和性 高 基本HTML 低 JSX+カスタムタグは 読みづらい パフォーマンス 低 高 将来性 1系×(打ち切り) 2系?? 枯れてない。 どんどん変わる。 好み もりもりすぎなん じゃないの? 一方向なデータフロー が読みやすい!
  22. 22. 学習の平易さを優先し React 採用しました★
  23. 23. React での SPA 設計
  24. 24. アジェンダ • 絶対王者 Angular vs 挑戦者 React • React での SPA 設計 1.コンポーネントを分ける 2.ReactRouter 3.jQuery との共存
  25. 25. 画面パーツを React コンポーネント化
  26. 26. React での設計ポイント • 画面パーツをコンポーネントにする。 • 親コンポーネント子コンポーネントで 値の受け渡し+イベントを整理する。
  27. 27. DaySelect コンポーネント TableSchedule コンポーネント ReservationFooterコンポーネント
  28. 28. Modal コンポーネント ReserveForm コンポーネント
  29. 29. var HomeScreen = React.createClass(){ render : function() {return <div> <DaySelect/> <TableSchedule/> <ReservationFooter/> <Modal> <ReserveForm/> </Modal> </div>})..}; JSX+コンポーネントタグ =JS内のrender()中に HTMLと独自タグを記述
  30. 30. var DaySelect = React.createClass(){ //初期化 getInitialState(){...}, //描画前 componentWillMount() {...}, //描画 render() {...}, //描画後 componentDidMount() {...}, //クリックイベント onClickBotton() {...} }
  31. 31. http://qiita.com/kawachi/items/092bfc281f88e3a6e456
  32. 32. http://qiita.com/kawachi/items/092bfc281f88e3a6e456 ライフサイクルさえ 把握すればReact を制したも同然
  33. 33. TableSchedule コンポーネント 予約時間を クリック
  34. 34. var HomeScreen = React.createClass(){ render : function() {return <div> <DaySelect/> <TableSchedule onClickReservation={this.onClickReservation}/> <ReservationFooter/> <Modal> <ReserveForm/> </Modal>
  35. 35. var HomeScreen = React.createClass({ onClickReservation: function(reservation) { this.setState({ inputReservation: reservation, isModalOpen: true, doneButtonName:‘予約修正’, cancelButtonName:'予約取消' }); }, setState() ⇒再描画
  36. 36. ReserveForm コンポーネント 修正ボタン クリック
  37. 37. var HomeScreen = React.createClass(){ render : function() {return <div> <DaySelect/> <TableSchedule onClickReservation={this.onClickReservation}/> <ReservationFooter/> <Modal> <ReserveForm onDone={this.updateReservation}/> </Modal> </div>})..};
  38. 38. updateReservation: function(reservation) { request.post(apiHost + ‘/shops/’ + this.props.shopId + ‘/reservations’) .query({token:accessToken}) .send(query) .end(function (err, res) { //保存完了したら戻る処理 }; }; ※request オブジェクトは superagent.js をラップ
  39. 39. React コンポーネント理解のポイント • ライフサイクルメソッドで生成される! • setState() で再描画される!
  40. 40. React Router
  41. 41. React Router • ルーティングライブラリ • URL と Reactコンポーネントの対応定義 • ヘッダー、サイドバー、フッターの共通化
  42. 42. SPA=1画面制御 ログイン画面 ホーム画面 週間スケジュール 画面 すべて app.js からRouting される
  43. 43. ログイン画面 login_screen 予約ページフッター reservation_footer 週間スケジュール week_schedule ホーム画面 home_screen メニューヘッダー menu_header メニューヘッダー menu_header 予約ページフッター reservation_footer すべて app.js からRouting される
  44. 44. <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> 一元管理
  45. 45. jQuery との共存
  46. 46. jQuery UI Datepicker
  47. 47. jQuery UI Datepicker 普通に使うと 動かない!
  48. 48. jQuery 初期化は画面描画時 <script> //画面描画後に呼ばれる jQuery の処理 $(document).ready(function(){ // datepckr に機能をバインドする $("#datepckr").datepicker(); }); </script> <input type="text" id="datepckr" />
  49. 49. React は setState で何度も再描画 getInitialState : 初期化時に1回だけ componentWillMount : render 前処理 render : 描画処理 componentDidMount : render 後処理 componentWillUpdate : State 変更後 render の前 componentDidUpdate : State 変更後 componentWillUnmount :コンポーネント削除前 =クリックイベント処理のバインドが外れてしまう
  50. 50. http://qiita.com/kawachi/items/092bfc281f88e3a6e456
  51. 51. render 直後であれば DOM 操作可能 getInitialState : 初期化時に1回だけ componentWillMount : render 前処理 render : 描画処理 componentDidMount : render 後処理 componentWillUpdate : State 変更後 render の前 componentDidUpdate : State 変更後 componentWillUnmount :コンポーネント削除前
  52. 52. componentDidMount: function () { self = this; $('.input-date').datepicker( { //Datepicker 初期化のための値 dateFormat: 'yy-mm-dd', //選択時のイベント処理 onSelect: function(dateVal) { //親コンポーネントに変数渡すなどの処理 } } ); }
  53. 53. 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">
  54. 54. 他にがんばったところ Canvas in React
  55. 55. やらなかったこと • サーバサイドレンダリング 主にSPAのSEO対策用処置。 管理画面なのでSEO関係なかった。 • Flux 開発期間の都合であきらめた。 今後改善できる部分。
  56. 56. まとめ • Angular もいいけど React が平易そう • React での SPA 設計 1.コンポーネント化が基本 2.ReactRouterで統一的に画面遷移制御 3.jQuery との共存の方法は ライフサイクルを把握する
  57. 57. ご清聴ありがとうございました
  58. 58. アジェンダ • 絶対王者 Angular vs 挑戦者 React • React での SPA 設計 1.コンポーネントを分ける 2.ReactRouter 3.jQuery との共存 • もうちょっとがんばれば Flux
  59. 59. 改善できそうなところ
  60. 60. 改善できるところ • もっと Flux をやるなら
  61. 61. 良く見るFluxの図
  62. 62. 公式にあるFluxの図 (実はシンプル)
  63. 63. • View = React でつくった画面。 onClick などイベントがあればActionを呼ぶ。 • Action onClickなどのイベント処理の集約クラス。 イベントが発生したら Dispatcher を呼ぶ。 渡すデータのことをペイロードと呼ぶ。 • Dispatcher Actionからデータ(ペイロード)をもらって Store を操作 するクラス。 • Store Ajax や Localstorage などデータ取得・保存系の処理を行 うクラス。
  64. 64. 結局Fluxとは 一方向MVC • Model ≒ Store • View = View • Controller ≒ Action + Dispatcher ※厳密には違うが、理解の取っ掛かりに
  65. 65. 流れは一方向
  66. 66. Fluxに変更する上で必要なこと たとえば HomeScreen コンポーネントなら 画面描画系 ⇒ React コンポーネント (いままで通り) イベント系 onClickReservation ⇒ Action クラスへ 保存イベント系 onSave ⇒ Action + Dispatcher クラスへ 保存処理 request.post (ajax) ⇒ Store クラスへ

×