Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
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
続・チーム内チームに分かれて開発 ● 後にユニットが更に分化 ○ ジャンプ+ユニット1 ○ ジャンプ+ユニット2 ○ その他ユニット ● 3ユニット体制に
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
まとめ ● マトリクス型組織の大枠をトップダウンで整備 ● 具体的な内容はボトムアップで整備 ● 両面から手をとりあってやっていく ● 俺たちの戦いはこれからだ !