Upgrade to Pro — share decks privately, control downloads, hide ads and more …

リアーキテクチャ提案の3ステップ / LM-Pioneer-Unoki

リアーキテクチャ提案の3ステップ / LM-Pioneer-Unoki

More Decks by リンクアンドモチベーション

Other Decks in Technology

Transcript

  1. #事業加速
    リアーキテクチャ提案の 3_STEP

    View Slide

  2. #事業加速
    今日話すこと
    フロントエンドのリアーキテクチャ提案を
    成功させた 3 STEP

    View Slide

  3. #事業加速
    今日話すこと
    規模の大きい改善提案を考えている方も
    参考にしてみて下さい
    フロントエンドのリアーキテクチャ提案を
    成功させた 3 STEP

    View Slide

  4. #事業加速
    提案の 3_STEP
    STEP_1 課題を仮置きする
    STEP_2 プロトタイピング
    STEP_3 戦略立案

    View Slide

  5. #事業加速
    提案STEP_1
    課題を仮置きする

    View Slide

  6. #事業加速
    課題設定の理想

    View Slide

  7. #事業加速

    View Slide

  8. #事業加速
    課題設定の現実

    View Slide

  9. #事業加速

    View Slide

  10. #事業加速
    [理想]
    [現実]
    開発生産性を定量的に分析し、コスパの良い課題を
    特定する。
    課題が散乱している。コードも複雑。
    なので分析コストが高い。なかなか先に進まない。

    View Slide

  11. #事業加速
    定量的な課題設定は困難

    View Slide

  12. #事業加速
    課題の特定は困難
    このタイミングでの課題設定は
    厳密なものじゃなくて良いです!

    View Slide

  13. #事業加速
    課題の特定は困難
    実際に僕たちは、
    僕とFE テックリード2人で意見交換をし
    課題設定をしました

    View Slide

  14. #事業加速
    課題の特定は困難
    STEP_2に進みましょう。
    この仮説の正しさを確かめるタイミングは後にあります

    View Slide

  15. #事業加速
    いきなり完璧を求めない
    「STEP_1」で大事なこと

    View Slide

  16. #事業加速
    プロトタイピング
    提案STEP_2

    View Slide

  17. #事業加速
    プロトタイピングの話に入る前に

    View Slide

  18. #事業加速
    提案に必要な情報を整理します

    View Slide

  19. #事業加速
    Why
    What
    Who
    When
    Wher
    e
    How
    + α
    提案に必要な情報
    : なぜこの改善が必要なのか
    : 何を作るのか
    : 誰なら業務遂行できるのか
    : どのくらいの工数でいつまでに完了するのか
    : (不要)
    : どうやって進めるのか
    : どの程度の成果が見込めるのか

    View Slide

  20. #事業加速
    Why
    What
    Who
    When
    Wher
    e
    How
    + α
    必要な情報
    : なぜこの改善が必要なのか
    : 何を作るのか
    : 誰なら業務遂行できるのか
    : どのくらいの工数でいつまでに完了するのか
    : (不要)
    : どうやって進めるのか
    : どの程度の成果が見込めるのか

    View Slide

  21. #事業加速
    What
    Who
    When
    Wher
    e
    How
    + α
    必要な情報
    : なぜこの改善が必要なのか
    : 何を作るのか
    : 誰なら業務遂行できるのか
    : どのくらいの工数でいつまでに完了するのか
    : (不要)
    : どうやって進めるのか
    : どの程度の成果が見込めるのか
    ⭕ Why

    View Slide

  22. #事業加速
    必要な情報
    What
    Who
    When
    Wher
    e
    How
    + α
    : なぜこの改善が必要なのか
    : 何を作るのか
    : 誰なら業務遂行できるのか
    : どのくらいの工数でいつまでに完了するのか
    : (不要)
    : どうやって進めるのか
    : どの程度の成果が見込めるのか
    ⭕ Why

    View Slide

  23. #事業加速
    既存機能を1つプロトタイピングすることで
    「What」「Who」「When」
    に関する情報を集めていきました

    View Slide

  24. #事業加速
    作るものが明確になるほど、その開発業務の難易度も明確になりました。
    その難易度から必要なアサインを明確にしていきました
    What : 何を作るのか
    When : どのくらいの工数でいつまでに完了するのか
    Who : 誰なら業務遂行できるのか
    STEP_1で設定した課題を解決するために必要な技術の選定や
    アーキテクチャの設計を行うことで、作るものを明確にしていきました
    プロトタイピングを実装した際の実績から相対見積もりを行ない、
    リアーキテクチャ完了までに必要な工数を算出しました

    View Slide

  25. #事業加速
    What : 何を作るのか
    When : どのくらいの工数でいつまでに完了するのか
    Who : 誰なら業務遂行できるのか
    STEP_1で設定した課題を解決するために必要な技術の選定や
    アーキテクチャの設計を行うことで、作るものを明確にしていきました
    プロトタイピングを実装した際の実績から相対見積もりを行ない、
    リアーキテクチャ完了までに必要な工数を算出しました
    作るものが明確になるほど、その開発業務の難易度も明確になりました。
    その難易度から必要なアサインを明確にしていきました

    View Slide

  26. #事業加速
    What : 何を作るのか
    When : どのくらいの工数でいつまでに完了するのか
    Who : 誰なら業務遂行できるのか
    STEP_1で設定した課題を解決するために必要な技術の選定や
    アーキテクチャの設計を行うことで、作るものを明確にしていきました
    作るものが明確になるほど、その開発業務の難易度も明確になりました。
    その難易度から必要なアサインを明確にしていきました
    プロトタイピングを実装した際の実績から相対見積もりを行ない、
    リアーキテクチャ完了までに必要な工数を算出しました

    View Slide

  27. #事業加速
    What : 何を作るのか
    When : どのくらいの工数でいつまでに完了するのか
    Who : 誰なら業務遂行できるのか
    STEP_1で設定した課題を解決するために必要な技術の選定や
    アーキテクチャの設計を行うことで、作るものが明確になっていきます。
    プロトタイピングを実装した際の実績から相対見積もりを行ない、
    リアーキテクチャ完了までに必要な工数を算出しました
    作るものが明確になるほど、その開発業務の難易度も明確になります。
    その難易度から必要なアサインを明確にしていきました

    View Slide

  28. #事業加速
    作るものが明確になるほど、その開発業務の難易度も明確になります。
    その難易度から必要なアサインを明確にしていきました
    What : 何を作るのか
    When : どのくらいの工数でいつまでに完了するのか
    Who : 誰なら業務遂行できるのか
    STEP_1で設定した課題を解決するために必要な技術の選定や
    アーキテクチャの設計を行うことで、作るものが明確になっていきます。
    プロトタイピングを実装した際の実績から相対見積もりを行ない、
    リアーキテクチャ完了までに必要な工数を算出しました

    View Slide

  29. #事業加速
    頭だけでなく、手を動かす
    「STEP_2」で大事なこと

    View Slide

  30. #事業加速
    戦略立案
    提案STEP_3

    View Slide

  31. #事業加速
    Wher
    e
    How
    + α
    必要な情報
    : なぜこの改善が必要なのか
    : 何を作るのか
    : 誰なら業務遂行できるのか
    : どのくらいの工数でいつまでに完了するのか
    : (不要)
    : どうやって進めるのか
    : どの程度の成果が見込めるのか
    ⭕ Why
    ⭕ What
    ⭕ Who

    When

    View Slide

  32. #事業加速
    Wher
    e
    How
    + α
    必要な情報
    : なぜこの改善が必要なのか
    : 何を作るのか
    : 誰なら業務遂行できるのか
    : どのくらいの工数でいつまでに完了するのか
    : (不要)
    : どうやって進めるのか
    : どの程度の成果が見込めるのか
    ⭕ Why
    ⭕ What
    ⭕ Who

    When

    View Slide

  33. #事業加速
    意思決定者の視点

    View Slide

  34. #事業加速
    ❌ ⭕
    技術スタック 事業インパクト

    View Slide

  35. #事業加速
    事業リスク 低 成果 小
    事業リスク 低 成果 大
    事業リスク 高 成果 小
    事業リスク 高 成果 大
    &&
    &&
    &&
    &&

    View Slide

  36. #事業加速
    事業リスク 低 成果 小
    事業リスク 低 成果 大
    事業リスク 高 成果 小
    事業リスク 高 成果 大
    &&
    &&
    &&
    &&

    View Slide

  37. #事業加速
    事業リスク 低 成果 小
    事業リスク 低 成果 大
    事業リスク 高 成果 小
    事業リスク 高 成果 大
    &&
    &&
    &&
    &&

    View Slide

  38. #事業加速
    事業リスク 低 成果 小
    事業リスク 低 成果 大
    事業リスク 高 成果 小
    事業リスク 高 成果 大
    &&
    &&
    &&
    &&

    View Slide

  39. #事業加速
    事業リスク 低 成果 小
    事業リスク 低 成果 大
    事業リスク 高 成果 小
    事業リスク 高 成果 大
    &&
    &&
    &&
    &&

    View Slide

  40. #事業加速
    事業リスク 低 成果 小
    事業リスク 低 成果 大
    事業リスク 高 成果 小
    事業リスク 高 成果 大
    &&
    &&
    &&
    &&
    事業リスクと成果のバランスや
    意思決定者のタイプによる部分もありますが

    View Slide

  41. #事業加速
    事業リスク 低 成果 小
    事業リスク 低 成果 大
    事業リスク 高 成果 小
    事業リスク 高 成果 大
    &&
    &&
    &&
    &&

    View Slide

  42. #事業加速
    事業リスク 低 成果 小
    事業リスク 低 成果 大
    &&
    &&
    How : どのように +α : 成果

    View Slide

  43. #事業加速
    事業リスク 低 成果 小
    事業リスク 低 成果 大
    &&
    &&
    How : どのように +α : 成果

    View Slide

  44. #事業加速
    進め方の選択肢
    ● リーアキテクチャ専属チームを作る
    ● 既に予定している機能開発に便乗する

    View Slide

  45. #事業加速
    進め方の選択肢
    ● リーアキテクチャ専属チームを作る
    ● 既に予定している機能開発に便乗する

    View Slide

  46. #事業加速
    事業リスクを下げる
    「STEP_3」で大事なこと

    View Slide

  47. #事業加速
    (補足)実際に成果目標に設定したこと
    プロトタイピングで算出した工数見積もりを使用
    旧アーキテクチャでの
    開発工数
    新アーキテクチャでの
    開発工数
    vs

    View Slide

  48. #事業加速
    (補足)実際に成果目標に設定したこと
    プロトタイピングで算出した工数見積もりを使用
    旧アーキテクチャでの
    開発工数
    新アーキテクチャでの
    開発工数
    vs
    このタイミングで仮置きした課題の
    合理性を検証します

    View Slide

  49. #事業加速
    Wher
    e
    How
    + α
    必要な情報
    : なぜこの改善が必要なのか
    : 何を作るのか
    : 誰なら業務遂行できるのか
    : どのくらいの工数でいつまでに完了するのか
    : (不要)
    : どうやって進めるのか
    : どの程度の成果が見込めるのか
    ⭕ Why
    ⭕ What
    ⭕ Who

    When


    View Slide

  50. #事業加速
    まとめ
    STEP_1 課題の仮説を立てる
    STEP_2 プロトタイピング
    STEP_3 戦略立案
    いきなり完璧を求めない
    頭だけでなく、手を動かす
    事業リスクを下げる

    View Slide

  51. #事業加速
    最後に
    ● Vue.js v3系 Script setup構文をフル活用したアーキの話
    ● 次世代ビルドツール Vite を使用したビルド基盤構築の話
    ● Storybookを使用したUIコンポーネント駆動開発の話

    View Slide

  52. #事業加速
    Link and Motivation
    Engineer Meetup
    https://lmi.connpass.com/
    Link and Motivation
    Developers' Blog
    https://link-and-motivation.hatenablog.com/

    View Slide

  53. #事業加速
    ご清聴、ありがとうございました

    View Slide