Tweet
Tweet

Slide 1

Slide 1 text

トップダウン・ボトムアップの 両面から作る チーム内マトリクス組織 株式会社はてな id:koudenpaid:onk / id:masawada 2024-07-19 サブカル業界Developers 勉強会 Vol.7

Slide 2

Slide 2 text

突然ですが… 2

Slide 3

Slide 3 text

ジャンプ＋リニューアル！ 3 https://hatena.co.jp/press/release/entry/2024/03/29/120000

Slide 4

Slide 4 text

GigaViewer https://hatena.co.jp/solutions/gigaviewer

Slide 5

Slide 5 text

GigaViewer ● マルチテナントのマンガ配信サービス ● GigaViewer for Apps ○ スマートフォン向け ○ ここに少年ジャンプ＋が加わった ● GigaViewer for Web ○ Webブラウザ向け ○ こちらは元々少年ジャンプ＋を運用していた

Slide 6

Slide 6 text

マンガメディア開発チーム ● GigaViewerのサーバサイドチーム ● GigaViewer for Apps ○ ここのバックエンド ○ スマホアプリ開発は別チーム ● GigaViewer for Web ○ こちらはフロントエンド、インフラも含めて全 般

Slide 7

Slide 7 text

前略）マトリクス組織 ● ジャンプ＋リニューアルを中心に色々変化 ○ 増員、体制など ● その背景、変化の設計を素朴にご紹介 ○ トップダウン ○ ボトムアップ

Slide 8

Slide 8 text

第一部 トップダウンでの再設計 8

Slide 9

Slide 9 text

自己紹介 ● id:koudenpa ○ コウデン ● はてなでの役割 ○ マンガメディア開発チーム ○ テックリード ■ エンジニアリングを広く見る

Slide 10

Slide 10 text

代読者自己紹介 ● id:onk ○ オンク ● はてなでの役割 ○ マンガメディア開発チーム ■ が所属している本部付の EM

Slide 11

Slide 11 text

目次 ● チーム事情 ○ どういう背景、変化があったのか ● 再設計 ○ その事情を踏まえてどう変化させたのか

Slide 12

Slide 12 text

チーム事情 12

Slide 13

Slide 13 text

マンガメディア開発チーム ● サーバーサイド (Web/API)開発チーム ○ インフラ含む ○ iOS/Androidは別チーム ● そこそこ大所帯 ○ 30人超 ○ エンジニアだけで 15+

Slide 14

Slide 14 text

ジャンプ＋リニューアルプロジェク ト ● 結構大きな規模 ● 2年くらい開発 ● ビッグバンリリース

Slide 15

Slide 15 text

チーム内チームに分かれて開発 ● 開発規模に対応するために増員 ● チーム内のサブチーム (ユニット)に分化 ○ ジャンプ＋リニューアルを担当するユニット ■ 便宜上「ジャンプ＋ユニット」 ○ その他のテナントを担当するユニット ■ 便宜上「その他ユニット」

Slide 16

Slide 16 text

続・チーム内チームに分かれて開発 ● 後にユニットが更に分化 ○ ジャンプ＋ユニット１ ○ ジャンプ＋ユニット２ ○ その他ユニット ● ３ユニット体制に

Slide 17

Slide 17 text

続・チーム内チームに分かれて開発 マンガメディア開発チーム ジャンプ＋1 ジャンプ＋2 その他

Slide 18

Slide 18 text

チームの開発運用対象 ● 主に1つのモノレポ！ ○ アプリケーションのコード他 ● ＋周辺のリポジトリ ○ IaC、CI/CD、ユーティリティなど ● 全員で同じものを触る

Slide 19

Slide 19 text

関心ごとの差 ＼ ジャンプ＋チーム その他チーム デリバリー ビッグバン準備 継続的デリバリー 開発内容 ほぼAPI・ジョブ 含むView テナント ジャンプ＋ 色んなテナント

Slide 20

Slide 20 text

開発激化 ● ビッグバンリリース準備 ○ 普通に大変 ● 大変だと？ ○ 主な関心事以外に気が回らなくなっていく

Slide 21

Slide 21 text

結果：チーム内チーム断絶進む ＼ ジャンプ＋チーム その他チーム デリバリー ビッグバン準備 継続的デリバリー 開発内容 ほぼAPI・ジョブ 含むView テナント ジャンプ＋ 色んなテナント 気が回らなく 関心がなく なっていく

