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

by Hiroshi Ito

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

4 READYFORの紹介 #devsumi #devsumiC

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

10 それは #devsumi #devsumiC

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

22 そして... #devsumi #devsumiC

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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