CHARITY CONFERENCE OKINAWA Vol.1 FRONTEND 2020/06/21 (Sun) YogAgile Engineer 岩村 琢 リモートワークで モブプログラミングを 上手くやる3つの方法

自己紹介 @takusamar いわむー＠ヨガはいいぞ 沖縄在住のフリーランスITエンジニア ヨガ×アジャイルで健康なチームづくりをサポートしています 2019年10月～ KDDI DIGITAL GATE フロントエンド開発（React/Flutter） スクラム、モブプログラミング 2020年3月より、新型コロナ対策のため 全拠点（東京、大阪、沖縄）で フルリモートワークを実施中。 アジャイルゆいまーる アジャイル開発のコミュニティ 「アジャイルゆいまーる」を運営 https://agile-yuimar.connpass.com/ 2

フロントエンド未経験～現在9ヶ月目 どのツールが良い・悪い、ということはない。環境や目的に合わせて使い分ける。 より楽に・手間が省けて、楽しく・快適に働けるよう、トライし続ける。 年 2019 2020 月 10 11 12 1 2 3 4 5 6 React Flutter AWS Amplify Google Firebase 勤務形態 物理出社 リモートワーク 使用 ツール ホワイトボード GHE Slack Trello Figma VS Code Android Studio Zoom Jitsi Teams GHE Slack Trello Discord Figma Jamboard VS Code Android Studio 3

リモートワークしてますか？ モブプログラミングしてますか？ ペアプログラミング 2人で1台のPCを操作する モブプログラミング 3人以上で1台のPCを操作する 本セッションでは、 モブプログラミング（モブプロ）＝ 複数名で同時に同一の作業をすること とします。 対義語は、分担作業（作業を切り分けて担当者を決め、個別に作業する） 4

分担作業とモブプロの違い 分担作業 モブプロ 作業スタイル 作業を切り分けて担当者を決 め、個別に作業する。 複数名で同時に同一の作業を する。 時間の使い方 わりと自由。 自分のペースで進められる。 メンバ同士で作業時間を合わ せる必要がある。 集中力 つい他のことをしてしまった りする。 他のことを考える余裕がない。 悩んだとき 自分で調べる。 誰かに質問しても回答がすぐ もらえないこともある。 メンバ同士で相談することが できる。 その場で教え合い、学び合え る。 コードの品質 個人の力量に依存する。 レビューを受けることで品質 向上するが、全てのコードを レビューするのは大変。 ミスをカバーし合える。 常に相互チェックが働くので レビュー不要。 情報共有 属人化しがち。 情報共有のためのドキュメン ト作成などが必要。 チーム内で情報共有ができて いる。 5

向いている案件 分担作業 モブプロ 仕様が明確に決まっていて、既知の 技術で作れるもの。 ひかれたレールの上を速く走る速度 が求められる場合。 仕様があいまい（正解がない）、技 術的に難易度の高いもの。 トライ＆エラーを繰り返しながら進 む、状況判断や方向変換の敏捷さが 求められる場合。 ウォーターフォール アジャイル ウォーターフォール案件でもモブプログラミングが効果的な場面もある。 （仕様検討、技術調査、プロトタイプ作成、新規メンバのOJT、難しい不具合の調査など） 逆に、アジャイル案件でも分担作業でやる場合もある。 状況や目的に応じて両方を使い分けられるようにしておくと良い。 6

というわけで、 モブプログラミングの良さを ご理解いただけたものと思います。 とはいえ、リモートワークで モブプロをやるのは難しいのでは？ みんなバラバラに働いてるので… そう思っていた時期が私にもありました… でも、こうすると、できるようになるのです。 7

モブプログラミングの３要素 天の時 … 時間管理 地の利 … 開発環境 人の和 … 積極会話 リモートワークでは 特に大事 8

天の時 時間管理 時間交替制、適度な休憩 自習タイムをつくる 9

