エンジニアリングが組織に広がる「乳化」を目指すための取り組み #devsumi #devsumiC

READYFORでは、会社全体がビジョン・ミッションに向かって最大限のパフォーマンスを発揮するためにも、エンジニアリングが組織全体に広がっている状態を目指しており、その状態を「乳化」と表現しています。

本セッションでは、下記のようなエンジニアリングの乳化への取り組みを事例とともにご紹介します。

・OKRとスクワッド体制を活用したビジネスとエンジニアリングの融合
・ビジネスプロセスを可視化するためのBPMNの認知拡大と定着
・「技術的負債」という概念の理解と認知拡大
・その他、暇手間かけて日常をハックするための取り組み

Transcript

1. 1
   エンジニアリングが組織に広がる「乳化」を目指すための取り組み
   Developers Summit 2020 Summer C-9
   伊藤博志 @itohiro73
   

   View Slide

2. 2
   自己紹介
   伊藤博志 @itohiro73
   READYFOR株式会社 VP of Engineering
   「思いの乗ったお金の流れを増やす」ために、主にエンジニア組織作
   りとアーキテクチャー設計全般に関わる。
   #devsumi #devsumiC
   普段は「いとひろ」と呼ばれております
   

   View Slide

3. 3
   アジェンダ
   ■ READYFORの紹介
   ■ READYFORの目指す「乳化」とチャレンジ
   ■ BPMNの認知拡大と定着
   ■ OKRとスクワッド体制
   ■ 技術的負債という概念の啓蒙
   ■ 隙手間かけて日常をハックするための取り組み
   ■ コロナ禍でのチャレンジ
   #devsumi #devsumiC
   

   View Slide

4. 4
   READYFORの紹介
   #devsumi #devsumiC
   

   View Slide

5. 5
   READYFORのクラウドファンディング
   #devsumi #devsumiC
   

   View Slide

6. 6
   コロナ禍や災害にも負けず、想いの乗ったお金の流れをつくる
   #devsumi #devsumiC
   

   View Slide

7. 7
   READYFORの成長の歴史
   #devsumi #devsumiC
   

   View Slide

8. 8
   READYFORとエンジニア組織の成長の歴史
   2011年9名＠根津 2013年15名＠根津 2016年36名＠本郷 2020年120名＠半蔵門
   エンジニア2名 エンジニア4名 エンジニア6名 エンジニア16名
   NOW!
   #devsumi #devsumiC
   非線型な成長に
   向けて邁進中
   

   View Slide

9. 9
   とはいえまだまだエンジニアの
   割合が少ない（約13%）中、
   READYFORが大切にしていること
   #devsumi #devsumiC
   

   View Slide

10. 10
    それは
    #devsumi #devsumiC
    

    View Slide

11. 11
    乳化
    誰もがやりたいことを実現する世の中をつくるため、想いの乗ったお金の
    流れを増やす。このようなプラットフォームをつくっていくために、
    READYFORはビジネスとエンジニアリングの垣根を超えて乳化していく組
    織を追求します。
    #devsumi #devsumiC
    

    View Slide

12. 12
    READYFORの追求する乳化（Emulsion）とは
    組織の中にエンジニアリングが自然に溶け込んでいる状態
    Designed by Freepik
    既存の価値観とテクノロジーが融合することによる
    イノベーションの創造を目指す
    #devsumi #devsumiC
    

    View Slide

13. 13
    しかし、一筋縄ではいきません
    #devsumi #devsumiC
    

    View Slide

14. 14
    READYFORの現状と抱えるチャレンジ
    #devsumi #devsumiC
    

    View Slide

15. 15
    READYFORのクラウドファンディング
    ■ ぱっと見普通のWebサービス
    ■ どこにドメインの複雑さが隠れているのか？
    #devsumi #devsumiC
    

    View Slide

16. 16
    クラウドファンディングのライフサイクルに絡むさまざまなビジネスプロセス
    READYFORシステム
    プロジェクト実
    行者
    プロジェクト支
    援者
    プロジェクトをはじめる
    プロジェクトを探す
    #devsumi #devsumiC
    プロジェクトに支援する
    

    View Slide

