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