2020/06/21(Sun) CHARITY CONFERENCE OKINAWA Vol.1 FRONTEND リモートワークでモブプログラミングを上手くやる3つの方法
CHARITY CONFERENCEOKINAWAVol.1 FRONTEND2020/06/21 (Sun)YogAgile Engineer 岩村 琢リモートワークでモブプログラミングを上手くやる3つの方法
View Slide
自己紹介@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 6ReactFlutterAWSAmplifyGoogleFirebase勤務形態 物理出社 リモートワーク使用ツールホワイトボードGHE Slack TrelloFigmaVS Code Android StudioZoom Jitsi TeamsGHE Slack Trello DiscordFigma JamboardVS Code Android Studio3
リモートワークしてますか？モブプログラミングしてますか？ペアプログラミング2人で1台のPCを操作するモブプログラミング3人以上で1台のPCを操作する本セッションでは、モブプログラミング（モブプロ）＝ 複数名で同時に同一の作業をすることとします。対義語は、分担作業（作業を切り分けて担当者を決め、個別に作業する）4
分担作業とモブプロの違い分担作業 モブプロ作業スタイル 作業を切り分けて担当者を決め、個別に作業する。複数名で同時に同一の作業をする。時間の使い方 わりと自由。自分のペースで進められる。メンバ同士で作業時間を合わせる必要がある。集中力 つい他のことをしてしまったりする。他のことを考える余裕がない。悩んだとき 自分で調べる。誰かに質問しても回答がすぐもらえないこともある。メンバ同士で相談することができる。その場で教え合い、学び合える。コードの品質 個人の力量に依存する。レビューを受けることで品質向上するが、全てのコードをレビューするのは大変。ミスをカバーし合える。常に相互チェックが働くのでレビュー不要。情報共有 属人化しがち。情報共有のためのドキュメント作成などが必要。チーム内で情報共有ができている。5
向いている案件分担作業 モブプロ仕様が明確に決まっていて、既知の技術で作れるもの。ひかれたレールの上を速く走る速度が求められる場合。仕様があいまい（正解がない）、技術的に難易度の高いもの。トライ＆エラーを繰り返しながら進む、状況判断や方向変換の敏捷さが求められる場合。ウォーターフォール アジャイルウォーターフォール案件でもモブプログラミングが効果的な場面もある。（仕様検討、技術調査、プロトタイプ作成、新規メンバのOJT、難しい不具合の調査など）逆に、アジャイル案件でも分担作業でやる場合もある。状況や目的に応じて両方を使い分けられるようにしておくと良い。6
というわけで、モブプログラミングの良さをご理解いただけたものと思います。とはいえ、リモートワークでモブプロをやるのは難しいのでは？みんなバラバラに働いてるので…そう思っていた時期が私にもありました…でも、こうすると、できるようになるのです。7
モブプログラミングの３要素天の時 … 時間管理地の利 … 開発環境人の和 … 積極会話リモートワークでは特に大事8
天の時時間管理時間交替制、適度な休憩自習タイムをつくる9
時間管理2人の場合 3人の場合Aさん25Bさん25休憩10 Cさん15Dさん15Eさん15休憩15時間交替制、適度な休憩時間を決めてドライバー（実際にコードを書く人）を交替する。休憩を含めて１時間で１周するくらいのペースがおすすめ。仕事のリズムが整う。上記はひとつの例です。導入する際は各自でいろいろ試して、自分たちに合うやり方を見つけてください。10
時間管理 １時間サイクル• 人間の集中力の限界脳は疲れやすい。「45分の集中＋15分の休憩」が理想。• 健康維持糖分補給、水分補給。トイレを我慢しない。座りっぱなしは寿命が縮む。• 他の予定と同期させやすい打合せはだいたい正時（00分）開始のことが多い。切りのいいところでモブプロを終わらせられる。1時間のリズムが身体に馴染むと、1時間の粒度でタスクを切り分けられるようになる。→ タスク数×時間で見積もり工数が出せるようになる11
時間管理 自習タイムをつくるモブプロの欠点：すごくできる人とモブプロすると、ものすごい高速で開発が進む。→理解不足、消化不良のまま先へ進んでしまう。時刻 作業内容10:00 – 10:15 デイリースクラム10:15 – 11:00 自習タイム11:00 – 12:00 モブプログラミング #112:00 – 13:00 モブプログラミング #213:00 – 14:00 ランチタイム14:00 – 15:00 モブプログラミング #315:00 – 16:00 モブプログラミング #416:00 – 17:00 モブプログラミング #517:00 – 18:00 自習タイム18:00 – 18:30 レビュー、ふりかえりこのような状況を解消するためには自習タイムをつくると良い。理解不足を感じるメンバーがいたら、予習／復習の時間を確保しよう。自習タイム実施例12
地の利開発環境リモートワークでも距離をなくす機材に投資する13
開発環境 リモートワークでも距離をなくすさまざまなツールを駆使して、物理的に離れていてもすぐ隣にいる感覚を再現する。14
開発環境 ふだん使っているツールの紹介ツール 概要Trello カンバン（TODO、DOING、DONE）Jamboard ホワイトボード（付箋紙、手書き、画像貼付）GitHub ソースコード管理Figma UIデザインツールSlack チャットツールDiscord 通話（音声／ビデオ）、画面共有15
開発環境 機材に投資する快適に仕事ができるよう、必要なものはケチらない。機材 金額43インチモニタ 39,322TVスタンド 7,819机 12,376椅子 14,148Echo 11,980Yogibo Max 32,780ヨガマット 3,090フロアデッキ 14,390: :16
人の和積極会話発言しながらコードを書く質問をためらわない17
積極会話 発言しながらコードを書くこの人は何がしたいのかな？ドライバーが無言だと、何をしようとしているか意図が伝わらない。18画面共有 画面視聴
積極会話 発言しながらコードを書くドライバーここでDBからデータを取ってきて…よっこいしょなるほど、その方法でいくのね。オッケー考えていることを口に出してコードを書くことで、意図が伝わる。19画面共有 画面視聴
積極会話 質問をためらわない画面共有 画面視聴ドライバーナイス！サンキュー！ドライバーもナビゲーターも、気になることがあったらどんどん発言する。プロダクトを良くするために遠慮せず全力を尽くす。この書き方よりも○○のが良くない？20
モブプログラミングの３要素天の時 … 時間管理地の利 … 開発環境人の和 … 積極会話時間交替制、適度な休憩。自習タイムをつくる。リモートワークでも距離をなくす。機材に投資する。発言しながらコードを書く。質問をためらわない。21
ご清聴ありがとうございました今日お会いした皆様が身も心も健康で過ごせますように22
hinayhinaylab
coconala_engineer
shkitayama
rynsuke
mhrtech
ikumatadokoro
sajikix
takasehideki
kenchan
kazukihayase
hokaccha
joker1007
sugawani
skipperchong
trishagee
holman
jasonvnalue
chriscoyier
cromwellryan
smashingmag
mthomps
afnizarnur
colly
sonatard