17. 17
    クラウドファンディングのライフサイクルに絡むさまざまなビジネスプロセス
    プロジェクト実
    行者
    プロジェクト支
    援者
    プロジェクトを探す
    #devsumi #devsumiC
    プロジェクトをはじめる
    プロジェクト
    相談
    支援
    審査
    プロジェクトページ作成
    入出金・売上管理
    契約書作成
    決済処理
    システムと人とプロセスが違いに絡み合っていて、非常に複雑
    プロジェクトに支援する
    

    View Slide

18. 18
    この複雑なビジネスプロセスをどう扱うか
    #devsumi #devsumiC
    

    View Slide

19. 19
    BPMNとは？
    #devsumi #devsumiC
    ■ Business Process Model and Notaion
    ■ ビジネスプロセスやワークフローを可視化するための記法
    * 詳しくは私のブログ（ itohiro73’s blog）で
    「経費申請　BPMN」でググると出てきます
    

    View Slide

20. 20
    BPMNの啓蒙と普及
    #devsumi #devsumiC
    

    View Slide

21. 21
    少しずつ試行錯誤してくれるメンバーたち
    #devsumi #devsumiC
    

    View Slide

22. 22
    そして...
    #devsumi #devsumiC
    

    View Slide

23. 23
    さまざまなビジネスチームがBPMNを活用してフローを可視化してくれるようになった
    #devsumi #devsumiC
    

    View Slide

24. 24
    いとひろ的にも驚きの吸収力
    #devsumi #devsumiC
    

    View Slide

25. 25
    ビジネスを理解する素地が出来上がった
    複雑に絡み合った様々なワークフローを可視化
    ・
    ・
    ・
    ・
    ・
    ・
    #devsumi #devsumiC
    プロジェクト
    相談
    支援
    審査
    プロジェクトページ作成
    入出金・売上管理
    契約書作成
    決済処理
    

    View Slide

26. 26
    OKRとスクワッド体制の導入
    #devsumi #devsumiC
    

    View Slide

27. 27
    OKRとスクワッド体制の導入 - OKRとは？
    #devsumi #devsumiC
    ■ OKRとは？
    • Objective（目標） and Key Results（主要な成果）
    • 目標管理のためのフレームワーク
    ■ READYFORでは半期もしくは四半期ごとにOKRを用いて目標設定をし
    ている
    OKRの例：
    Objective: 顧客に〇〇という価値をもたらす最強のプロダクトをとどけ
    る
    KR: 〇〇という価値を産むための△△機能と ◻◻機能の要件が定義
    されている
    KR: X月Y日までに△△機能の設計・実装・テスト・リリースが完了して
    いる
    KR: Z月W日までに◻◻機能の設計・実装・テスト・リリースが完了して
    いる
    KR: 〇〇の指標がXX%向上している
    

    View Slide

28. 28
    OKRが全社でツリー状で設定されることで高いパフォーマンスでの目標の達成を目指す
    #devsumi #devsumiC
    全社OKR
    チームOKR チームOKR チームOKR チームOKR
    個人OKR 個人OKR 個人OKR 個人OKR 個人OKR 個人OKR 個人OKR 個人OKR 個人OKR
    

    View Slide

29. 29
    エンジニア組織が成長したことによるチームOKRのひずみ
    #devsumi #devsumiC
    ワンチーム
    チームOKR
    ミッション
    バックエンド
    チーム
    チームOKR
    ミッション2 ミッション3
    フロントエンド
    チーム
    チームOKR
    プロダクト
    マネージャー
    チームOKR
    ミッション1
    
    

    View Slide

30. 30
    スクワッドとは？
    #devsumi #devsumiC
    ■ もともとはSpotify、日本だとWantedlyやSmart Newsが取り入れてい
    る組織体制の手法
    ■ 組織を職能ではなくミッション単位で複数部署の人員から形成する
    ■ スクワッドに割り当てられたミッションに基づいて意思決定が可能なの
    で自律性が促進される
    参考：
    とはいえ他の様々な手法と同様 Spotifyモデルも
    万能なわけではない（銀の弾丸はない）ので注意
    

    View Slide