Slide 22

Slide 22 text

チーム内チームが生まれる前の会議 体 マンガメディア開発チーム エンジニア昼会 テクノロジーマネジメント会 フロントエンド会 バックエンド会

Slide 23

Slide 23 text

滅んだ会議体 ● テクノロジーマネジメント会 ○ -> 休止 ● バックエンド会 ○ -> 消滅 ● フロントエンド会 ○ -> 日々のToil確認程度の縮退運転 ● 各会議体については後述

Slide 24

Slide 24 text

ジャンプ＋リリース ● 冒頭お伝えした通り ○ 無難にリリース ● ある種の言い訳が消えた ○ 忙しさにも隙間ができた ● チームの転換期

Slide 25

Slide 25 text

風向き、変わりそうね ● 否、変えて行くぞ！ ● 機会を得たので

Slide 26

Slide 26 text

再設計 26

Slide 27

Slide 27 text

解決したい課題 ● チーム内チーム断絶進む ● ＋チーム規模が大きくなってきたことへの対応 ○ >開発規模に対応するために増員 ○ の分

Slide 28

Slide 28 text

素直に復活 ＋αの再設計 ● 滅んだ会議体は不要ではなかった ● 素直に復活を基本に ● チーム事情の変化を反映

Slide 29

Slide 29 text

かつての会議体 マンガメディア開発チーム エンジニア昼会 テクノロジーマネジメント会 フロントエンド会 バックエンド会

Slide 30

Slide 30 text

かつての会議体 マンガメディア開発チーム エンジニア昼会 テクノロジーマネジメント会 フロントエンド会 バックエンド会 ほどほどの規模のチームで 関心事毎の会議体を回していた

Slide 31

Slide 31 text

再設計前の会議体 マンガメディア開発チーム サブチーム サブチーム サブチーム エンジニア昼会 テクノロジーマネジメント会（滅んだ） フロントエンド会（縮退した） バックエンド会（滅んだ）

Slide 32

Slide 32 text

再設計前の会議体 マンガメディア開発チーム サブチーム サブチーム サブチーム エンジニア昼会 テクノロジーマネジメント会（滅んだ） フロントエンド会（縮退した） バックエンド会（滅んだ） サブチームに分かれたうえ、 忙しさで関心事毎の会議体も 縮退していた

Slide 33

Slide 33 text

再設計後の会議体 マンガメディア開発チーム サブチーム サブチーム サブチーム エンジニア例会 テクノロジーマネジメント会 フロントエンドサブ会 非機能サブ会 After Perlサブ会

Slide 34

Slide 34 text

サブチーム ● 日々の開発等の業務遂行の単位 ● 原則は独立して機能 ● 他のサブチームとは適宜連携

Slide 35

Slide 35 text

サブチーム ● マトリクスの縦軸 ● エンジニア主体の設計ではない ○ 再設計対象外 ● サブチームがある状態が前提

Slide 36

Slide 36 text

課題へのアプローチ ● チーム内チーム断絶進む ○ 横断的な関心事を抽出、会議体（サブ会）設置 ○ サブ会：サブチーム間の橋渡しロールを設置 ● チーム規模が大きくなってきたことへの対応 ○ 頻度やアジェンダ見直し ● マトリクスの横軸でフォローしていく

Slide 37

Slide 37 text

エンジニア例会 ● 頻度やアジェンダ見直し ● 毎日の昼会 ->毎週の例会 ○ 昼会も隔日、任意参加で開催 ● 主に今直面している事が関心ごと ○ 日々の開発に当たっての報連相 ○ 雑談 マンガメディア開発チーム サブチーム サブチーム サブチーム エンジニア例会 テクノロジーマネジメント会 フロントエンドサブ会 非機能サブ会 After Perlサブ会

Slide 38

Slide 38 text

テクノロジーマネジメント会 ● 頻度やアジェンダ見直し ○ サブチームやサブ会のリードが参加 ○ 人数が多いため頻度を落として概観の共有を主 に ○ 現状の課題、今後発生しそうな課題 ● チームのエンジニアリングを統括 ● 他、サブ会の関心事以外の検討 マンガメディア開発チーム サブチーム サブチーム サブチーム エンジニア例会 テクノロジーマネジメント会 フロントエンドサブ会 非機能サブ会 After Perlサブ会

