はじめてのフロントエンド・バックエンド分離 / 2020-08-25 RAKUS Meetup

https://rakus.connpass.com/event/184631/

Transcript

1. #RAKUSMeetup はじめての フロントエンド・バックエンド分離 2020.08.25 RAKUS Meetup＠SaaS新規プロダクトの技術 西角 知佳
2. #RAKUSMeetup 自己紹介 • 西角 知佳 / Chika Nishikado • 2015年にラクスへ新卒入社 • 2015年～2019年： の運用保守・機能開発 • 2019年～ ： の機能開発 ©2020 RAKUS Co., Ltd.
3. #RAKUSMeetup 鋭意開発中
4. #RAKUSMeetup • フロントエンドにSPA（Single-page Application）を採用 楽楽勤怠の開発体制 ©2020 RAKUS Co., Ltd. フロントエンド 4人 バックエンド 5人 Web API TypeScript Vue.js Spring Boot
5. #RAKUSMeetup • フロントエンドにSPA（Single-page Application）を採用 楽楽勤怠の開発体制 ©2020 RAKUS Co., Ltd. フロントエンド 4人 バックエンド 5人 Web API TypeScript Vue.js Spring Boot わたし
6. #RAKUSMeetup 当社におけるSPA事情 • SPAを採用しているプロダクトはまだ少ない • フロントエンドエンジニアとバックエンドエンジニアを 分けているプロダクトは楽楽勤怠がはじめて ©2020 RAKUS Co., Ltd.
7. #RAKUSMeetup SPAにおけるWeb API • フロントエンドとバックエンドとのインターフェース • ボトルネックにもなりやすい • スムーズなAPI開発が開発全体のスピードにも影響する ©2020 RAKUS Co., Ltd.
8. #RAKUSMeetup お話しすること • フロントエンド・バックエンドを分離した開発の知見が 少ない中、どのようにAPI開発を進めているのか • どのような試行錯誤を経て現在の進め方に至ったのか ©2020 RAKUS Co., Ltd.
9. Web API開発の進め方
10. #RAKUSMeetup API開発にあたって決めたこと • どのようにAPIを定義するか • 定義したAPI仕様をどのように表現するか • どのようなフローでAPI開発を行うか ©2020 RAKUS Co., Ltd.
11. #RAKUSMeetup どのようにAPIを定義するか • RESTの原則に従う（RESTful API） • 曖昧な部分はプロダクト独自のAPI標準仕様を策定 • URIの命名規則 • HTTPステータスコードの割り当て • リクエスト・レスポンスのフォーマット • 『Web API: The Good Parts』を参考に策定 ©2020 RAKUS Co., Ltd.
12. #RAKUSMeetup どのようにAPI仕様を表現するか • OpenAPI Specification（Swagger）でAPI仕様を記述 • YAMLファイルはソースコードと同一リポジトリで管理 • API仕様とコードが乖離しにくい • Swagger UIでドキュメント化 ©2020 RAKUS Co., Ltd.
13. #RAKUSMeetup Swagger UI
14. #RAKUSMeetup Swagger UI APIクライアントとして リクエスト送信もできる
15. #RAKUSMeetup どのようなフローで開発するか • 開発フローは試行錯誤を繰り返してきた • 重視した点： • フロントエンドチーム・バックエンドチーム双方が スムーズに開発を進められること • 後工程における手戻りが少なくなること ©2020 RAKUS Co., Ltd.
16. 開発フローの変遷
17. #RAKUSMeetup 初期の開発フロー ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 実装 API設計 API仕様
18. #RAKUSMeetup 初期の開発フロー ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 実装 API設計 API仕様 バックエンドエンジニアだけで API仕様を決めている
19. #RAKUSMeetup 初期の開発フロー ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 実装 API設計 API仕様 バックエンドエンジニアだけで API仕様を決めている API仕様が共有されるまで 作業の詳細が見えない
20. #RAKUSMeetup 現在の開発フロー ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 API設計 API仕様 APIレビュー 実装
21. #RAKUSMeetup 現在の開発フロー ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 API設計 API仕様 APIレビュー 実装 API仕様を開発フローの 一番最初に決める
22. #RAKUSMeetup 現在の開発フロー ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 API設計 API仕様 APIレビュー 実装 API仕様を開発フローの 一番最初に決める 全員によるAPIレビュー
23. #RAKUSMeetup 現在の開発フロー ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 API設計 API仕様 APIレビュー 実装 API仕様を開発フローの 一番最初に決める 全員によるAPIレビュー API仕様が決まっているため モックで先行実装が可能
24. #RAKUSMeetup 現在の開発フロー ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 API設計 API仕様 APIレビュー 実装 API仕様を開発フローの 一番最初に決める 全員によるAPIレビュー API仕様が決まっているため モックで先行実装が可能 で は な く
25. #RAKUSMeetup 現在の開発フローの課題 ©2020 RAKUS Co., Ltd. フロントエンド バックエンド API設計 API仕様 APIレビュー 実装 実装 API設計のタイミングが早いため 仕様変更の可能性も高くなる
26. #RAKUSMeetup 現在の開発フローの課題 ©2020 RAKUS Co., Ltd. フロントエンド バックエンド API設計 API仕様 APIレビュー 実装 実装 先行実装していた場合 手戻りになる API設計のタイミングが早いため 仕様変更の可能性も高くなる
27. #RAKUSMeetup 今後の展望 ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 API設計 API仕様 APIレビュー 実装 バックエンドの実装を待ったほうが 実は効率が良いのでは？
28. #RAKUSMeetup 今後の展望 ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 API設計 API仕様 APIレビュー 実装 バックエンドの実装を待ったほうが 実は効率が良いのでは？ 本当に？
29. #RAKUSMeetup 今後の展望（補足） • すべての機能で適用するわけではない • 手戻りによるインパクトが大きいであろう機能で試す • チームの状況も関係している • フロントエンドチームの方がリソースが少ないため なるべくフロントエンドの手戻りを減らしたい • まずは試してみることが大事 ©2020 RAKUS Co., Ltd.
30. #RAKUSMeetup まとめ • チームで重視することやチームの状況を中心に据えて 進め方を考えることが大切 • 改善点を明らかにするためにも試行錯誤は大切 • チームに合った進め方を今後も模索していきたい ©2020 RAKUS Co., Ltd.
31. ご清聴ありがとうございました