トップダウン・ボトムアップの両面から作るチーム内マトリクス組織

「ここだけの話！企業文化とチームビルディング」サブカル業界Developers 勉強会 Vol.7
https://subculturedev.connpass.com/event/319208/

1. トップダウン・ボトムアップの 両面から作る チーム内マトリクス組織 株式会社はてな id:koudenpaid:onk / id:masawada 2024-07-19 サブカル業界Developers 勉強会 Vol.7
2. 突然ですが… 2
3. ジャンプ＋リニューアル！ 3 https://hatena.co.jp/press/release/entry/2024/03/29/120000
4. GigaViewer https://hatena.co.jp/solutions/gigaviewer
5. GigaViewer • マルチテナントのマンガ配信サービス • GigaViewer for Apps ◦ スマートフォン向け ◦ ここに少年ジャンプ＋が加わった • GigaViewer for Web ◦ Webブラウザ向け ◦ こちらは元々少年ジャンプ＋を運用していた
6. マンガメディア開発チーム • GigaViewerのサーバサイドチーム • GigaViewer for Apps ◦ ここのバックエンド ◦ スマホアプリ開発は別チーム • GigaViewer for Web ◦ こちらはフロントエンド、インフラも含めて全 般
7. 前略）マトリクス組織 • ジャンプ＋リニューアルを中心に色々変化 ◦ 増員、体制など • その背景、変化の設計を素朴にご紹介 ◦ トップダウン ◦ ボトムアップ
8. 第一部 トップダウンでの再設計 8
9. 自己紹介 • id:koudenpa ◦ コウデン • はてなでの役割 ◦ マンガメディア開発チーム ◦ テックリード ▪ エンジニアリングを広く見る
10. 代読者自己紹介 • id:onk ◦ オンク • はてなでの役割 ◦ マンガメディア開発チーム ▪ が所属している本部付の EM
11. 目次 • チーム事情 ◦ どういう背景、変化があったのか • 再設計 ◦ その事情を踏まえてどう変化させたのか
12. チーム事情 12
13. マンガメディア開発チーム • サーバーサイド (Web/API)開発チーム ◦ インフラ含む ◦ iOS/Androidは別チーム • そこそこ大所帯 ◦ 30人超 ◦ エンジニアだけで 15+
14. ジャンプ＋リニューアルプロジェク ト • 結構大きな規模 • 2年くらい開発 • ビッグバンリリース
15. チーム内チームに分かれて開発 • 開発規模に対応するために増員 • チーム内のサブチーム (ユニット)に分化 ◦ ジャンプ＋リニューアルを担当するユニット ▪ 便宜上「ジャンプ＋ユニット」 ◦ その他のテナントを担当するユニット ▪ 便宜上「その他ユニット」
16. 続・チーム内チームに分かれて開発 • 後にユニットが更に分化 ◦ ジャンプ＋ユニット１ ◦ ジャンプ＋ユニット２ ◦ その他ユニット • ３ユニット体制に
17. 続・チーム内チームに分かれて開発 マンガメディア開発チーム ジャンプ＋1 ジャンプ＋2 その他
18. チームの開発運用対象 • 主に1つのモノレポ！ ◦ アプリケーションのコード他 • ＋周辺のリポジトリ ◦ IaC、CI/CD、ユーティリティなど • 全員で同じものを触る
19. 関心ごとの差 ＼ ジャンプ＋チーム その他チーム デリバリー ビッグバン準備 継続的デリバリー 開発内容 ほぼAPI・ジョブ 含むView テナント ジャンプ＋ 色んなテナント
20. 開発激化 • ビッグバンリリース準備 ◦ 普通に大変 • 大変だと？ ◦ 主な関心事以外に気が回らなくなっていく
21. 結果：チーム内チーム断絶進む ＼ ジャンプ＋チーム その他チーム デリバリー ビッグバン準備 継続的デリバリー 開発内容 ほぼAPI・ジョブ 含むView テナント ジャンプ＋ 色んなテナント 気が回らなく 関心がなく なっていく
22. チーム内チームが生まれる前の会議 体 マンガメディア開発チーム エンジニア昼会 テクノロジーマネジメント会 フロントエンド会 バックエンド会
23. 滅んだ会議体 • テクノロジーマネジメント会 ◦ -> 休止 • バックエンド会 ◦ -> 消滅 • フロントエンド会 ◦ -> 日々のToil確認程度の縮退運転 • 各会議体については後述
24. ジャンプ＋リリース • 冒頭お伝えした通り ◦ 無難にリリース • ある種の言い訳が消えた ◦ 忙しさにも隙間ができた • チームの転換期
25. 風向き、変わりそうね • 否、変えて行くぞ！ • 機会を得たので
26. 再設計 26
27. 解決したい課題 • チーム内チーム断絶進む • ＋チーム規模が大きくなってきたことへの対応 ◦ >開発規模に対応するために増員 ◦ の分
28. 素直に復活 ＋αの再設計 • 滅んだ会議体は不要ではなかった • 素直に復活を基本に • チーム事情の変化を反映
29. かつての会議体 マンガメディア開発チーム エンジニア昼会 テクノロジーマネジメント会 フロントエンド会 バックエンド会
30. かつての会議体 マンガメディア開発チーム エンジニア昼会 テクノロジーマネジメント会 フロントエンド会 バックエンド会 ほどほどの規模のチームで 関心事毎の会議体を回していた
31. 再設計前の会議体 マンガメディア開発チーム サブチーム サブチーム サブチーム エンジニア昼会 テクノロジーマネジメント会（滅んだ） フロントエンド会（縮退した） バックエンド会（滅んだ）
32. 再設計前の会議体 マンガメディア開発チーム サブチーム サブチーム サブチーム エンジニア昼会 テクノロジーマネジメント会（滅んだ） フロントエンド会（縮退した） バックエンド会（滅んだ） サブチームに分かれたうえ、 忙しさで関心事毎の会議体も 縮退していた
33. 再設計後の会議体 マンガメディア開発チーム サブチーム サブチーム サブチーム エンジニア例会 テクノロジーマネジメント会 フロントエンドサブ会 非機能サブ会 After Perlサブ会
34. サブチーム • 日々の開発等の業務遂行の単位 • 原則は独立して機能 • 他のサブチームとは適宜連携
35. サブチーム • マトリクスの縦軸 • エンジニア主体の設計ではない ◦ 再設計対象外 • サブチームがある状態が前提
36. 課題へのアプローチ • チーム内チーム断絶進む ◦ 横断的な関心事を抽出、会議体（サブ会）設置 ◦ サブ会：サブチーム間の橋渡しロールを設置 • チーム規模が大きくなってきたことへの対応 ◦ 頻度やアジェンダ見直し • マトリクスの横軸でフォローしていく
37. エンジニア例会 • 頻度やアジェンダ見直し • 毎日の昼会 ->毎週の例会 ◦ 昼会も隔日、任意参加で開催 • 主に今直面している事が関心ごと ◦ 日々の開発に当たっての報連相 ◦ 雑談 マンガメディア開発チーム サブチーム サブチーム サブチーム エンジニア例会 テクノロジーマネジメント会 フロントエンドサブ会 非機能サブ会 After Perlサブ会
38. テクノロジーマネジメント会 • 頻度やアジェンダ見直し ◦ サブチームやサブ会のリードが参加 ◦ 人数が多いため頻度を落として概観の共有を主 に ◦ 現状の課題、今後発生しそうな課題 • チームのエンジニアリングを統括 • 他、サブ会の関心事以外の検討 マンガメディア開発チーム サブチーム サブチーム サブチーム エンジニア例会 テクノロジーマネジメント会 フロントエンドサブ会 非機能サブ会 After Perlサブ会
39. サブ会 • 抽出した関心ごとを扱う • オーナーの他に各サブチームとの情報交換役を設定 ◦ 育成も兼ねて比較的若手 • 関心ごとについての「今後の施策」を検討・決定 ◦ 現在は意識せずとも例会・昼会で検討出来てい る
40. サブ会 • 検討までが責務 • 実施は別途計画 ◦ テクノロジーマネジメント会が調整など
41. 抽出した関心ごと • Webサービス開発運用の主要素 ◦ フロントエンド ◦ バックエンド（の今後） ◦ その他全般！ • を抽出した ◦ 細分化すればよいわけではないはず
42. フロントエンドサブ会 • フロントエンド会の系譜 • Webフロントエンド全般がテーマ ◦ テンプレートエンジン、 Next.js混在 ◦ これをどのように変えて行くか ◦ デザイナーを含む開発フロー ◦ など マンガメディア開発チーム サブチーム サブチーム サブチーム エンジニア例会 テクノロジーマネジメント会 フロントエンドサブ会 非機能サブ会 After Perlサブ会
43. After Perlサブ会 • バックエンド会の系譜 ◦ 滅ぶ前にも GraphQL会のように形を変えていた こともあった • サーバサイドの今後がテーマ ◦ 長期に開発運用して複雑化 ◦ DXの高い言語スタック・ アーキテクチャ ◦ など マンガメディア開発チーム サブチーム サブチーム サブチーム エンジニア例会 テクノロジーマネジメント会 フロントエンドサブ会 非機能サブ会 After Perlサブ会
44. 非機能サブ会 • 開発以外全般がテーマ ◦ サービスインフラ ◦ CI/CD ◦ などなど マンガメディア開発チーム サブチーム サブチーム サブチーム エンジニア例会 テクノロジーマネジメント会 フロントエンドサブ会 非機能サブ会 After Perlサブ会
45. まずは再始動 • 4月から緩やかに再設計 • 5月中旬から 6月にかけて設計した体制に移行
46. まずは再始動 • 会議体の設計を周囲と調整 • 既存会議体定例のアジェンダ見直し • サブ会 ◦ オーナー等のロール打診 ◦ 期待の伝達
47. まずは再始動 • 再設計して再始動はした
48. 少しやってみて • 2，3ヶ月は経ったが？ ◦ 正直まだよく分からない • 各サブ会は今後の施策を検討してくれている ◦ 何をどの順で検討するか？　を決めてもらった ◦ 今後、具体的な施策が出てきたなら ……
49. 俺たちの戦いはこれからだ • 検討した施策を実施していけるか？　は未知 • まずは課題へのアプローチを始めた、でよし！ • トップダウン ◦ テックリードから見た • チーム内マトリクス組織 ◦ サブチームとサブ会他 • でした
50. 第二部 ボトムアップでの設計 50
51. 自己紹介 • id:masawada • はてなでの役割 ◦ シニアエンジニア ◦ 非機能サブ会リード
52. 非機能サブ会 • 機能開発以外の全てを扱う基盤的な存在 • プロダクトの近い未来を考える • 各サブチームから 1名参加して定例を開催
53. 話すこと • 「非機能サブ会」立ち上げの流れ • 運用してみてどう ?
54. 立ち上げ前 54
55. 枠組みは決まっていないけど どうやら非機能サブ会というものを 立ち上げるらしい ……
56. TLからのオーダー • 以下を作って ! ◦ サブ会の関心ごとの定義 ◦ 向こう1年の事業計画に影響を与える情報 ◦ 翌年度の事業計画に影響を与えうる情報
57. TLからのオーダー • 期待(参考) ◦ 安定性の向上 ◦ 運用しやすさの向上 ◦ DX向上
58. プロダクトの課題 • リソースの使い方が非効率な箇所がある ◦ 長年機能開発に注力したことによるもの • インフラ構成をモダンにする途上で止まっている • などなど
59. どう手をつけるか 59
60. 流れ • ゴールをすりあわせる w/ TL • 情報収集する • 関心ごとを整理する • メンバーで期待を揃える
61. ゴールをすりあわせる • カンバンを作ってマイルストーンを載せる • 以下の詳細を詰める ◦ 他の会との接続点 ◦ サブ会の管掌範囲 (=関心ごと)
62. 情報収集する • 関係者は? • 他に同様のことをやっているサブチームはある ? • →接続点の検討に役立てる ◦ ヒアリング先や現在進行しているプロジェクト を把握しないと課題を整理できない
63. 情報収集する
64. 情報収集する • チームのエンジニアは何に困っている ? • 開発ロードマップは ? • ディレクターは何を考えている ? • 他のサブ会は何を考えている ? • →関心ごと・課題の整理に役立てる
65. 関心ごとを整理する • TLからの期待 (再掲) ◦ 安定性の向上 ◦ 運用しやすさの向上 ◦ DX向上 • 本当に……?
66. 関心ごとを整理する • 結局のところ全部 ! とは言えないので …… ◦ 他サブ会との干渉は避ける ▪ 相談先が分かっていると便利ですね ◦ 関心を分類して優先順をつける
67. 関心ごとを整理する 性質 やることの例 売上減リスクの低減 運用の安定化 セキュリティ 運用費の削減 コストトラッキング コスト削減 開発工数の削減 デリバリー改善 ソフトウェア的な複雑度の低減
68. 関心ごとを整理する • 整理した課題をマイルストーンに載せる ◦ ブレストでどこが盛り上がったか ? ▪ デリバリ話題 ▪ パフォーマンス話題 ◦ もともと考えていた課題が補強された
69. 関心ごとを整理する • 領域だけでなく時間軸も関心ごとの境界 ◦ 未来のことは After Perlサブ会 ◦ それ以外は非機能サブ会 • 近い未来にどうしていきたいかにフォーカス
70. 期待を揃える • 定例への参加メンバーはこちらから打診 ◦ サブ会、サブチームの網羅性を重視 ◦ 構成の意図とメンバーの意思、両方を大切に ▪ メンバーの気持ちがないと回らない
71. 期待を揃える • メンバーやディレクターに説明する会を設ける • 重要なことは定例のアジェンダに書いておく
72. 決めるコツ 72
73. TLと毎日会話する • 認識のズレを最小にして手戻りを防ぐ • 区切りがあると動きやすい ◦ 最低限見せられるものを仕上げる方に力が働く ◦ 期限がないと無限に考えてしまい速が落ちがち
74. 全ての考えをメモ書きとして残す • 経緯を思い出すのに便利 • 考えをみんなにレビューしてもらいやすい ◦ Working Out Loud [検索] ◦ みんなの見えるところに流れるのが理想
75. 運用してみて 75
76. 運用してみてどうだった? • 会の自由度を高く保てている ◦ 会の間で会話してあとで TM会に共有 • 例: 他サブ会と課題を融通しやすい ◦ キャッシュまわりは After Perlサブ会ではなく 非機能サブ会で、とか
77. 運用してみてどうだった? • 全員が全ての領域に詳しいわけではない • その場で考えよう、が難しい場面もありそう ◦ 宿題を活用していく ◦ 宿題もメインタスク
78. まとめ 78
79. まとめ • マトリクス型組織の大枠をトップダウンで整備 • 具体的な内容はボトムアップで整備 • 両面から手をとりあってやっていく • 俺たちの戦いはこれからだ !