実践モブプログラミング/ mob programming practice

Slide 1

Slide 1 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 実践モブプログラミング @erukiti / 株式会社マツリカ佐々木俊介

Slide 2

Slide 2 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 自己紹介

Slide 3

Slide 3 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 @erukiti （えるきちです。Ｌチキではありません）

Slide 4

Slide 4 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 QiitaやNoteなどでブログ書いています

Slide 5

Slide 5 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 技術同人誌を書いてます

Slide 6

Slide 6 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 技術書典9に向けて執筆開始 • Next.js - React を楽に使う世界標準の薄型フレームワーク • Hasura - PostgreSQL とフルに連動して勝手に GraphQL スキーマを生成してくれる凄く便利なフレームワーク。ただしまだマイナー • 素早いプロトタイピングのコツ

Slide 7

Slide 7 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 同人仲間とWebサービスをモブプロで開発中

Slide 8

Slide 8 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 株式会社マツリカ

Slide 9

Slide 9 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 Senses（センシーズ）

Slide 10

Slide 10 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 僕とモブプログラミング • モブプロという文化がなかった弊社に、モブプロの導入はできた • とはいえ、全てをモブプロでとか、毎日モブプロとかってレベルまではいけてない • カジュアルにモブで相談するか、モブプロでチケットやってみるか、くらいまでは認識して貰えた • 別件で、さっきも触れた同人仲間とのモブプロ

Slide 11

Slide 11 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 セッション概要

Slide 12

Slide 12 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 対象チーム開発を改善したい人 • 開発者もそうでない人も！ • 属人性の高いコード・レガシーコードに苦しんでる人 • 個人vsタスクを、問題vsチームに変えたい人 • モブプロはプログラミング専用の考えではありません。モブワーキングというもっと広いやり方があります - そもそも始まりはモブトラブルシューティングだった

Slide 13

Slide 13 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 リモートでモブプロをする • このセッションはリモートでモブプロをすることが前提 • リモートでのノウハウ満載なため、オフラインでモブプロをする場合とは勝手が違うかも • 大半のノウハウはどちらにも共通します

Slide 14

Slide 14 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 前半の概要 • モブプロとは何か • 実際のモブプロのやり方 • モブプロの効能について

Slide 15

Slide 15 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 後半の概要 • コツ • 落とし穴の回避方法 • モブセッションが終わったあとにやるべきこと • まとめ

Slide 16

Slide 16 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25

Slide 17

Slide 17 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 なぜ開発をするのか？

Slide 18

Slide 18 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25

Slide 19

Slide 19 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 問題を解決して会社の事業への貢献を最大化する • 人件費という少なくない予算を投じて開発するからには、問題を解決して会社の事業への貢献を最大化しなければいけない • スーパースターのソロ開発で最大の貢献ができるならそれもありだけど、現実問題としてそんなスーパースターはレアキャラだし、その人が辞めたら詰む • そういう例外を除けば、チームの開発効率を最大化するしかない

Slide 20

Slide 20 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 開発効率の話リソース効率 vs フロー効率 • 効率をどっちの視座で捉えるか？ • 個人の時間を軸に評価するリソース効率 • チーム全体の効率を評価するフロー効率モブプロは後者！

Slide 21

Slide 21 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 弊社の事例 • ほぼ同じような条件だったので比較可能なものがあった • パターンA）ソロプロで、10日 • パターンB）モブプロで、合計9人日 • とくに、パターンBでは、品質、レビュー省力化、気持ちよさ、知見などプライスレス！なものをいっぱい得ることができました

Slide 22

Slide 22 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25

Slide 23

Slide 23 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 モブプログラミング（モブプロ）

Slide 24

Slide 24 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25

Slide 25

Slide 25 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 ソフトウェア開発は、コミュニケーションの塊

Slide 26

Slide 26 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 ソースコード考古学はつらみとの戦い開発の障害となるもの • 複数人数が関わった古いコードのもつ一貫性のなさ • 属人化してしまった知識を、ソースコードから追いかけるのは、エスパーやるのと変わらない • 開発効率を落とす最たる物でありつつも、色々な組織に根強く残されている「動くからいいじゃん」

Slide 27