31. 31
    スクワッド体制の導入によるミッションとOKRのアラインメント
    #devsumi #devsumiC
    スクワッドA
    チームOKR
    ミッション2 ミッション3
    スクワッドB
    チームOKR
    スクワッドC
    チームOKR
    ミッション1
    
    

    View Slide

32. 32
    READYFORの新規開発スクワッド群
    ■ ミッションに基づいたスクワッド編成でOKRを持つ
    PdM + フロントエンド PdM + フロントエンド
    + バックエンド
    CTO + 法人チーム + エンジニア CFO + 経理チーム + エンジニア
    編成例：
    

    View Slide

33. 33
    しかし、これだけでは足りない
    #devsumi #devsumiC
    

    View Slide

34. 34
    再掲：READYFORとエンジニア組織の成長の歴史
    2011年9名＠根津 2013年15名＠根津 2016年36名＠本郷 2020年120名＠半蔵門
    エンジニア2名 エンジニア4名 エンジニア6名 エンジニア16名
    NOW!
    #devsumi #devsumiC
    非線型な成長に
    向けて邁進中
    7年間少数のエンジニアでスモールビジネスとして着実にビジネスを伸ばしてきた。
    その裏で、READYFORのシステムは技術的負債も積み重ねてきた。
    

    View Slide

35. 35
    ここで技術的負債の説明を試みる
    #devsumi #devsumiC
    

    View Slide

36. 36
    ■ ソフトウェアとしての価値（技術的資産） = 技術的純資産 + 技術的負債
    あくまでアナロジーなので「純資産」や「負債」といった完璧なラベル付けができる
    わけではないことに注意
    技術的純資産
    技術的負債
    ソフトウェア
    としての価値
    （技術的資産）
    そのソフトウェアが生み
    出す価値すべて
    - Webサービスの機能
    - 新しいユーザー体験
    - 新規事業
    - 人的コスト削減
    - 等々
    新たな機能開発を阻害するような設計や実
    装等
    例
    - 3000行を超える巨大なモデル
    - 複雑な画面遷移実装
    - 複雑なAdmin…
    - テストがない...
    等々
    開発を促進するような設計や実装等
    例
    - 複雑な概念をシンプルに表現した実装
    - 再利用可能なモジュール
    - 適切な粒度とカバレッジをもった自動テス
    ト
    等々
    BS（バランスシート）のアナロジーとしての技術的負債
    #devsumi #devsumiC
    

    View Slide

37. 37
    ここで注意
    技術的負債とは、先人たちがビジネス価値を
    築き上げてきたソフトウェア資産の一部なので、
    絶対悪というわけではない！
    #devsumi #devsumiC
    

    View Slide

38. 38
    特性を理解するのが大事
    #devsumi #devsumiC
    

    View Slide

39. 39
    技術的負債に対して技術的純資産が多い場合の成長速度
    技術的純資産
    技術的負債 技術的純資産
    技術的負債
    技術的純資産
    技術的負債
    技術的純資産
    技術的負債
    初
    速
    は
    少
    し
    か
    か
    る
    開発スピードに加速度がついていく
    #devsumi #devsumiC
    

    View Slide

40. 40
    技術的純資産に対して技術的負債が多い場合の成長速度
    技術的純資産
    技術的負債
    技術的純資産
    技術的負債
    技術的純資産
    技術的負債
    技術的純資産
    技術的負債
    初
    期
    に
    生
    み
    出
    す
    価
    値
    は
    大
    き
    い
    利子を支払うかのごとく開発スピードは一気に逓減していく
    *技術的負債（Technical Debt）というアナロジーは、初期の大きな借り入れによる大きな資産形成ができる
    が、時間軸に沿って利子を支払い続けなければいけないということを表現している
    #devsumi #devsumiC
    

    View Slide