時間管理 2人の場合 3人の場合 Aさん 25 Bさん 25 休憩 10 Cさん 15 Dさん 15 Eさん 15 休憩 15 時間交替制、適度な休憩 時間を決めてドライバー（実際にコードを書く人）を交替する。 休憩を含めて１時間で１周するくらいのペースがおすすめ。仕事のリズムが整う。 上記はひとつの例です。 導入する際は各自でいろいろ試して、自分たちに合うやり方を見つけてください。 10

時間管理 １時間サイクル • 人間の集中力の限界 脳は疲れやすい。 「45分の集中＋15分の休憩」が理想。 • 健康維持 糖分補給、水分補給。トイレを我慢しない。 座りっぱなしは寿命が縮む。 • 他の予定と同期させやすい 打合せはだいたい正時（00分）開始のことが多い。 切りのいいところでモブプロを終わらせられる。 1時間のリズムが身体に馴染むと、1時間の粒度でタスクを切り分けられるようになる。 → タスク数×時間で見積もり工数が出せるようになる 11

時間管理 自習タイムをつくる モブプロの欠点： すごくできる人とモブプロすると、ものすごい高速で開発が進む。 →理解不足、消化不良のまま先へ進んでしまう。 時刻 作業内容 10:00 – 10:15 デイリースクラム 10:15 – 11:00 自習タイム 11:00 – 12:00 モブプログラミング #1 12:00 – 13:00 モブプログラミング #2 13:00 – 14:00 ランチタイム 14:00 – 15:00 モブプログラミング #3 15:00 – 16:00 モブプログラミング #4 16:00 – 17:00 モブプログラミング #5 17:00 – 18:00 自習タイム 18:00 – 18:30 レビュー、ふりかえり このような状況を解消するためには 自習タイムをつくると良い。 理解不足を感じるメンバーがいたら、 予習／復習の時間を確保しよう。 自習タイム実施例 12

地の利 開発環境 リモートワークでも距離をなくす 機材に投資する 13

開発環境 リモートワークでも距離をなくす さまざまなツールを駆使して、物理的に離れていてもすぐ隣にいる感覚を再現する。 14

開発環境 ふだん使っているツールの紹介 ツール 概要 Trello カンバン（TODO、DOING、DONE） Jamboard ホワイトボード（付箋紙、手書き、画像貼付） GitHub ソースコード管理 Figma UIデザインツール Slack チャットツール Discord 通話（音声／ビデオ）、画面共有 15

開発環境 機材に投資する 快適に仕事ができるよう、必要なものはケチらない。 機材 金額 43インチモニタ 39,322 TVスタンド 7,819 机 12,376 椅子 14,148 Echo 11,980 Yogibo Max 32,780 ヨガマット 3,090 フロアデッキ 14,390 : : 16

人の和 積極会話 発言しながらコードを書く 質問をためらわない 17

積極会話 発言しながらコードを書く この人は 何がしたいの かな？ ドライバーが無言だと、何をしようとしているか意図が伝わらない。 18 画面共有 画面視聴

積極会話 発言しながらコードを書く ドライバー ここでDBから データを取ってきて… よっこいしょ なるほど、 その方法で いくのね。 オッケー 考えていることを口に出してコードを書くことで、意図が伝わる。 19 画面共有 画面視聴

積極会話 質問をためらわない 画面共有 画面視聴 ドライバー ナイス！ サンキュー！ ドライバーもナビゲーターも、気になることがあったらどんどん発言する。 プロダクトを良くするために遠慮せず全力を尽くす。 この書き方よりも ○○のが良くない？ 20

モブプログラミングの３要素 天の時 … 時間管理 地の利 … 開発環境 人の和 … 積極会話 時間交替制、適度な休憩。自習タイムをつくる。 リモートワークでも距離をなくす。機材に投資する。 発言しながらコードを書く。質問をためらわない。 21

ご清聴ありがとうございました 今日お会いした皆様が身も心も健康で過ごせますように 22