Slide 27 text

#JTF2020 July Tect Festa 2020 A6 2020.07.25 #JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 断片でも知ってるひとや知ってそうなひとに聞けば手っ取り早いやん！

Slide 28

Slide 28 text

#JTF2020 July Tect Festa 2020 A6 2020.07.25 #JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 知ってる人がないなら「どう解釈し扱うべきか」を相談して、後生に残すべき

Slide 29

Slide 29 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 コミュニケーションで問題と戦おう • チームメンバー集めて、要求・要件・仕様・設計・実装・レビューを一括でやることで、コミュニケーション効率を上げる • ソースコード考古学のつらみを1人に押しつけない。暗黙知をそのままにしない • あと、リモート時代だからこそ、みんな喋りたい欲求溜まってるでしょ？

Slide 30

Slide 30 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 注意点 • モブプロに向いてない人、やりたくない人もいるので、押しつけは悪手 • コツコツ場を作り上げる、チーム戦にもっていく、根回しそういったものが重要 • 誰がやっても同じになる作業はモブプロには向いてない • スーパースターの効率はまず出せない

Slide 31

Slide 31 text

#JTF2020 July Tect Festa 2020 A6 2020.07.25 #JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 身も蓋もないこと言うとコミュニケーションによる開発なのでメンバー次第

Slide 32

Slide 32 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 応用: モブワーキング • トラブルシューティング（そもそもモブの歴史は、これから始まった） • デザイン • チュートリアル • カスタマーサポート • インフラ構築・運用 • 営業ピアレビュー

Slide 33

Slide 33 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25

Slide 34

Slide 34 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 実際のモブプロのやり方

Slide 35

Slide 35 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 モブとタイピストパターン • モブプロには幾つかのスタイルがあるが、ここでは1つのパターンを紹介する • 時間ごとに持ち回りで交代するタイピストという役割と、それ以外の全員モブの役割に分かれる • モブ全員で成果物を作るために必要な相談をして、具体的にタイピストに指示を出して、一定時間で交代するだけ！

Slide 36

Slide 36 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 • モブに、何を操作すればいいか？を聞く • モブを全面的に信頼して、モブが決めて指示した内容をタイプする • 指示が不明瞭なときは必ず質問をするタイピスト

Slide 37

Slide 37 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 • 成果物を作り上げるために、紳士的（淑女的）かつ積極的にコミュニケーションをする • タイピストに打ち込んでもらうコードを相談して、具体的な指示を出す • みんなで全力で楽しむ！モブ ※Wikipediaより引用

Slide 38

Slide 38 text

#JTF2020 July Tect Festa 2020 A6 2020.07.25 #JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 タイピストはモブに混ざっちゃいけないのか？

Slide 39

Slide 39 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25

Slide 40

Slide 40 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 実際にやってみて分かること • 慣れないうちは2時間くらいでも本気で疲れる • ガチのプロダクションコードをモブプロで成果を上げることと、お試しでやるモブプロは、体験として全く違う • モブプロに懐疑的な人も、やってみると感想が変わることが多い

Slide 41

Slide 41 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 うまくいったモブプロはめっちゃ楽しい • 役割（フロントエンド、バックエンド、インフラなど）を超えて知見や達成感を得られる。自分の知らないことでも達成感を得られる。 • 相互理解が深まる • プロダクト考古学をあまり苦しまずに、少しでも究明できる • 少しずつ確実な一歩を踏み込んで、プロジェクトが前進する快感 • 成長の喜び

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 コツ

Slide 44

Slide 44 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 リモートでモブプロをする準備 • ZoomやSlack通話などを開いて、音声通話 + 画面共有をする • VSCode の LiveShare で誰か1人のホスト環境を共有するとやりやすい • 【参加者全員】がVSCode / LiveShare / 必要な拡張をインストールしておく • ただし、LiveShare は罠と癖が多いので設定は苦戦する可能性もある • LiveShareでモブプロを進めるための練習を済ませておく

Slide 45

Slide 45 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 linter や formatter を導入しよう • linter や formatter を活用する。インデントやコーディングルール議論、手動でのフォーマットほど無意味な時間の浪費はない。リポジトリレベルで設定しておき、VSCode拡張もインストールしておきましょう。 • linter や formatter の設定は一般的なものを使う。細かい議論は自転車置き場議論にしかならないので限りなく不毛