41. 41
    どうすればよいのか
    #devsumi #devsumiC
    

    View Slide

42. 42
    リファクタリングという概念があります
    #devsumi #devsumiC
    

    View Slide

43. 43
    リファクタリングという概念
    技術的純資産
    技術的負債
    技術的純資産
    ソ
    フ
    ト
    ウ
    ェ
    ア
    の
    価
    値
    リファクタリング
    ソフトウェアとしてのの価値は変えずに内
    部の負債を返却
    技術的負債
    技術的純資産
    技術的負債
    技術的純資産
    技術的負債
    その先の開発スピードに加速をつける
    #devsumi #devsumiC
    

    View Slide

44. 44
    スクワッドの話に戻ります
    #devsumi #devsumiC
    

    View Slide

45. 45
    先ほど説明したREADYFORの新規開発スクワッド群に加えて
    ■ ミッションに基づいたスクワッド編成でOKRを持つ
    PdM + フロントエンド PdM + フロントエンド
    + バックエンド
    CTO + 法人チーム + エンジニア CFO + 経理チーム + エンジニア
    編成例：
    

    View Slide

46. 46
    ■ スケーラブルなシステム基盤を構築していく基盤チームを結成
    （実際にはリファクタリング以外の手法も使いつつ、ソフトウェア品質向上を目指す）
    エンジニアリング基盤ス
    クワッド
    ミッション
    READYFORの中長期計画を
    実行していくための
    強いエンジニアリング組織と
    スケーラブルなシステム基盤を
    構築する！！
    足りないピースを埋める：エンジニアリング基盤スクワッド
    

    View Slide

47. 47
    技術的純資産
    技術的負債
    技術的純資産
    技術的負債
    技術的純資産
    技術的負債
    新規開発
    新規開発
    新規開発
    新規開発スクワッド群
    エンジニアリング基盤
    スクワッド
    リファクタリングやその他手法を駆使し
    て、新規開発をドライブできるための基
    盤を盤石なものにする
    負債が存在するという現実と向き合いな
    がら、制約の中で最大限の価値を生み
    出すためのエンジニアリングをしていく
    READYFORのエンジニアリング戦略
    

    View Slide

48. 48
    隙手間かけて日常をハックする取り組み
    #devsumi #devsumiC
    

    View Slide

49. 49
    SlackへのReacji Channelerの導入と啓蒙
    #devsumi #devsumiC
    ■ Reacji Channelerとは？
    • 絵文字リアクションをつけるだけでその
    投稿を特定のチャンネルに再投稿するこ
    とができるSlack拡張
    ■ 活用例
    • 　 をつけると#times-itohiroに流れる
    • 　 をつけると#study-productivityに流れ
    る
    • 　 をつけると#tech-blog-topicに流れる
    

    View Slide

50. 50
    SlackへのReacji Channelerの導入と啓蒙
    #devsumi #devsumiC
    ■ まず自分で入れて使ってみると周
    りが気になり出す
    ■ さらにそれを生産性チャンネルに
    送るという二重啓蒙
    

    View Slide

51. 51
    Slackワークフローの導入
    #devsumi #devsumiC
    

    View Slide

52. 52
    Slackワークフローの導入
    #devsumi #devsumiC
    ■ やはり大事なのはまず自分が
    使ってみる（その日のうちに）
    

    View Slide

53. 53
    Slackワークフローの導入
    #devsumi #devsumiC
    ■ そして運用開始
    

    View Slide

54. 54
    GASの活用
    #devsumi #devsumiC
    ■ Google Apps Script
    ■ Google Apps（Docs, Spreadsheet等）でさまざまな自動化を図れる優
    れもの
    ■ READYFORでは勉強会や情報共有が活発に行われ、非エンジニアが
    積極的に自動化に取り組んでいる
    

    View Slide

55. 55
    その他乳化への取り組み
    #devsumi #devsumiC
    

    View Slide

56. 56
    全社MTGでエンジニア職能の説明を試みる
    #devsumi #devsumiC
    

    View Slide

