新規プロダクト立ち上げとフロントエンド設計

2021.07.13 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線 登壇資料

Transcript

1. 1 新規プロダクト立ち上げと フロントエンド設計 Hyunseung Park / 朴賢勝 Uzabase Inc, Japan 2021.07.13 SaaSプロダクトのフロントエンド最前線 1
2. 2 自己紹介 プロダクトの概要 - プロダクト - デザイン フィードバックをもらう まとめ 01 02 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　2 アジェンダ 04 03
3. 3 @dordieux dordieux • 朴 賢勝（Park Hyunseung） • 株式会社ユーザベース 2020/11/01 ~ ◦ 2019年新卒から中途入社 ◦ 前職はインターネット広告会社でJavaの開発 • React大好き 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　3 自己紹介
4. 4 4 2020/11/01入社からSPEEDAの開発をしていた 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　4
5. 5 5 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　5 マイクロフロントエンド・マイクロサービス 各プロジェクトチームで開発をしている -> 各プロダクトは他のプロダクトに影響を 大きく与えず開発できる
6. 6 感じていた課題 6 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　6 - Angular/Dartで書き方に不慣れていた - Atomic Designを採用しているが、コンポーネントの サイズ感がバラバラ - コンポーネントの抽象度が低い - 再利用性が低い ...
7. 7 7 2021/04 ~ 新規プロダクトチーム 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　7
8. 8 プロダクトの概要 8
9. 9 9 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　9 ※ プレスリリース前です
10. 10 プロダクトの概要 10 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　10 - SPEEDAから離れた完全に別のシステム - 既存のユーザーもいるが、ユーザーが触れる画面などはなかっ た。 - メールベースや簡易的なフォームぐらい - 既存ユーザー + 新規ユーザーを狙う
11. 11 11 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　11 さて、SPEEDAで感じた課題を どう解決していくか
12. 12 感じていた課題 12 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　12 - Angular/Dartで書き方に不慣れていた - Atomic Designを採用しているが、コンポーネントの サイズ感がバラバラ - コンポーネントの抽象度が低い - 再利用性が低い
13. 13 アーキテクチャー 13 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　13
14. 14 アーキテクチャー 14 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　14
15. 15 15 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　15 UzabaseはXPを元に ペアプログラミングを徹底しています
16. 16 感じていた課題 16 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　16 - Angular/Dartで書き方に不慣れていた - Atomic Designを採用しているが、コンポーネントの サイズ感がバラバラ - コンポーネントの抽象度が低い - 再利用性が低い
17. 17 17 UIフレームワークらしきものを作る 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　17
18. 18 18 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　18 最初からできるわけではなく、 多くのフィードバックを元に作られる
19. 19 19 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　19 最初からできるわけではなく、 多くのフィードバックを元に作られる フィードバックサイクルをどうやって いかに早く、多く回すか
20. 20 フィードバックをもらう 20
21. 21 フィードバックサイクル 21 フィードバックサイクルを いかに早く、多く回すか 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　21
22. 22 フィードバックサイクル 22 フィードバックが多い 改善が多い 変化に強く作る 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　22
23. 23 フィードバックサイクル 23 フィードバックが多い 改善が多い 変化に強く作る 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　23
24. 24 変化に強くするには 24 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　24
25. 25 変化に強くするには 25 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　25 内部品質
26. 26 変化に強くするには 26 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　26
27. 27 27 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　27 e2e module-e2e dev argo sync docker image k8s マニフェスト作成 e2e実行 prod
28. 28 変化に強くするには 28 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　28
29. 29 29 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　29 保守性高いコードを書く 質とスピードはトレードオフではない 保守性を高めればスピードも上がり、 保守性を落とせばスピードは下がる
30. 30 30 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　30 保守性高いコードを書く 質とスピードはトレードオフではない 保守性を高めればスピードも上がり、 保守性を落とせばスピードは下がる Clean Architectureでやっています
31. 31 変化に強くするには 31 - CI/CDを整える - 保守性高いコードを書く - 自動テストを書く 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　31
32. 32 32 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　32 UzabaseのE2E Gauge + Chrome Driverを使った Seleniumのテスト
33. 33 33 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　33 実際のテスト # マイページの項目の更新 * トップページにアクセスする * メールアドレス"test@uzabase.com"パスワード"password"でログインする * マイページが表示されている ## メールアドレスを更新することができる - mailaddress * メールアドレスに"test@uzabase.com"が表示されている * メールアドレスに"update@uzabase.com"を入力する * 更新ボタンを押下する * メールアドレスに"update@uzabase.com"が表示されている * DBが更新されている * 外部のAPIにリクエストが行われている
34. 34 34 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　34 実際のテスト
35. 35 35 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　35 自動テスト 自動テスト（E2Eテスト）を書くのは 大変だけど、本当に効果ある？
36. 36 36 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　36 自動テスト 自動テストを書くのに消費した時間は いつ回収できる？
37. 37 37 https://speakerdeck.com/twada/quality-and-speed-2020-autumn-edition 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　37
38. 38 まとめ 38
39. 39 39 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　39 まとめ - UI/UXの改善は多くのフィードバックを元に行われる - 内部品質をあげることでフィードバックサイクルが早くなる - 多くのフィードバックはUI/UXなどの外部品質を向上させる - UI/UXの改善は内部品質をあげるところから始まる
40. 40 40 【PLAID×SmartHR×Uzabase×OPEN8 】SaaSプロダクトのフロントエンド最前線　 /　40 反省点 コンポーネントをもっと抽象化する パイプラインの効率化（CI/CD改善） フロントエンドの知見を広げる
41. 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/ 積極採用中です！