Slide 39

Slide 39 text

サブ会 ● 抽出した関心ごとを扱う ● オーナーの他に各サブチームとの情報交換役を設定 ○ 育成も兼ねて比較的若手 ● 関心ごとについての「今後の施策」を検討・決定 ○ 現在は意識せずとも例会・昼会で検討出来てい る

Slide 40

Slide 40 text

サブ会 ● 検討までが責務 ● 実施は別途計画 ○ テクノロジーマネジメント会が調整など

Slide 41

Slide 41 text

抽出した関心ごと ● Webサービス開発運用の主要素 ○ フロントエンド ○ バックエンド（の今後） ○ その他全般！ ● を抽出した ○ 細分化すればよいわけではないはず

Slide 42

Slide 42 text

フロントエンドサブ会 ● フロントエンド会の系譜 ● Webフロントエンド全般がテーマ ○ テンプレートエンジン、 Next.js混在 ○ これをどのように変えて行くか ○ デザイナーを含む開発フロー ○ など マンガメディア開発チーム サブチーム サブチーム サブチーム エンジニア例会 テクノロジーマネジメント会 フロントエンドサブ会 非機能サブ会 After Perlサブ会

Slide 43

Slide 43 text

After Perlサブ会 ● バックエンド会の系譜 ○ 滅ぶ前にも GraphQL会のように形を変えていた こともあった ● サーバサイドの今後がテーマ ○ 長期に開発運用して複雑化 ○ DXの高い言語スタック・ アーキテクチャ ○ など マンガメディア開発チーム サブチーム サブチーム サブチーム エンジニア例会 テクノロジーマネジメント会 フロントエンドサブ会 非機能サブ会 After Perlサブ会

Slide 44

Slide 44 text

非機能サブ会 ● 開発以外全般がテーマ ○ サービスインフラ ○ CI/CD ○ などなど マンガメディア開発チーム サブチーム サブチーム サブチーム エンジニア例会 テクノロジーマネジメント会 フロントエンドサブ会 非機能サブ会 After Perlサブ会

Slide 45

Slide 45 text

まずは再始動 ● 4月から緩やかに再設計 ● 5月中旬から 6月にかけて設計した体制に移行

Slide 46

Slide 46 text

まずは再始動 ● 会議体の設計を周囲と調整 ● 既存会議体定例のアジェンダ見直し ● サブ会 ○ オーナー等のロール打診 ○ 期待の伝達

Slide 47

Slide 47 text

まずは再始動 ● 再設計して再始動はした

Slide 48

Slide 48 text

少しやってみて ● 2，3ヶ月は経ったが？ ○ 正直まだよく分からない ● 各サブ会は今後の施策を検討してくれている ○ 何をどの順で検討するか？　を決めてもらった ○ 今後、具体的な施策が出てきたなら ……

Slide 49

Slide 49 text

俺たちの戦いはこれからだ ● 検討した施策を実施していけるか？　は未知 ● まずは課題へのアプローチを始めた、でよし！ ● トップダウン ○ テックリードから見た ● チーム内マトリクス組織 ○ サブチームとサブ会他 ● でした

Slide 50

Slide 50 text

第二部 ボトムアップでの設計 50

Slide 51

Slide 51 text

自己紹介 ● id:masawada ● はてなでの役割 ○ シニアエンジニア ○ 非機能サブ会リード

Slide 52

Slide 52 text

非機能サブ会 ● 機能開発以外の全てを扱う基盤的な存在 ● プロダクトの近い未来を考える ● 各サブチームから 1名参加して定例を開催

Slide 53

Slide 53 text

話すこと ● 「非機能サブ会」立ち上げの流れ ● 運用してみてどう ?

Slide 54

Slide 54 text

立ち上げ前 54

Slide 55

Slide 55 text

枠組みは決まっていないけど どうやら非機能サブ会というものを 立ち上げるらしい ……

Slide 56

Slide 56 text

TLからのオーダー ● 以下を作って ! ○ サブ会の関心ごとの定義 ○ 向こう1年の事業計画に影響を与える情報 ○ 翌年度の事業計画に影響を与えうる情報

Slide 57

Slide 57 text

TLからのオーダー ● 期待(参考) ○ 安定性の向上 ○ 運用しやすさの向上 ○ DX向上

Slide 58

Slide 58 text