Slide 46

Slide 46 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 タスク選定をする初めてのモブ体験が楽しさになるか最悪になるかはこれ次第 • やろうとしている作業について、情報をチケットなりに記載しておく • 初めてのモブをやるときは、ある程度道筋をつけて、接待プレイを心がける方が良い • 題材選びは重要。簡単すぎても、ハマりすぎてもだめ

Slide 47

Slide 47 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 モブセッション開始時にすること • モブ啓蒙や教育を目的とするか、効率を目的とするか？を決めておく。初回はおそらく「実際の案件にモブプロが有効であることを確認してもらう」ということになるはずで、前者ということになる • モブプロのこと、モブとタイピストの役割について説明 • やってはいけないことの説明 • やるべきことの説明

Slide 48

Slide 48 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 ファシリテーションが重要 • コミュニケーションの場を作り上げること。できれば協力者を確保して、場を作る手助けをしてもらう • 歩調を合わせることと、質問出来る空気を作ること、ハマり防止 • 議論が紛糾して空中戦にならないこと • みんなが積極的に楽しく喋ること

Slide 49

Slide 49 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 密なコミュニケーション • コミュニケーションの空白をなくす。独演会になったり、置いてけぼりの人を作らない • 少しでも何か出来たら、大げさなくらい喜ぶ、拍手する、褒める • お互いを尊重し合う。HRT重要。絶対に言論封殺をしない場を作る

Slide 50

Slide 50 text

#JTF2020 July Tect Festa 2020 A6 2020.07.25 #JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 伝える努力、傾聴力どちらも必須

Slide 51

Slide 51 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 伝えるときに工夫することモブプロ体験を大きく左右する • 具体的な指示であればあるほどスムーズになる • ファイル名や行番号を常に口に出すことで、今どこを見ているのか、どこに対して言ってるのかを全員が気にかける • 「スペース」なんかも口に読み上げる方がいい。 • 変数名・関数名は特殊な場合「キャメルケースで」「先頭大文字で」とかを明示する • 慣れてくれば、コミュニケーションを少しずつショートカットできるようになってくるので、根気強く、分かりやすい指示を心がけましょう

Slide 52

Slide 52 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 議論をする • 議論が起こることは喜ばしい。それは心理的安全性を満たせている証明 • 絶対に議論封殺をしない。「それはさっき検討したから」で終わらせると心理的安全性は無くなっていく。「どこが気になりますか？」「それを後回しにできない理由はどういうところですか？」傾聴力がとても大切 • でも議論ばかりでも先には進まないので、場合によっては議論に5分や10分くらいの時間制限を設けよう • 後ほど説明する空中戦は議論に見せかけた時間の浪費なので注意

Slide 53

Slide 53 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 歩調を合わせる • できる限り、一番遅い人、理解度が低い人に合わせる • 繰り返しになるけど、ファイル名や行番号を読み上げるのは効果的。遅い人は「今どこを見ているか分かってない」ことが多い • 定期的に問いかける、気にかける、喋ってないひとを慮る

Slide 54

Slide 54 text

#JTF2020 July Tect Festa 2020 A6 2020.07.25 #JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 モブプロでは「流れを止めてしまうと悪い気がして質問できなかった」が発生しやすい

Slide 55

Slide 55 text

#JTF2020 July Tect Festa 2020 A6 2020.07.25 #JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 「ちょっと駆け足だったかも知れません。ここで、他の皆さんに共有してあげたい疑問はありませんか？」

Slide 56

Slide 56 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 改善していくボーイスカウトルールなど、一歩ずつ前進できるマインドセット • JSDoc/JavaDoc/YARDなどのコードドキュメントを追加 • 不完全な型定義を改善 • 足りないユニットテストの追加 • 暗黙知をドキュメント化

Slide 57

Slide 57 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25

Slide 58

Slide 58 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 落とし穴を回避しよう

Slide 59

