2018.08.24

モブプログラミング初体験

doiken

こんにちは、土居です。AWS認定ソリューションアーキテクトプロフェッショナル試験まであと1週間となり、ちょっとだけ緊張しています。

弊社では週のうち１日、基本的には実際のプロジェクトを除いた、業務の改善に資する活動を行う日を設けております。今回はその時間を利用して、皆でモブプログラミングを行いました。個人的には初めてでしたが、楽しかったので所感を述べておこうと思います。

Contents

きっかけ
題材
流れ
所感
モブプログラミングの作法
ペアプログラミングとの違い
次にやるなら

きっかけ

現在参画中のプロジェクトにおいて、よりフロントエンド開発の効率化を測るのを主目的とし、私が岡本（弊社フロントエンドチーム）からどのように考えて実際に作業しているのかを吸収するための手段として、モブプログラミングが良いのではと話題に上がりました。また合わせて同プロジェクトにAPI開発として参加しているバックエンドの人間からもVue.jsの開発の流れに興味があるという声もあり、やってみようということになりました。

題材

直近の作業として、デザイナーの成果物であるデザインテンプレートのスタイルを先行/並行して作成していたNuxt.js(Vue.js)のtemplateに当て込むというものがあったため、こちらを題材としてモブプログラミングしました。

流れ

今回は特に「モブプログラミング」の作法について細かに調べるということはやらず（私は初めてでしたが、弊社ではこれまで何度か行われたこともあったようです）、以下のような流れで割とカジュアルにやってみた感じでした。

参加者全員でSkype通話し、画面共有。
岡本が作業の流れの解説や質問を受けつつ、1画面に対してスタイルの当て込みを実施。（具体的には、若干DOM構造の異なる部分を合わせたり、スタイルをVue.jsに従って指定するなど）
土居が先ほどの流れをお手本として、岡本から支持、また皆からアドバイスを受けたりもしつつ実施。

この流れの中で、バックエンド側から興味深いところへの質問も飛んだりしていました。

所感

主に以下のようなポイントが印象に残っています。

基本となる作業の流れ(まずはデザインテンプレートをNuxt.jsのtemplate上部にコピペし、スタイルを当て込んでは完了した部分を削除していく。。など)
IDEの機能を使った操作
エラー発生時の対処
Vue.jsの仕組み（Vuexのaction, mutationの責務についてなど）についてサーバサイドからの質問に答える
コードレビュー的な指摘
基本的な作業については、慣れている人からすれば当然の部分だったりして、表には出にくい部分を意識して見られたのは良かったかなと思いました。

モブプログラミングの作法

本当はどのように行うものなのか？実際に他の方々はどのようにやっているのか？というところも気になりました。
モブプログラミングを実際にやってみた
 社内でモブプログラミングをやってみました
上記含め、いくつか参考にさせていただいた中では基本的には

ドライバー、ナビゲーターに別れて作業を行う。
一定時間で役割を交代する。

の様にするそうです。今回は1題材につき完了するまでドライバーを固定してやっていましたので、同時にレビューをされながら実装している感覚でした。途中で交代すると全員分の作業が見られたり、またどのように引き継ぐのかなどの観点もあって面白そうです。

ペアプログラミングとの違い

最初にモブプロと聞いた時に、パッと思い浮かんだのはペアプロでした。こちらは完全にペアプロと題すものでなくとも、画面共有しての本番作業（必ず2人で実施）など、近いものは弊社でも割と日常的に行われています。
大きく異なる点としては、役割の人数比になるかと思います。
ドライバーは必ず1人ですが、モブプロはナビゲーターが複数人となります。すると、ペアプロに比べてより様々な作業に対する意見が出てきますので、その分情報共有の点で優れていそうです。
一方で、ナビゲーターが多いほど単純な作業の時間帯効率は悪くなるので、実際の業務で生かすならペアプロがメインになると思います。
今回の目的でもありますが、成長をするためには自分がやっているところを自ら客観的に観察してうまくいっているところ、そうでないところを分析することが個人的にとても重要だと感じています。実際にはそれを実践するのは難しい作業もあるところ、モブプロで多人数（複数視点で）に見てもらって指摘をいただくというのはほぼ同様のことが行えている気がします。