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
290
新規プロダクト立ち上げとフロントエンド設計
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.7k
Other Decks in Programming
See All in Programming
ML.NETで始める機械学習
ymd65536
0
100
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
370
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
330
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Grafana Cloudとソラカメ
devoc
0
170
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
170
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
130
Unity Android XR入門
sakutama_11
0
160
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
Domain-Driven Transformation
hschwentner
2
1.9k
CI改善もDatadogとともに
taumu
0
120
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
170
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Designing for humans not robots
tammielis
250
25k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Building Adaptive Systems
keathley
40
2.4k
Facilitating Awesome Meetings
lara
52
6.2k
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/ 積極採用中です!