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

1. 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...
フロントとバックエンドで
納品物のキャッチボール
終わらない。。。

12. 開発フロー(after)
要件
画面仕様
機能仕様
UIパーツ実装
APIドキュメント作成
Redux実装
サーバーサイド実装
フロント実装
ReactとReduxで実装すると。。。

13. 開発フロー(after)
要件
画面仕様
機能仕様
APIドキュメント作成
Redux実装
表示確認
With Storybook
サーバーサイド実装
動作確認
With Swagger
フロント実装
UIパーツ実装
StorybookとSwaggerを足してあげると。。。

14. フロントの構成

15. React
Storybook
フロントエンド主要技術スタック
WebPack
Redux
react-css-module
Swagger redux-thunk redux-actions
プレゼンテーション
Flux

16. Redux構成
Presentation
Action
Redux
connect
Prev
State
Reducer
Next
State
Redux
thunk
Props
Store
Middleware

17. プレゼンテーション構成

18. プレゼンテーション開発
React with Storybook

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としたときに、冗長になる

23. react/prefer-stateless-function
- Component拡張クラスで、this・propsを一度も使用しない場
合に、Classで定義すると警告
class-methods-use-this
- Class定義内で、this参照がない場合に警告

24. arrow-body-style
NG OK

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のパーツに相当
● ‘具体的に何を’表示するかとかには関心がない

28. 概念図（再掲）
プレゼンテーションがどこでデータを受け取るか

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

33. 準備②
./.storybook/config.js

34. 準備③
./.storybook/webpack.config.js

35. Storybook 実演

36. React × Storybook まとめ
- アプリケーションに組み込まずに開発
- Lintをあえて入れない
- レスポンシブ対応チェック
- データパターン分パーツを用意
- 静的ファイル生成でPM・デザイナーに確認

37. Flux開発
Redux with Swagger

38. Flux開発トピック
- Redux構成
- state管理が自由すぎてundefined… ← redux-actions
- 一方通行は良いけど、非同期処理もしたい... ←
redux-thunk
- Swaggerで高速開発

39. Fluxフロー(再掲)
Presentation
Action
Redux
connect
Prev
State
Reducer
Next
State
Redux
thunk
Props
Store
Middleware

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ドキュメント生成②

49. API通信部分実装
モックサーバー：swagger-tools
準備
- 認証処理は自前で実装する
- CORS(Preflightリクエスト)対応する

50. モックサーバーサンプルソース

51. 認証処理を追加

52. CORS対応

53. 今後の課題
- Storybookのテスト機能を導入できていない
- Redux Dev Toolsを使い切れていない
- ボイラープレートコードが量産されてる
- 学習コスト
- 関数型のデータフローへのマインドチェンジ
- API仕様起点のテスト(サーバーサイド)