ユーザーファーストを実現するためのチーム開発の工夫

Transcript

1. ユーザーファーストを実現するため のチーム開発の⼯夫 【モバイル】学⽣エンジニア3団体合同×ディップLT会 ディップ株式会社
2. 春⽊ 渚咲 Haruki Nagisa 好きなこと ⾷べることと 楽器を演奏すること ディップ株式会社 ソリューション開発本部メディア開発統括部 Flutterエンジニア / iOSエンジニア 新卒でディップに⼊社 3年⽬ iOSエンジニアとしてバイトル‧バイトルNEXT 現在はFlutterでスポットバイトルを開発
3. 01 ユーザーファーストを実現するために ⼩さく早く開発するためにやっていること その1 02 プルリクエストの工夫 ⼩さく早く開発するためにやっていること その2 03 ブランチ運用の工夫 ⼩さく早く開発するためにやっていること その3 04 テストコードを書く ⼩さく早く開発するために取り組みたいこと その4 05 デザインシステムの導入 Agenda
4. ユーザーファーストを実現するために チーム開発で⾏なっている⼯夫を紹介しま す Copyright © dip Corporation, All rights reserved.
5. なぜユーザーファーストなのか Labor force solution company ⼈材サービスとDXサービスの提供を通して、 労働市場における諸課題を解決し、 誰もが働く喜びと幸せを感じられる社会の実現を⽬ 指します。 Copyright © dip Corporation, All rights reserved. VISION
6. ユーザーファーストを実現するにあたってやっていること チームで⼀緒に話し合って考えたり、ユーザーの声を集 めて改善したりします。 Copyright © dip Corporation, All rights reserved. ⾔われたものだけをトップダウンで作るのではなく、
7. ユーザーファーストを実現するにあたってやっていること Copyright © dip Corporation, All rights reserved. • この機能は本当にユーザーが働く上で幸せか？ • そもそもこの機能は必要か？ • ユーザーに理解しやすく使いやすいデザインになっているか？ • この機能を実現するために⼀番簡単にシンプルに作れる⽅法はない か？ • 迷った時は⼀番拡張性のある⽅法で実装してリリースし、実際にユー ザーにどう使われているか計測して考えたり
8. Dip Tech Visionに取り組んでいます Copyright © dip Corporation, All rights reserved.
9. ⼩さく早く安全に継続して価値を届けられる開発をすることで • ユーザーに開発した機能を早く届けられる • ユーザーにとって価値のある機能かを早く検証できる • ⼩さく早く開発することで、バグの修正も簡単になり 安全に開発できる Copyright © dip Corporation, All rights reserved. →ユーザーファーストな開発につながる
10. ⼩さく早く開発するためにやっていること その1 プルリクエスト（実装するコード）の単位を⼩さくする Copyright © dip Corporation, All rights reserved.
11. ⼩さく早く開発するためにやっていること その1 • 提供する価値 • 機能 • 実装に必要なタスク（プルリクエスト） Copyright © dip Corporation, All rights reserved. ⼀番⼩さな粒度に分割する
12. ⼩さく早く開発するためにやっていること その1 Copyright © dip Corporation, All rights reserved. →素早くコードをレビューしてマージ（=コードを合流）で きる • ⼩さく分割することで⼈もAIも理解しやすくなる
13. ⼩さく早く開発するためにやっていること その1 実際に素早く開発できているか、時間などを計測もしていま す Copyright © dip Corporation, All rights reserved.
14. ⼩さく早く開発するためにやっていること その1 Copyright © dip Corporation, All rights reserved. 計測はFindy Team+というツールを使っていて、 エンジニア組織の開発⽣産性が優れた組織としてFindy Team Award 2025を受賞
15. ⼩さく早く開発するためにやっていること その2 素早く開発できるブランチ運⽤の⼯夫 Copyright © dip Corporation, All rights reserved.
16. ⼩さく早く開発するためにやっていること その2 以前はリリースごとに、リリースする資材をブランチに分けて管 理していました Copyright © dip Corporation, All rights reserved.
17. ⼩さく早く開発するためにやっていること その2 • ⻑期で開発する施策があると、リリースブランチも⻑期間存在す ることになる Copyright © dip Corporation, All rights reserved. • 並⾏して動いている別のリリースブランチと差分がうまれて、ブ ランチをマージ（=合流）する際にコンフリクト（=競合）しやす くなってしまう 以前はリリースごとに、リリースする資材をブランチに分けて管 理していました
18. ⼩さく早く開発するためにやっていること その2 コンフリクトとは 同じファイルの同じ場所のコードに、別々の変更が⼊ること で、差分を合流させる際にどちらのコードを優先させるか聞か れている状態 Copyright © dip Corporation, All rights reserved.
19. ⼩さく早く開発するためにやっていること その2 • コンフリクトが膨⼤な量になってしまうと、解消するのに 時間がかかる • コンフリクトを解消するタイミングでバグが起こってしま うリスクがある • リリースタイミングが変わったりブランチの役割が複雑に なってきたりすると、理解するのが難しくなってくる Copyright © dip Corporation, All rights reserved.
20. ⼩さく早く開発するためにやっていること その2 • トランクベース開発のブランチ運⽤ を導⼊しました。 Copyright © dip Corporation, All rights reserved. • 機能をON/OFFできるフラグ こういった問題を解消するために
21. ⼩さく早く開発するためにやっていること その2 トランクベース開発とは コードの変更の単位を⼩さく分割し（プルリクエスト）、頻繁 にmainブランチにマージする開発⽅法 Copyright © dip Corporation, All rights reserved. • 開発途中の機能やまだ公開しない予定の機能もmainブラン チにマージしてリリースする • するとまだ公開したくないの機能もリリースの資材に含ま れてしまうので、機能をON/OFFするフラグが必要
22. ⼩さく早く開発するためにやっていること その2 機能をON/OFFできるフラグとは Copyright © dip Corporation, All rights reserved. 機能を公開‧⾮公開することができる
23. ⼩さく早く開発するためにやっていること その2 機能をON/OFFできるフラグとは • コード内にフラグを⼊れることで、⾮公開にしておきたい新機能 をフラグをOFFのまま本番環境にリリースしておき、準備が整っ たらフラグONにして公開する ◦ 例えば ▪ アプリ側が機能として未完成 ▪ API側が未完成 ▪ ユーザーサイトは完成しているがクライアントサイトが 未完成など Copyright © dip Corporation, All rights reserved.
24. ⼩さく早く開発するためにやっていること その2 すると Copyright © dip Corporation, All rights reserved. • ブランチ管理がシンプルになり理解しやすい • コンフリクトの解消作業がなくなり、素早く開発やリ リースができる • 公開したばかりの機能にインパクトが⼤きいバグが起き た時に、いち早く⾮公開にできる
25. ⼩さく早く開発するためにやっていること その3 • テストコードを書く Copyright © dip Corporation, All rights reserved. • スクリーンショットテストをする
26. ⼩さく早く開発するためにやっていること その3 テストコードとは • コードが正しく動作するか⾃動で検証するために書くコード ◦ UIパーツが正しく表⽰されているか ◦ ユーザーの操作が正しく処理されているかなど Copyright © dip Corporation, All rights reserved. • コードを変更したことによってUIや処理が壊れていないか確 認できる
27. ⼩さく早く開発するためにやっていること その3 スクリーンショットテストとは • アプリ画⾯のスクリーンショットを撮って、変更した差分 を⾃動で⽐較できるテスト Copyright © dip Corporation, All rights reserved. • コードの変更でデザインやレイアウトが崩れていないか検 出する
28. ⼩さく早く開発するためにやっていること その3 スクリーンショットテスト Copyright © dip Corporation, All rights reserved. 変更前 変更後 差分
29. ⼩さく早く開発するためにやっていること その3 • コードの変更に強くなる • ⼿動のテストが減るので開発速度が上がる • 安全なリリースをすることができる すると Copyright © dip Corporation, All rights reserved.
30. ⼩さく早く開発するために取り組みたいこと その4 デザインシステムの導⼊ これから取り組んでいきたい Copyright © dip Corporation, All rights reserved.
31. デザインシステムとは • 再利⽤可能なUIパーツ（コンポーネント） Copyright © dip Corporation, All rights reserved. • デザインの標準のルール ⼩さく早く開発するために取り組みたいこと その4 • 共通で使うまとまり
32. Copyright © dip Corporation, All rights reserved. 例えば ⼩さく早く開発するために取り組みたいこと その4
33. Copyright © dip Corporation, All rights reserved. 使う場所や状態によって、パーツを出し分けたり幅や⾼さを指定 する ⼩さく早く開発するために取り組みたいこと その4
34. デザインシステムを導⼊するとよいこと • ルールが統⼀されて、デザインや実装がバラバラにならな い • 再利⽤可能なので、実装スピードが上がる • デザイナーとエンジニアのコミュニケーションが楽になる • 基準のUIパーツを1つ変更すると、全体のUIパーツも同じ ように変更される Copyright © dip Corporation, All rights reserved. ⼩さく早く開発するために取り組みたいこと その4
35. さいごに Copyright © dip Corporation, All rights reserved. まとめ • ユーザーファーストを実現するために ◦ なぜこの機能が必要なのか ◦ どう実現していくか チームで⼀緒に話し合って考える ユーザーの声を聞く
36. さいごに Copyright © dip Corporation, All rights reserved. まとめ • ⼩さく早く開発するために ◦ 粒度を⼩さく分割して開発を進める ◦ ブランチ運⽤をシンプルにする ◦ テストコード、スクリーンショットテストを書いて⾃動化 する ◦ デザインシステムを導⼊する
37. さいごに ありがとうございました Copyright © dip Corporation, All rights reserved.