Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

78422f41f505d63b1447a6e2e691cffd?s=47 west-c
August 25, 2020
1.5k

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

78422f41f505d63b1447a6e2e691cffd?s=128

west-c

August 25, 2020
Tweet

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. ご清聴ありがとうございました