開発者体験から見える技術的負債

合同会社DMM.com イノベーション本部オンラインサロン事業部

価値提供スピードを上げるための技術的負債への向き合い方
https://dmm.connpass.com/event/284374/

Transcript

1. © DMM
   開発者体験から見える
   技術的負債
   オンラインサロン事業部　澤 道人
   

   View Slide

2. © DMM
   自己紹介
   2015年入社
   2021年08月からオンラインサロン事業部にエンジニアとし
   て参画
   趣味：走ったり、山に登ったり
   2
   澤 道人
   

   View Slide

3. © DMM
   今日お話しすること
   • 技術的負債って？
   • 実例紹介（どのような機能か）
   • 開発を進める上でどんな課題があるか？
   • なぜこの構成になってる？
   • 開発はどうやって対応してる？
   • 今後どうしていきたいか
   • まとめ
   3
   

   View Slide

4. © DMM
   技術的負債って？
   4
   ● コード負債
   ● 設計負債
   ● テスト負債
   ● 要件負債...etc
   開発プロセスの中で生じた課題に対して
   簡単な（限定的な）解決策を選択した
   結果生み出されるもの
   今回は開発を進めている中で良くないな、効率悪いなと感じる部分を実例を見ながらご紹
   介します。
   時間がかかるより良いアプローチを使用する代わりに、今すぐ簡単な（限定的な）解決策を
   選択することで生じる追加の手直しの暗黙のコストを反映したものである（引用元： wikipedia）
   

   View Slide

5. © DMM
   実例紹介（どのような機能か）
   5
   オンラインサロン開きたいんです！
   運営スタッフ
   どのようなサロンかをユーザーに伝え
   て、入会してもらうためのページを作成
   してみましょう。
   管理画面から入力してみたけど実際の
   ユーザーにはどのように見えるんです
   か？
   管理画面から入会ページのプレビュー
   を見ることができます。
   プレビュー機能をご利用ください。
   実際の入会ページ
   運営スタッフ
   PC SP
   サロンオーナー
   サロンオーナー
   

   View Slide

6. © DMM
   　　　入会画面に変更が加わると都度、管理画面に取り込む必要性がある
   　　　取り込みの手間、処理の変更　　　開発者体験の悪化
   　　　コード管理が分割されているが、
   　　　オーナー管理画面からユーザーが利用する入会画面をプレビューとして閲覧してもらいたい。
   開発を進める上でどんな課題があるか？
   6
   前提として、コード管理（ gitのリポジトリ）が分割されています。
   ● オーナーが利用する管理画面
   ● ユーザーが利用する入会画面
   変更内容
   ユーザーが利用する入会画面の変更 オーナーが利用する管理画面に取り込み
   取り込み時に処理を変更（元データの取得など）
   HTML／CSS／JS／画像 HTML／CSS／JS／画像
   取り込み忘
   れがち...
   

   View Slide

7. © DMM
   なぜこの構成になってるのか？
   7
   開発当時のエンジニアは異動、または退職済みのため分からない。。。
   ● リリースに向けて時間がなかった
   ● 入会画面に更新が入ると思っていなかった
   ● コード取り込みなんて簡単だ
   　　　もしかしたら他に何か理由があったのかもしれない。
   　　　分からないことに悩んでも時間が過ぎるだけなので意味はなさそう。
   

   View Slide

8. © DMM
   1. 取り込み漏れを発生させないために、タスクのテンプレートに以下のチェックを入れている
   以下の観点で影響範囲調査を実施したか
   プレビュー修正要否（入会画面変更時、サロン詳細変更時）
   2. 対象画面に変更があった場合はタスクにプレビュー修正タスクを追加
   例え入会ページに関係ないタスクでもプレビューのことを一瞬考えなくてはいけない。。。
   　　　タスク作成時の体験悪化
   現在はどうやって対応してる？
   8
   ● 入会ページの変更があるたびにオーナー管理画面のプレビュー機能に変更を取り込む
   ● 急ぎの変更が入会画面にあると取り込み漏れが発生することもある
   この課題に向き合うためにやってること
   

   View Slide

9. © DMM
   　　　少し考えただけでプレビュー機能という単純な言葉の裏にこれだけの要件が出てくる。
   　　　開発当初もさまざま検討した結果、現在の解決策を取るしかなかったのかもしれない …
   　　　課題の大枠は見えてきたので少しずつ課題を潰して、効率的に開発を進めていきたい。
   　　　コードを取り込むのではなく、オーナー管理画面から入会ページを直接参照する仕組みにする？
   　　　コードの２重管理はなくなりそうだが、他の課題が見つかりそう。
   今後どうしていきたいか
   9
   ● 管理画面へのコード取り込みをやめたい
   ○ コードの２重管理の廃止
   ○ 取り込み漏れ発生の抑制
   ○ タスク作成時の影響調査の廃止
   ● 複数の異なるオーナーがいるので他のオーナーのプレビューは見せてはいけない
   ● ユーザーに作りかけのプレビューページを見られたくない（検索エンジンにも）
   ● あくまでプレビューだけで入会ボタンやリンクはクリックできないようにしたい
   ● PC／スマホのプレビューを１画面で切り替えたい
   

   View Slide

10. © DMM
    　　　技術的負債を残したいエンジニアはいない
    　　　要件を決めるときに課題を洗い出そう
    　　　限定的な解決策を選ぶと後に響くことはよくあるし、開発者体験を悪化させる
    ● コードを２重管理したいと思っているエンジニアはいない
    ● コードの２重管理は開発者体験を悪化させる（対応コスト、影響範囲の確認
    ...etc）
    ● 要件は単純な言葉でも当たり前の要件が隠れている
    ● 当たり前の要件が課題になって簡単な（限定的な）解決策を選択した可能性がある
    まとめ
    10
    

    View Slide