リモートペアプロ ハンズオン

# リモートペアプロ ハンズオン --- ## WHY * **世の中の変化** →コロナなどの影響で、リモートでのペアプロに切り替えようとするプロジェクトが増加 * **開発チームへの期待の変化** →リモートでもこれまで同様orそれ以上に開発ができるようになることが、今後チームに求められる --- ## ハンズオンで行うこと * リモートでのペアプロを試してみる * リモート開発での **Working Agreement** （チームの約束事）について考えてみる --- ## ハンズオンの狙い * リモートでのペアプロを経験を持ち帰っていただくこと * 参加者各自のチームでリモート開発を実践できるようになること --- ## 前提知識・経験(あるとよい) * ペアプロ * モブプロ * オンライン会議ツール、チャットツール、 などの使用経験 --- ## (事前のお願い) * 参加者の皆様の反応が見えないと、進行がし辛いです * できる限り、カメラオン＆大きめの頷きや 相づちでお願いします！ * リモートペアプロは特に疲れやすいので、 休憩が必要なときには遠慮せずに教えてください --- ## このハンズオンの進め方 * **ペアプロ→ふりかえり→ペアプロ→ふりかえり→ペアプロ→ふりかえり→**... * ペアプロ(各20分)：20分毎にドライバー交代 * ふりかえり(各10~20分)：参加者全員でKeep、Prpblemを共有、Tryを決める --- ## ハンズオンに必要な環境① * オンライン会議ツール * Zoom、WebEXなど * 顔やデスクトップを映せるツールがよい * コードエディタ * VSCodeなど * 参加者全員でエディタを揃えるほうがよい * 共同編集機能があるものを選ぶのもよい --- ## ハンズオンに必要な環境② * 共同作業ツール * Confluence、CodiMD、Miroなど * 作業メモや付箋などを全員で共有できるツール * ペアプロだけでなく、ふりかえりでも使用する * チャットツール（あるとよい） * Slack、Mattermostなど --- ## お題決め(10分) 参加者全員でペアプロのお題を決めましょう例： * ①ランディングページ（目安：0.5日程度） * ②SPA作成＋API活用（目安：1〜2日程度） ※ハンズオンの時間で終わらないようなお題でも構いません ※全員が触れたことのあるような言語がよいです --- ## 準備(40分) ペアプロを始めるための準備や チームの決め事などを参加者全員で行いましょう * ペア or モブどちらでやるか * ペアの組み合わせをどうするか * ドライバー＆ナビゲーター交代をどうやるか * ビデオ会議やチャットをペア毎に分けるか * ふりかえりをどのように行うか * 言語、開発環境、構成管理方法、などなど --- ## 参考： Here’s how we do Remote Mob Programming * https://www.remotemobprogramming.org/ --- ## 参考：一部紹介 * **Remote Everybody** * メンバー全員をリモートにすること * リモートチーム／オフラインチーム間で心理的壁が生まれるのを防ぐ * **Camera Always On** * カメラは常にオンにする * できれば全員でカメラをオンにする * **Small Team** * 発言しやすいチームのサイズを保つ * 必要に応じて、チームを適度に分割する --- ## 参考：一部紹介 * **Screen Sharing** * ドライバーがナビゲーターに画面を共有 * **xx Minute Intervals** * リモートは集中しすぎる・疲れやすい * 10〜20分でドライバーを交代するとよい * **Git Handover** * Gitのpush/pullでドライバーを交代する * **Group Decisions** * チーム全体で意思決定を行う --- ### 参考：某保険系PJ * 開発者13人からなる2アジャイルチーム * 緊急事態宣言後、リモートペアプロに移行 * Zoomのブレークアウトルーム機能で ペアプロ毎に部屋を割り当て＆ 全員が自由に部屋を移動 * ドライバーがナビゲーターに画面共有 * 20分毎にGit Push/Pulllでドライバー交代 * 全員リモート、全員カメラオン * Miroに設計やタスクの情報を集約 --- ## それでは リモートペアプロを やってみましょう！ --- ## ペアプロ1回目(20分) * チームでの決め事に従い、各ペアで作業を行いましょう --- ## ふりかえり1回目(20分) * チーム全員で集まり、振り返りを行いましょう * ペアプロ2回目に向けて、アクションアイテムを1つ以上決めましょう --- ## ペアプロ2回目(20分) * 同じペアで引き続き作業する場合は、ドライバーとナビゲーターを交代しましょう * 可能そうなら、20分の枠内でもドライバーを交代してみましょう * ふりかえりで決めたアクションアイテムに取り組みながら、各ペアで作業を行いましょう --- ## ふりかえり2回目(10分) * チーム全員で集まり、振り返りを行いましょう * ペアプロ3回目に向けて、アクションアイテムを1つ以上決めましょう --- ## ペアプロ3回目(20分) * ドライバーとナビゲーターを交代しましょう * 可能そうなら、20分の枠内でもドライバーを交代してみましょう * アクションアイテムに取り組みながら、各ペアで作業を行いましょう --- ## ふりかえり3回目(10分) * チーム全員で集まり、振り返りを行いましょう --- ## (延長戦) ハンズオンをカスタマイズして、4回目以降のペアプロやふりかえりに取り組んでも構いません --- ## ディスカッション(20分) * 各ペアやチームでの気づき、よかったこと、うまくいかなかったことなどを共有しましょう --- ## 事例紹介 * xxx * xxx --- ## 最後に * ペアプロに限らず、リモートでのコミュニケーションの取り方について、**開発メンバー全員で考えてみる**ことが大切 * チーム全員が作業しやすくなるような **Working Agreement** （チームの約束事）を、必要に応じて設定しましょう --- 本日はご協力ありがとうございました皆様お疲れさまでした --- ## お題例： --- #### お題例①：ランディングページ(1/4) * トップページ <img src="https://i.imgur.com/HIxobzC.png" height="500px"> --- #### お題例①：ランディングページ(2/4) * サービス一覧ページ <img src="https://i.imgur.com/5UcReiv.png" height="500px"> --- #### お題例①：ランディングページ(3/4) * お問い合わせページ <img src="https://i.imgur.com/FRtuzNd.png" height="500px"> --- #### お題例①：ランディングページ(4/4) * 使用言語：HTML、CSS、など それ以外のフレームワークを活用してもよい * 静的サイトでよい * 各データやボタンはモック程度のものでよい * コードは任意のGitサーバーに格納すること * デモページを公開できるとなおよい --- #### お題例②：SPA作成＋API連携(1/4) <img src="https://i.imgur.com/akUVQrl.png" height="500px"> --- #### お題例②：SPA作成＋API連携(2/4) 内容： 1. 郵便番号APIから都道府県一覧を取得し 動的に表示する 1. チェックボックスで選択された都道府県から、感染者数の円グラフを動的に表示する --- #### お題例②：SPA作成＋API連携(3/4) 制約： * React／Vue.js／AngularJSなどを使い、 SPAとして構築すること * 都道府県一覧や都道府県別感染者数には、 外部WebAPIを活用して表示すること * Third Party製のグラフを用いて描画すること * 最新版のGoogle Chromeで動作すること --- #### お題例②：SPA作成＋API連携(4/4) 参考WebAPI： * [都道府県一覧 - 郵便番号API](https://postcode.teraren.com/doc) * [COVID-19 Japan Web API](https://documenter.getpostman.com/view/9215231/SzYaWe6h?version=latest)