プロダクトの課題 ● リソースの使い方が非効率な箇所がある ○ 長年機能開発に注力したことによるもの ● インフラ構成をモダンにする途上で止まっている ● などなど

Slide 59

Slide 59 text

どう手をつけるか 59

Slide 60

Slide 60 text

流れ ● ゴールをすりあわせる w/ TL ● 情報収集する ● 関心ごとを整理する ● メンバーで期待を揃える

Slide 61

Slide 61 text

ゴールをすりあわせる ● カンバンを作ってマイルストーンを載せる ● 以下の詳細を詰める ○ 他の会との接続点 ○ サブ会の管掌範囲 (=関心ごと)

Slide 62

Slide 62 text

情報収集する ● 関係者は? ● 他に同様のことをやっているサブチームはある ? ● →接続点の検討に役立てる ○ ヒアリング先や現在進行しているプロジェクト を把握しないと課題を整理できない

Slide 63

Slide 63 text

情報収集する

Slide 64

Slide 64 text

情報収集する ● チームのエンジニアは何に困っている ? ● 開発ロードマップは ? ● ディレクターは何を考えている ? ● 他のサブ会は何を考えている ? ● →関心ごと・課題の整理に役立てる

Slide 65

Slide 65 text

関心ごとを整理する ● TLからの期待 (再掲) ○ 安定性の向上 ○ 運用しやすさの向上 ○ DX向上 ● 本当に……?

Slide 66

Slide 66 text

関心ごとを整理する ● 結局のところ全部 ! とは言えないので …… ○ 他サブ会との干渉は避ける ■ 相談先が分かっていると便利ですね ○ 関心を分類して優先順をつける

Slide 67

Slide 67 text

関心ごとを整理する 性質 やることの例 売上減リスクの低減 運用の安定化 セキュリティ 運用費の削減 コストトラッキング コスト削減 開発工数の削減 デリバリー改善 ソフトウェア的な複雑度の低減

Slide 68

Slide 68 text

関心ごとを整理する ● 整理した課題をマイルストーンに載せる ○ ブレストでどこが盛り上がったか ? ■ デリバリ話題 ■ パフォーマンス話題 ○ もともと考えていた課題が補強された

Slide 69

Slide 69 text

関心ごとを整理する ● 領域だけでなく時間軸も関心ごとの境界 ○ 未来のことは After Perlサブ会 ○ それ以外は非機能サブ会 ● 近い未来にどうしていきたいかにフォーカス

Slide 70

Slide 70 text

期待を揃える ● 定例への参加メンバーはこちらから打診 ○ サブ会、サブチームの網羅性を重視 ○ 構成の意図とメンバーの意思、両方を大切に ■ メンバーの気持ちがないと回らない

Slide 71

Slide 71 text

期待を揃える ● メンバーやディレクターに説明する会を設ける ● 重要なことは定例のアジェンダに書いておく

Slide 72

Slide 72 text

決めるコツ 72

Slide 73

Slide 73 text

TLと毎日会話する ● 認識のズレを最小にして手戻りを防ぐ ● 区切りがあると動きやすい ○ 最低限見せられるものを仕上げる方に力が働く ○ 期限がないと無限に考えてしまい速が落ちがち

Slide 74

Slide 74 text

全ての考えをメモ書きとして残す ● 経緯を思い出すのに便利 ● 考えをみんなにレビューしてもらいやすい ○ Working Out Loud [検索] ○ みんなの見えるところに流れるのが理想

Slide 75

Slide 75 text

運用してみて 75

Slide 76

Slide 76 text

運用してみてどうだった? ● 会の自由度を高く保てている ○ 会の間で会話してあとで TM会に共有 ● 例: 他サブ会と課題を融通しやすい ○ キャッシュまわりは After Perlサブ会ではなく 非機能サブ会で、とか

Slide 77

Slide 77 text

運用してみてどうだった? ● 全員が全ての領域に詳しいわけではない ● その場で考えよう、が難しい場面もありそう ○ 宿題を活用していく ○ 宿題もメインタスク

Slide 78

Slide 78 text

まとめ 78

Slide 79

Slide 79 text

まとめ ● マトリクス型組織の大枠をトップダウンで整備 ● 具体的な内容はボトムアップで整備 ● 両面から手をとりあってやっていく ● 俺たちの戦いはこれからだ !