$30 off During Our Annual Pro Sale. View Details »
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.5k
はじめてのフロントエンド・バックエンド分離 / 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
1k
ローンチ1年目プロダクトのテストコード事情 / 2021-08-25 devtestlt
westc
0
130
売れてる SaaS へのオブジェクトストレージ導入にまつわる泥臭い話 / JJUG CCC 2019 Spring
westc
2
3k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
4 Signs Your Business is Dying
shpigford
181
21k
BBQ
matthewcrist
85
9.3k
Rails Girls Zürich Keynote
gr2m
94
13k
Documentation Writing (for coders)
carmenintech
65
4.5k
Side Projects
sachag
452
42k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Six Lessons from altMBA
skipperchong
27
3.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
770
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.3k
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.
ご清聴ありがとうございました