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
新規プロダクト立ち上げとフロントエンド設計
Search
HYUNSEUNG
July 13, 2021
Programming
2
330
新規プロダクト立ち上げとフロントエンド設計
2021.07.13 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 登壇資料
HYUNSEUNG
July 13, 2021
Tweet
Share
More Decks by HYUNSEUNG
See All by HYUNSEUNG
Next.jsでClean ArchitectureとDDD
dordieux
4
3.9k
Other Decks in Programming
See All in Programming
あのころの iPod を どうにか再生させたい
orumin
2
270
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
450
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
150
Comparing decimals in Swift Testing
417_72ki
0
160
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
0
170
実践 Dev Containers × Claude Code
touyu
1
140
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
440
階層化自動テストで開発に機動力を
ickx
1
470
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
920
令和最新版手のひらコンピュータ
koba789
9
4.6k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
37
11k
新世界の理解
koriym
0
130
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Embracing the Ebb and Flow
colly
86
4.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Writing Fast Ruby
sferik
628
62k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
430
Typedesign – Prime Four
hannesfritz
42
2.7k
RailsConf 2023
tenderlove
30
1.2k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Transcript
1 新規プロダクト立ち上げと フロントエンド設計 Hyunseung Park / 朴賢勝 Uzabase Inc, Japan
2021.07.13 SaaSプロダクトのフロントエンド最前線 1
2 自己紹介 プロダクトの概要 - プロダクト - デザイン フィードバックをもらう まとめ 01
02 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 2 アジェンダ 04 03
3 @dordieux dordieux • 朴 賢勝(Park Hyunseung) • 株式会社ユーザベース 2020/11/01
~ ◦ 2019年新卒から中途入社 ◦ 前職はインターネット広告会社でJavaの開発 • React大好き 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 3 自己紹介
4 4 2020/11/01入社からSPEEDAの開発をしていた 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 4
5 5 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 5 マイクロフロントエンド・マイクロサービス 各プロジェクトチームで開発をしている -> 各プロダクトは他のプロダクトに影響を 大きく与えず開発できる
6 感じていた課題 6 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 6 - Angular/Dartで書き方に不慣れていた - Atomic
Designを採用しているが、コンポーネントの サイズ感がバラバラ - コンポーネントの抽象度が低い - 再利用性が低い ...
7 7 2021/04 ~ 新規プロダクトチーム 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 7
8 プロダクトの概要 8
9 9 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 9 ※ プレスリリース前です
10 プロダクトの概要 10 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 10 - SPEEDAから離れた完全に別のシステム - 既存のユーザーもいるが、ユーザーが触れる画面などはなかっ
た。 - メールベースや簡易的なフォームぐらい - 既存ユーザー + 新規ユーザーを狙う
11 11 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 11 さて、SPEEDAで感じた課題を どう解決していくか
12 感じていた課題 12 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 12 - Angular/Dartで書き方に不慣れていた - Atomic
Designを採用しているが、コンポーネントの サイズ感がバラバラ - コンポーネントの抽象度が低い - 再利用性が低い
13 アーキテクチャー 13 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 13
14 アーキテクチャー 14 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 14
15 15 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 15 UzabaseはXPを元に ペアプログラミングを徹底しています
16 感じていた課題 16 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 16 - Angular/Dartで書き方に不慣れていた - Atomic
Designを採用しているが、コンポーネントの サイズ感がバラバラ - コンポーネントの抽象度が低い - 再利用性が低い
17 17 UIフレームワークらしきものを作る 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 17
18 18 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 18 最初からできるわけではなく、 多くのフィードバックを元に作られる
19 19 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 19 最初からできるわけではなく、 多くのフィードバックを元に作られる フィードバックサイクルをどうやって いかに早く、多く回すか
20 フィードバックをもらう 20
21 フィードバックサイクル 21 フィードバックサイクルを いかに早く、多く回すか 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 21
22 フィードバックサイクル 22 フィードバックが多い 改善が多い 変化に強く作る 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 22
23 フィードバックサイクル 23 フィードバックが多い 改善が多い 変化に強く作る 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 23
24 変化に強くするには 24 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く 【PLAID×SmartHR×Uzabase×OPEN8
】SaaSプロダクトのフロントエンド最前線 / 24
25 変化に強くするには 25 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く 【PLAID×SmartHR×Uzabase×OPEN8
】SaaSプロダクトのフロントエンド最前線 / 25 内部品質
26 変化に強くするには 26 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く 【PLAID×SmartHR×Uzabase×OPEN8
】SaaSプロダクトのフロントエンド最前線 / 26
27 27 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 27 e2e module-e2e dev argo sync
docker image k8s マニフェスト作成 e2e実行 prod
28 変化に強くするには 28 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く 【PLAID×SmartHR×Uzabase×OPEN8
】SaaSプロダクトのフロントエンド最前線 / 28
29 29 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 29 保守性高いコードを書く 質とスピードはトレードオフではない 保守性を高めればスピードも上がり、 保守性を落とせばスピードは下がる
30 30 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 30 保守性高いコードを書く 質とスピードはトレードオフではない 保守性を高めればスピードも上がり、 保守性を落とせばスピードは下がる Clean
Architectureでやっています
31 変化に強くするには 31 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く 【PLAID×SmartHR×Uzabase×OPEN8
】SaaSプロダクトのフロントエンド最前線 / 31
32 32 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 32 UzabaseのE2E Gauge + Chrome Driverを使った
Seleniumのテスト
33 33 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 33 実際のテスト # マイページの項目の更新 * トップページにアクセスする
* メールアドレス"
[email protected]
"パスワード"password"でログインする * マイページが表示されている ## メールアドレスを更新することができる - mailaddress * メールアドレスに"
[email protected]
"が表示されている * メールアドレスに"
[email protected]
"を入力する * 更新ボタンを押下する * メールアドレスに"
[email protected]
"が表示されている * DBが更新されている * 外部のAPIにリクエストが行われている
34 34 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 34 実際のテスト
35 35 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 35 自動テスト 自動テスト(E2Eテスト)を書くのは 大変だけど、本当に効果ある?
36 36 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 36 自動テスト 自動テストを書くのに消費した時間は いつ回収できる?
37 37 https://speakerdeck.com/twada/quality-and-speed-2020-autumn-edition 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 37
38 まとめ 38
39 39 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 39 まとめ - UI/UXの改善は多くのフィードバックを元に行われる - 内部品質をあげることでフィードバックサイクルが早くなる
- 多くのフィードバックはUI/UXなどの外部品質を向上させる - UI/UXの改善は内部品質をあげるところから始まる
40 40 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 40 反省点 コンポーネントをもっと抽象化する パイプラインの効率化(CI/CD改善) フロントエンドの知見を広げる
41 41 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 / 41 https://hatenanews.com/articles/20 21/05/26/103000 https://zine.qiita.com/interview/2021 05-uzabase/ 積極採用中です!