モブプログラミングで楽しく開発する(#13)

この記事の初出は、Software Design 2023年4月号です。

モブプログラミングとは

楽しいチーム開発をする方法の1つに、モブプログラミング(以下、モブプロ)というものがあります。
モブプロとは、3人以上で1つの画面を見て議論しながら開発することです。
キーボードを操作する1人を「タイピスト」、タイピスト以外のその他すべての人々を「その他のモブ」と呼びます。
モブプロの詳細については、及部敬雄さんの『モブプログラミングで「一緒に働く」を戦略的に仕事に取り入れよう』を参照ください。

今回は、実際のモブプロでどんな会話が行われるのかを紹介することで、モブプロがとても楽しい上に多くのメリットがあることを感じてもらえればと思います。

紹介するモブプロの事例

私の会社には、技術記事を投稿する社内版Qiitaのようなシステムがあります。
当時、そのシステムには、いいねの数でランキング表示する機能がありませんでした。
私は「いいねランキングがあった方が投稿者のモチベーションが上がる」と考え、「月間いいねランキング」を表示する Web サイトを3人のメンバーでモブプロで作成することにしました。
当初の構想としては、下図のように記事タイトル、投稿者名、投稿日時、いいね数をランキング形式で表示し、クリックしたら該当記事のURLに飛ぶイメージでした。

開発するWebページのイメージ

この Web サイトを作るにあたって、React で Web API のレスポンスを用いて画面に一覧表示するやり方を紹介した記事を見つけました。
その記事内のソースコードをベースとして、呼び出す Web API と見た目を少し変更すれば、目的の Web サイトが作れると考えました。

しかし、当時の開発メンバーは全員 Web のフロントエンド開発の初心者で、React はチュートリアルをやっただけでした。
そんな状態でしたが、2時間のモブプロでリリースできるプログラムが作成できました。
以降では、実際のモブプロにおける3人の会話の様子を取り上げつつ、モブプロの良さを3つ紹介します。

選択肢が多くあるほど効果的

以下は、開発が始まった直後の会話です。

「Webサイトに記事一覧を表示するために、まずは社内システムに投稿された記事一覧を取得する Web API がどんなレスポンスを返すか知りたいね」
「じゃあ、Web API のヘルプを確認しよう」
「ヘルプにレスポンスの事が書いてない・・・」
「じゃあ、Web API を実行してレスポンスを確認しよう」
「実行できたよ。記事タイトル、投稿日時、いいね数が取得できるね」
「あっ！レスポンスに投稿者の Id はあるけど名前がない」
「これじゃあ、投稿者の名前が表示できないね」
「投稿者の名前を表示するには、投稿者一覧の Web API も実行する必要があるから、作る難易度が上がるよ」
「じゃあ、投稿者を表示する機能は無くそう！それがなくてもリリースはできるよ」
「それだ！」
「あれ？記事一覧を取得する Web API のパラメータに投稿日時でフィルタする機能がないよ」
「ええっ！？フィルタができないと、月間ランキングを表示できないよ」
「投稿日時でフィルタはできないけど、ソートはできるみたいだね」
「じゃあ月間ランキングはやめて、直近の投稿記事30件のランキングにしよう。1ヶ月間の投稿数は約30件だし、投稿者のモチベーションを上げる事が目的だから、それでも十分価値は提供できるよ」
「それだ！」

このように、裁量が大きく選択肢がたくさんあるタスクであるほど、モブプロは効果を発揮します。
たくさんの選択肢の中から、皆で議論して知恵を出し合うことで、最良の選択肢を選ぶ確率が高くなります。

今回の例では、プログラムの仕様や設計を自由に変更できるタスクなので、プログラミングしながら柔軟に仕様を変更しました。
価値を享受できる最小機能を素早くリリースするMVP(Minimum Viable Product)では、スピーディーな開発が必要になるため、柔軟に仕様変更できる恩恵は大きいです。

俯瞰した視点からの提案

以下は、少し開発を進めた時点での会話です。

「あとは、Web API で取得した記事一覧を画面に表示する所だね」
「ベースプログラムでも、Web API のレスポンスを用いて画面に一覧表示しているから、それを少し変えればできそう」
「ちょっと待って。Web APIのレスポンスを格納した変数名が、ベースプログラムの変数名のままだと、混乱しやすいかも。変更する関数内の変数名は、適切な名前に直そう」
「それだ！・・・・こんな感じ？」
「うん、これで何をやっているか分かりやすくなったね」

手を動かしているタイピストと比べて、その他のモブは俯瞰した視点になれます。
そのため、修正すべき変数名など、1人だと気付きにくい問題を見つけやすくなります。
他にも、「先にこっちのクラスを作った方がいいかも」のように作業の優先順位を見直したり、「なんでその方法で実現するんだっけ？」のようにロジカルな判断を促したり、最良の選択を選ぶための助けになります。

暗黙知の共有と達成感

以下は、Web API で取得した記事一覧を画面に表示させることに成功した後の会話です。

「とりあえず Web API で取得した記事一覧を画面に表示できたね」
「でも、これをいいねの多い順にソートしないといけない」
「Javascript で、連想配列をソートする方法なんて知らないよね」
「じゃあ、検索だ！キーワードは？」
「Javascript　連想配列　ソート」
「あった！これでソートできる！」
「できた！記事をいいね順に表示できたぞー！」
「完成だ、やったー！」(一同、喜ぶ)

ここまでの会話で紹介してきたように、モブプロでは、各自が考えていることを声に出して共有することになります。
そのため、各自の思考過程の暗黙知を共有できます。
特に、熟練者と一緒にモブプロをやると、次に挙げるような様々な暗黙知を共有できます。 以下に暗黙知の例を記します。

• 分からないことがあった場合の調査方法(検索の仕方を含む)

• 仕様や設計を決める時の思考過程

• 何から優先するか、なぜその方法を選択するかなどの判断方法

• 各種ツールの便利な使い方

また、一緒にワイワイ会話しながら物ができていくことは、とても楽しく感じます。
そして、タスクが完了した時の達成感を、皆で共感できます。
「楽しい」というのは、とても大事なことで、楽しい時間はとても集中して取り組むため、高い生産性で開発できます。

私のチームでの活用

私のチームでは、選択肢がたくさんあるタスクや、タスクの中での学びを共有したい時などにモブプロを行っています。
以前はオフラインで大きなディスプレイを用意してモブプロをやっていましたが、リモートワークになって画面共有だけでいつでもできるので、やりやすくなりました。
モブプロは、楽しく開発できる上に様々なメリットがあるプラクティスなので、活用してみることをお勧めします。

---

連載「ハピネスチームビルディング」の次回の記事はこちら↓

前回の記事はこちら↓