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 Redux Storybook Swagger でフロント爆速開発

2,025 views

Published on

React Redux Storybook Swaggerを導入したプロジェクトのお話

Published in: Technology
  • Be the first to comment

React Redux Storybook Swagger でフロント爆速開発

  1. 1. React Redux Storybook Swagger でフロント爆速開発
  2. 2. 自己紹介 - 名前:小田翔太 - 経歴: - 上智大学卒業 - 旅行パッケージを扱うベンチャー企業でアルバイト - ビズリーチ新卒入社 (4月で2年目) - 〜10月、新卒事業部 - 〜現在、キャリアトレック事業部 - 職業:サーバーサイドエンジニア - C#(.Net), VB, SqlServer(1年) - Java, MySql(1年) - 自作WebAppFW作成中 - Carbon(https://github.com/ShotaOd/carbon) - 趣味 - サッカー - スノボ
  3. 3. 今日話すこと - 導入結果 - 実績 - 全体像 - 技術スタック - 開発フロー - 開発フロー - プレゼンテーション開発(React x Storybook) - Flux開発(Redux x Swagger) - 今後の課題
  4. 4. 導入結果
  5. 5. 実績(途中経過) - プロジェクト - CareerTrekサービスの求職者側トップページのSPA化 - 開発期間 - 約1ヶ月(2月末開始 〜 3月23日リリース) - エンジニア - 新卒×5名 - ベテラン1名
  6. 6. 全体像
  7. 7. 開発フロー(before) 要件 画面仕様 機能仕様 マークアップ実装 サーバーサイド実装 htmlテンプレート(thymeleaf ...) 非同期リクエスト(js) バリデーション(java, js) javascript実装 (アニメーションetc) グレーゾーン
  8. 8. 開発フロー(before) 要件 画面仕様 機能仕様 マークアップ実装 サーバーサイド実装 htmlテンプレート(thymeleaf ...) 非同期リクエスト(js) バリデーション(java, js) javascript実装 (アニメーションetc) グレーゾーン Htmlが不十分で サーバーサイド エンジニアが書き直す
  9. 9. 開発フロー(before) 要件 画面仕様 機能仕様 マークアップ実装 サーバーサイド実装 htmlテンプレート(thymeleaf ...) 非同期リクエスト(js) バリデーション(java, js) javascript実装 (アニメーションetc) グレーゾーン Htmlが不十分で サーバーサイド エンジニアが書き直す そもそも javascript誰が書くんだっ け。。。
  10. 10. 開発フロー(before) 要件 画面仕様 機能仕様 マークアップ実装 サーバーサイド実装 htmlテンプレート(thymeleaf ...) 非同期リクエスト(js) バリデーション(java, js) javascript実装 (アニメーションetc) グレーゾーン Htmlが不十分で サーバーサイド エンジニアが書き直す そもそも javascript誰が書くんだっ け。。。 APIの仕様が変わったから Javascriptでundefined...
  11. 11. 開発フロー(before) 要件 画面仕様 機能仕様 マークアップ実装 サーバーサイド実装 htmlテンプレート(thymeleaf ...) 非同期リクエスト(js) バリデーション(java, js) javascript実装 (アニメーションetc) グレーゾーン Htmlが不十分で サーバーサイド エンジニアが書き直す そもそも javascript誰が書くんだっ け。。。 APIの仕様が変わったから Javascriptでundefined... フロントとバックエンドで 納品物のキャッチボール 終わらない。。。
  12. 12. 開発フロー(after) 要件 画面仕様 機能仕様 UIパーツ実装 APIドキュメント作成 Redux実装 サーバーサイド実装 フロント実装 ReactとReduxで実装すると。。。
  13. 13. 開発フロー(after) 要件 画面仕様 機能仕様 APIドキュメント作成 Redux実装 表示確認 With Storybook サーバーサイド実装 動作確認 With Swagger フロント実装 UIパーツ実装 StorybookとSwaggerを足してあげると。。。
  14. 14. フロントの構成
  15. 15. React Storybook フロントエンド主要技術スタック WebPack Redux react-css-module Swagger redux-thunk redux-actions プレゼンテーション Flux
  16. 16. Redux構成 Presentation Action Redux connect Prev State Reducer Next State Redux thunk Props Store Middleware
  17. 17. プレゼンテーション構成
  18. 18. プレゼンテーション開発 React with Storybook
  19. 19. プレゼンテーション開発トピック - jsが自由すぎて辛い - プレゼンテーションがどこでデータを受け取るか - 状態管理の意思統一 - ReactとStorybook で高速デバッグ
  20. 20. jsの品質保証、苦労してわかったおすすめLint設定 - ベースはairbnb - CIに入れてエンジニアのソースコードへの意識向上 - MAX厳しく but カスタマイズは必要(後述) - 例えば - comma-dangle - jsx-a11y/img-has-alt - ES6、Reactの勉強にもなる - react/jsx-boolean-value - object-shorthand ※ 人柱が必要
  21. 21. やりすぎLintルール - consistent-return - react/prefer-stateless-function - class-methods-use-this - arrow-body-style
  22. 22. consistent-return - メソッドのreturnが統一されていない場合にエラー - ある条件のときだけは返り値があって、 - ない場合に、undefinedとしたときに、冗長になる
  23. 23. react/prefer-stateless-function - Component拡張クラスで、this・propsを一度も使用しない場 合に、Classで定義すると警告 class-methods-use-this - Class定義内で、this参照がない場合に警告
  24. 24. arrow-body-style NG OK
  25. 25. プレゼンテーションがどこでデータを受け取るか 参考:http://andrewhfarmer.com/react-ajax-best-practices/ 1. Root Component 2. Container Componets 3. Redux Async Actions 4. Relay
  26. 26. プレゼンテーションがどこでデータを受け取るか 参考:http://andrewhfarmer.com/react-ajax-best-practices/ 1. Root Component 2. Container Componets 3. Redux Async Actions 4. Relay
  27. 27. React 登場人物 Container Component ● データソースを知っている(stateからデータを取得する) ● 子(Component)をたばねる ● 何をしたいかを知っている Presentational Component ● viewのパーツに相当 ● ‘具体的に何を’表示するかとかには関心がない
  28. 28. 概念図(再掲) プレゼンテーションがどこでデータを受け取るか
  29. 29. 状態管理の意思統一 - 状態は原則持たない - Reactはあくまでピュアな関数 - 例外:表示関連の状態 - サイドバーの表示状態とかまでRedux管理してられない
  30. 30. Redux Three Principles ● Single source of truth ● State is read-only ● Mutations are written as pure functions
  31. 31. Storybookって - UI開発環境 兼 UIカタログ - iframeでReactのコンポーネントをうごかす - 静的なアウトプット(カタログ)の生成ができる
  32. 32. 準備① - npm install -g @kadira/storybook - package.json
  33. 33. 準備② ./.storybook/config.js
  34. 34. 準備③ ./.storybook/webpack.config.js
  35. 35. Storybook 実演
  36. 36. React × Storybook まとめ - アプリケーションに組み込まずに開発 - Lintをあえて入れない - レスポンシブ対応チェック - データパターン分パーツを用意 - 静的ファイル生成でPM・デザイナーに確認
  37. 37. Flux開発 Redux with Swagger
  38. 38. Flux開発トピック - Redux構成 - state管理が自由すぎてundefined… ← redux-actions - 一方通行は良いけど、非同期処理もしたい... ← redux-thunk - Swaggerで高速開発
  39. 39. Fluxフロー(再掲) Presentation Action Redux connect Prev State Reducer Next State Redux thunk Props Store Middleware
  40. 40. ロジック実装 - Redux ActionCreator① 使用ライブラリ:redux-actions ● Flux-Standard-Actionsというactionオブジェクトの規約通りに action creatorを定義してくれるライブラリ
  41. 41. ロジック実装 - Redux ActionCreator② コードサンプル
  42. 42. ロジック実装 - Redux Async Action① 使用したライブラリ:redux-thunk ● 非同期Actionを発火できるようにするためのライブラリ APIリクエスト レスポンス取得 thunk がないと... ブロック
  43. 43. ロジック実装 - Redux Async Action② redux-thunkがあると... request Action API Request API Response finish Action presentation middleware network show loader show data
  44. 44. Flux開発フロー - apiドキュメント作成 - 静的apiドキュメント生成 - api通信部分実装(モックサーバー) - サーバーサイド完成後、結合確認
  45. 45. Swagger - API周りをサポートするとっても大きいツール群 - OpenAPI Specification(Swagger Specification)という規約 - JSON or YAMLで記述 今回使用するツール - ドキュメント作成 - swagger-editor - ドキュメント生成(静的) - bootprint-openapi - モックサーバー - swagger-tools
  46. 46. APIドキュメント作成 Swagger Editor - OpenSpecificationを解釈してくれる公式のエディタ - リアルタイムでプレビューを反映してくれる - Docker Container、node、webページとかいろいろな環境で 動くのがある - 今回は、Docker Containerを使用 (https://hub.docker.com/r/swaggerapi/swagger-editor/)
  47. 47. 静的apiドキュメント生成① bootprint-openapi - npm - npm install --save-dev bootprint bootprint-openapi - package.json
  48. 48. 静的apiドキュメント生成②
  49. 49. API通信部分実装 モックサーバー:swagger-tools 準備 - 認証処理は自前で実装する - CORS(Preflightリクエスト)対応する
  50. 50. モックサーバーサンプルソース
  51. 51. 認証処理を追加
  52. 52. CORS対応
  53. 53. 今後の課題 - Storybookのテスト機能を導入できていない - Redux Dev Toolsを使い切れていない - ボイラープレートコードが量産されてる - 学習コスト - 関数型のデータフローへのマインドチェンジ - API仕様起点のテスト(サーバーサイド)

×