Slide 59 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 アンチパターンは全員に苦い記憶を残してしまう • 世の中のモブプロ関連の情報を見たとき高頻出 • モブプロのコンセプト崩壊 • モブプロ体験を著しく落とす • その結果、モブプロ懐疑派や反対派が誕生してしまう

Slide 60

Slide 60 text

#JTF2020 July Tect Festa 2020 A6 2020.07.25 #JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 「ペアプロの延長線」「タイピストが暴走」「誰かが勝手に書き換える」

Slide 61

Slide 61 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 モブプロのコンセプト崩壊を防ぐ • ペアプロとモブプロは全く違うことを説明しておく • モブとタイピストの役割を説明しておく • 口で説明するのが苦手な人には、なんとか頑張ってもらう。手伝う。傾聴力を最大限駆使して、暴走を防ぐ • とにかくファシリテーションが命 • 協力者を少しずつ増やしていく

Slide 62

Slide 62 text

#JTF2020 July Tect Festa 2020 A6 2020.07.25 #JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 「空中戦」

Slide 63

Slide 63 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 空中戦を防ぐ必ず可視化しよう • ソースコードなら、でたらめに思えるものでも、必ず入力してから議論をする • ソース以外のものなら、テキストに書き出すか、長引くならプログラミングからいったん離れて、MURALのような専用のツールを使って、整理すること • ファシリテーターは常に空中戦にならないことを意識する

Slide 64

Slide 64 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 ハマり防止 • ハマりの気配を感じたら「いったんこれは置いておいて、先にこちらをやってみませんか？もちろん後でちゃんとやるようにメモしておくので」 • 識者を呼べるなら呼んでしまう「CTO教えて！！」 • 何かどうしても調査が必要なら、必ずタイムボックスを設定する。10分くらい

Slide 65

Slide 65 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25

Slide 66

Slide 66 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 モブプロが終わったら

Slide 67

Slide 67 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 ふりかえり • 参加者のモブプロに対する感触を掴んでおく • 強制することなく気持ちを引き出す • 楽しさを可視化することで、楽しさを演出 • MURALを使いましょう。もちろん類似の別のサービスでも構いません。とりあえずMURALと同程度の機能性・操作性を持つサービスは絶対に必須です

Slide 68

Slide 68 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 学習効果 • もし可能なら、業務時間、特にモブプロ終了後に、学習時間制度を設けるべき • モブプロをすると、業務知識、暗黙知、技術的知見など、得られるものがとても多いのだけど、それらは時間が経てば経つほど揮発する • ブログを書く、資料を残す、公式サイトを読みに行く、実験コードを書く、Slack で発言する、過程を残すなど • 詳細のレポートを残すべきかは、コストがかかりすぎるため意見が分かれるところ。音声通話の文字起こしが低コスト・高精度で可能ならやってもいいかも

Slide 69

Slide 69 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25

Slide 70

Slide 70 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 まとめ

Slide 71

Slide 71 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 まとめ • モブプロは、コミュニケーションによる開発手法 • 実際の体験に勝るものは存在しえない • 良いモブプロ体験は、ファシリテーションが重要な鍵 • 傾聴力を駆使しよう • 可視化必須、MURALか類似サービスを試してみてください • 協力者を得よう。増やしていこう

Slide 72

Slide 72 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 参考資料 • 成功する実践的モブプログラミング - Qiita • モブプロの聖地 Hunter Industries で学んだこと - kawaguti’s diary • モブプロの聖地 Hunter Industriees で学んだこと〜複数モブ編 - kawaguti’s diary • モブプロにやりづらさを感じて改善した話 - Sansan Builders Box • 「モブプログラミング・ベストプラクティス」読んだのでモブプロの魅力と始め方をまとめる • Hunter Industriesの方のモブプロ体験会で教わった、本場のモブプロプラクティス - little hands' lab • Mob Programming Startup Manual #MobProgramming #モブプロ • モブプログラミング・ベストプラクティスソフトウェアの品質と生産性をチームで高める | マーク・パール, 長尾高弘, 及部敬雄 | 工学 | Kindleストア | Amazon

Slide 73

Slide 73 text

#JTF2020 #JTF2020A July Tect Festa 2020 A6 2020.07.25 モブプロは楽しいので是非とも体験してみてください