Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
はじめてのフロントエンド・バックエンド分離 / 2020-08-25 RAKUS Meetup
Search
west-c
August 25, 2020
3
2.8k
はじめてのフロントエンド・バックエンド分離 / 2020-08-25 RAKUS Meetup
https://rakus.connpass.com/event/184631/
west-c
August 25, 2020
Tweet
Share
More Decks by west-c
See All by west-c
大規模案件における手戻りを防ぐ要件定義・開発事例 / 2022-11-09 RAKUS Meetup
westc
0
1.2k
ローンチ1年目プロダクトのテストコード事情 / 2021-08-25 devtestlt
westc
0
150
売れてる SaaS へのオブジェクトストレージ導入にまつわる泥臭い話 / JJUG CCC 2019 Spring
westc
2
3.3k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
75
5.1k
Code Review Best Practice
trishagee
72
19k
Done Done
chrislema
185
16k
KATA
mclloyd
32
15k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
What's in a price? How to price your products and services
michaelherold
246
12k
Designing for humans not robots
tammielis
254
26k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Statistics for Hackers
jakevdp
799
220k
Thoughts on Productivity
jonyablonski
70
4.9k
Transcript
#RAKUSMeetup はじめての フロントエンド・バックエンド分離 2020.08.25 RAKUS Meetup@SaaS新規プロダクトの技術 西角 知佳
#RAKUSMeetup 自己紹介 • 西角 知佳 / Chika Nishikado • 2015年にラクスへ新卒入社
• 2015年~2019年: の運用保守・機能開発 • 2019年~ : の機能開発 ©2020 RAKUS Co., Ltd.
#RAKUSMeetup 鋭意開発中
#RAKUSMeetup • フロントエンドにSPA(Single-page Application)を採用 楽楽勤怠の開発体制 ©2020 RAKUS Co., Ltd. フロントエンド
4人 バックエンド 5人 Web API TypeScript Vue.js Spring Boot
#RAKUSMeetup • フロントエンドにSPA(Single-page Application)を採用 楽楽勤怠の開発体制 ©2020 RAKUS Co., Ltd. フロントエンド
4人 バックエンド 5人 Web API TypeScript Vue.js Spring Boot わたし
#RAKUSMeetup 当社におけるSPA事情 • SPAを採用しているプロダクトはまだ少ない • フロントエンドエンジニアとバックエンドエンジニアを 分けているプロダクトは楽楽勤怠がはじめて ©2020 RAKUS Co.,
Ltd.
#RAKUSMeetup SPAにおけるWeb API • フロントエンドとバックエンドとのインターフェース • ボトルネックにもなりやすい • スムーズなAPI開発が開発全体のスピードにも影響する ©2020
RAKUS Co., Ltd.
#RAKUSMeetup お話しすること • フロントエンド・バックエンドを分離した開発の知見が 少ない中、どのようにAPI開発を進めているのか • どのような試行錯誤を経て現在の進め方に至ったのか ©2020 RAKUS Co.,
Ltd.
Web API開発の進め方
#RAKUSMeetup API開発にあたって決めたこと • どのようにAPIを定義するか • 定義したAPI仕様をどのように表現するか • どのようなフローでAPI開発を行うか ©2020 RAKUS
Co., Ltd.
#RAKUSMeetup どのようにAPIを定義するか • RESTの原則に従う(RESTful API) • 曖昧な部分はプロダクト独自のAPI標準仕様を策定 • URIの命名規則 •
HTTPステータスコードの割り当て • リクエスト・レスポンスのフォーマット • 『Web API: The Good Parts』を参考に策定 ©2020 RAKUS Co., Ltd.
#RAKUSMeetup どのようにAPI仕様を表現するか • OpenAPI Specification(Swagger)でAPI仕様を記述 • YAMLファイルはソースコードと同一リポジトリで管理 • API仕様とコードが乖離しにくい •
Swagger UIでドキュメント化 ©2020 RAKUS Co., Ltd.
#RAKUSMeetup Swagger UI
#RAKUSMeetup Swagger UI APIクライアントとして リクエスト送信もできる
#RAKUSMeetup どのようなフローで開発するか • 開発フローは試行錯誤を繰り返してきた • 重視した点: • フロントエンドチーム・バックエンドチーム双方が スムーズに開発を進められること •
後工程における手戻りが少なくなること ©2020 RAKUS Co., Ltd.
開発フローの変遷
#RAKUSMeetup 初期の開発フロー ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 実装
API設計 API仕様
#RAKUSMeetup 初期の開発フロー ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 実装
API設計 API仕様 バックエンドエンジニアだけで API仕様を決めている
#RAKUSMeetup 初期の開発フロー ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 実装
API設計 API仕様 バックエンドエンジニアだけで API仕様を決めている API仕様が共有されるまで 作業の詳細が見えない
#RAKUSMeetup 現在の開発フロー ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 API設計
API仕様 APIレビュー 実装
#RAKUSMeetup 現在の開発フロー ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 API設計
API仕様 APIレビュー 実装 API仕様を開発フローの 一番最初に決める
#RAKUSMeetup 現在の開発フロー ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 API設計
API仕様 APIレビュー 実装 API仕様を開発フローの 一番最初に決める 全員によるAPIレビュー
#RAKUSMeetup 現在の開発フロー ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 API設計
API仕様 APIレビュー 実装 API仕様を開発フローの 一番最初に決める 全員によるAPIレビュー API仕様が決まっているため モックで先行実装が可能
#RAKUSMeetup 現在の開発フロー ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 API設計
API仕様 APIレビュー 実装 API仕様を開発フローの 一番最初に決める 全員によるAPIレビュー API仕様が決まっているため モックで先行実装が可能 で は な く
#RAKUSMeetup 現在の開発フローの課題 ©2020 RAKUS Co., Ltd. フロントエンド バックエンド API設計 API仕様
APIレビュー 実装 実装 API設計のタイミングが早いため 仕様変更の可能性も高くなる
#RAKUSMeetup 現在の開発フローの課題 ©2020 RAKUS Co., Ltd. フロントエンド バックエンド API設計 API仕様
APIレビュー 実装 実装 先行実装していた場合 手戻りになる API設計のタイミングが早いため 仕様変更の可能性も高くなる
#RAKUSMeetup 今後の展望 ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 API設計
API仕様 APIレビュー 実装 バックエンドの実装を待ったほうが 実は効率が良いのでは?
#RAKUSMeetup 今後の展望 ©2020 RAKUS Co., Ltd. フロントエンド バックエンド 実装 API設計
API仕様 APIレビュー 実装 バックエンドの実装を待ったほうが 実は効率が良いのでは? 本当に?
#RAKUSMeetup 今後の展望(補足) • すべての機能で適用するわけではない • 手戻りによるインパクトが大きいであろう機能で試す • チームの状況も関係している • フロントエンドチームの方がリソースが少ないため
なるべくフロントエンドの手戻りを減らしたい • まずは試してみることが大事 ©2020 RAKUS Co., Ltd.
#RAKUSMeetup まとめ • チームで重視することやチームの状況を中心に据えて 進め方を考えることが大切 • 改善点を明らかにするためにも試行錯誤は大切 • チームに合った進め方を今後も模索していきたい ©2020
RAKUS Co., Ltd.
ご清聴ありがとうございました