57. 57
    フロントエンドシステムとは
    ■ ユーザーの目に触れる部分のほとんどは、フロントエンドエンジニアが設計・実装
    • Webサービスの見た目や、コンポーネントの配置、サイトの動きを実装していくのはフロントエンド
    エンジニアの力の見せ所
    • バックエンドから受け取ったデータを表示するためのロジックや、ユーザーが入力したデータを
    バックエンドに送る部分の実装もフロントエンドエンジニアの責務
    • READYFORではReact/TypeScriptと呼ばれるフレームワーク・言語を採用
    • readyfor-elementsと呼ばれるコンポーネント集も、RFリブランディングを機に開発
    岡村 大胡 江面 axross
    @バンクーバー
    城田
    

    View Slide

58. 58
    バックエンドシステムとは
    ■ フロントエンドに対してデータ処理（作成・読み取り・変更・削除）のための機能や、様々なロジック
    （権限管理・状態管理・決済機能等々）を提供するのがバックエンド（サーバーサイド）の主な責務
    • READYFORでは、Ruby on Railsと呼ばれるフレームワークを用いてバックエンドシステムを構
    築
    • READYFORでは、Admin機能も便宜的にバックエンドエンジニアの守備範囲
    大田原 斉藤 森 安本 豊島
    

    View Slide

59. 59
    インフラストラクチャー（SRE）とは
    ■ Site Reliability Engineer
    • 実はSREはインフラストラクチャーを直接さわるわけではなく、インフラストラクチャーをソフトウェ
    アエンジニアとして操作していくロールなので、いずれSREと組織名称は変えていくかもしれませ
    ん
    ■ READYFORではAWSというクラウドサービス上でほとんどのサービスが稼働していて、SREはこ
    れらをプログラミング技術を用いて構築・管理・運用します
    ■ 最終的にはWebサービスの信頼性をあげていくことが至上命題
    • 先日XX機能に障害があったことは記憶に新しいと思います。ああいった事象に素早く対処し、同
    様な問題が起こらないための対策をとっていくことはわかりやすい一例かと思います
    水本 平井
    

    View Slide

60. 60
    コロナ禍で訪れた前代未聞の負荷への対応
    #devsumi #devsumiC
    

    View Slide

61. 61
    コロナ禍に生まれた基金やプロジェクトの支援者数が記録のオンパレード
    #devsumi #devsumiC
    

    View Slide

62. 62
    前代未聞の支援数増加・問題の切り分けと全社への共有
    #devsumi #devsumiC
    

    View Slide

63. 63
    非エンジニアメンバーからの反応
    #devsumi #devsumiC
    

    View Slide

64. 64
    前代未聞の支援数増加への対応
    #devsumi #devsumiC
    

    View Slide

65. 65
    ソフトウェア開発上の問題の多くは
    技術的というよりも社会学的なものである
    #devsumi #devsumiC
    トム・デマルコ/ティモシー・リスター「ピープル・ウェア」 1987
    

    View Slide

66. 66
    READYFORの「乳化」へのとりくみ　まとめ
    #devsumi #devsumiC
    ■ 「乳化」という概念を全社的に共有する
    ■ ビジネスサイドを「わかる」ために可視化する
    • BPMNの認知拡大と定着
    ■ 同じミッションを共有し、ともにつくる
    • OKRとスクワッド体制
    ■ 日常をハックする取り組みを背中で見せる
    • さまざまなSlack拡張の導入と定着、GASの活用等
    ■ ビジネスサイドの「わからない」によりそう
    • 技術的負債という概念の説明
    • コロナ禍でのコミュニケーション
    

    View Slide

67. 67
    想いをつなぎ、叶える未来を、つくる
    それがREADYFORのTech Visionです。
    誰もがやりたいことを実現する世の中をつくるため、想いの乗ったお金の
    流れを増やす。このようなプラットフォームをつくっていくために、
    READYFORはビジネスとエンジニアリングの垣根を超えて乳化していく組
    織を追求します。
    

    View Slide

68. View Slide