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