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.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
140
売れてる SaaS へのオブジェクトストレージ導入にまつわる泥臭い話 / JJUG CCC 2019 Spring
westc
2
3.1k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The Invisible Side of Design
smashingmag
298
50k
Scaling GitHub
holman
459
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k
Rails Girls Zürich Keynote
gr2m
94
13k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
Building Your Own Lightsaber
phodgson
103
6.1k
4 Signs Your Business is Dying
shpigford
182
21k
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.
ご清聴ありがとうございました