弁護士ドットコム株式会社 Creators’ blog

弁護士ドットコムがエンジニア・デザイナーのサービス開発事例やデザイン活動を発信する公式ブログです。

モブプロが最高だった話

クラウドサインのフロントエンドエンジニア辻です。

現在所属しているスクラムチームで、はじめてモブプロを実施しました。
その結果、チームに非常に良い結果をもたらしたため、実施した経験とその中で得られた成果について書いていきます。

モブプロとは

モブプロ(モブプログラミング)とは、複数の開発者が 1 つのプロジェクトやタスクに取り組むソフトウェア開発の手法です。
チーム内で、1 人がタイピングを担当するドライバーとして、他のメンバーはアイデアや解決策を提案するナビゲーターの役割でプログラミングを進めます。

モブプロをしている画像

前提

  • チーム構成:計 5 名
    • バックエンドエンジニア:2 名
    • フロントエンドエンジニア:3 名
  • バックエンドの開発がメインとなるエピックの実装をすべてモブプロ実施
  • 全員リモートワークのため Google Meet 上で実施

今回実施したモブプロ

目的

私たちのチームでは「フロントエンドの開発メンバーにバックエンドの開発知見を共有すること」を目的にモブプロを実施しました。

役割

上記目的を達成するため、フロントエンドエンジニア 1 名がドライバーをローテーションで担当し、バックエンドエンジニアがナビゲーターを主導して担当しました。
また時間の管理のためタイムキーパーの役割を設け、ドライバー以外のフロントエンドエンジニアがローテーションで担当し、セッション終了 5 分前の通知をしました。

進め方

ポモドーロテクニックを参考に「25 分間作業・5 分間休憩」を繰り返しながら、モブプロを実施しました。
これにより、集中力を保ちながらも定期的に休息を取るように進めました。
また休憩の間にドライバーの人はセッションの再開に向けてツールの準備をしました(ツールの詳細は後述)

ツール

モブプロで主に活躍したツールは以下の 3 つです。

  • mob
  • Live Share (Visual Studio Code)
  • canvas (Slack)

順を追って説明します。

mob

https://github.com/remotemobprogramming/mob

モブプロセッションを効率的に管理するためのツールです。
これは、複数人でのコーディング作業を支援し、Git を利用して作業の同期を行います。
具体的には 3 つのコマンド(mob start, mob next, mob done)を使い、チームメンバー間での作業の切り替えをスムーズにし、モブプロを円滑に進めることを支援します。

以下ではツールの使い方について、 mob の README 掲載の図を元に Git の main ブランチで作業した場合を想定し説明します。

mob の仕組み図解

1. セッションの開始

モブプロを開始する際には、mob start コマンドを使用します。
このコマンドで、作業ブランチ(main)から新しいセッション用のモブブランチ(mob/main)を作成します。

2. ドライバーの交代

ドライバーの交代時には、mob next コマンドを使用します。
このコマンドは現在の作業内容をモブブランチ(mob/main)に自動的にコミット、プッシュし、次のドライバーに引き継ぐことができます。

3. セッションの再開

次のドライバーは、セッション再開時に mob start を実行することで、前回のモブブランチ(mob/main)の作業状態を復元し、途中から作業を再開できます。

4. セッションの終了

セッションを終了する際には、mob done コマンドを使用します。
これにより、モブブランチ(mob/main)の変更を作業ブランチ(main)に取り込み、モブブランチ(mob/main)を削除します。

最後に、作業ブランチ(main)で git commit, git push して完了です。

Live Share (Visual Studio Code)

https://learn.microsoft.com/ja-jp/visualstudio/liveshare/

Visual Studio / Visual Studio Code 向けに提供される、ユーザー間でのワークスペース共有を提供するツールです。
Google Meet 上でドライバーの画面共有もされますが、ナビゲーターがソースコードを自ら確認したい場面で便利だったため使用しました。
具体的な使い方は直感的かつシンプルなので、詳細な説明は割愛します。

canvas (Slack)

https://slack.com/intl/ja-jp/features/canvas

チームが Slack 内で情報を作成・整理・共有するためのツールです。
モブプロでは、円滑に進めるための情報整理のメモとして使用しました。

具体的には、以下の内容を記載しました。

  • 前回のドライバー情報
  • 前回までの作業状況と今回の作業予定
  • 事前準備で細分化した今回の作業タスク
  • その他作業に関するメモ

実施詳細

実装期間(約 10 週間)は基本的に毎日モブプロを実施しました。 進め方に前述のとおり 25 分間作業・5 分間休憩を 1 セッションとして、 1 日最大 8 セッション(4 時間)を上限に実施しました。
参加者全員が拘束されるモブプロでは、円滑な作業が進められるようにするため、バックエンドエンジニアが中心となり、canvas に必要な情報を整理しました。

成果

目的である「フロントエンドの開発メンバーにバックエンドの開発知見を共有すること」について、エピック後半ではフロントエンドエンジニアがナビゲーターの役割を担う場面が増え、その成果を実感しました。

また他にも、以下の成果も同時に得たことを実感できました。

効率的な問題解決と意思決定

チームメンバーが積極的に意見を出し合うことで、悩む時間が短縮され、問題解決に向けたアプローチを迅速に決定できました。
また開発中の選択肢について即時にチーム内で相談し意思決定を行うことで、プロジェクトの進行が円滑になりました。

コードレビューの効率化

コーディングの過程が共有されていたため、後からのコードレビューがスムーズになり、その時間が短縮されました。

知識共有の促進

言語仕様や実装観点、エディタの便利なショートカット、コマンドのオプションなど、開発機能以外の知見もメンバー間で共有されました。
これにより、チーム全体のスキルが向上しました。

見落としや修正点の早期発見

複数の開発者が同時にコードを見ることで、見落としがちなバグや改善点を早期に発見しやすくなりました。

実装経緯の共有

「なぜこのアプローチを選んだのか」という実装経緯がチーム内で共有され、実装経緯に関する知見をメンバー間で標準化できました。

心理的安全性の向上

チームメンバー間でのオープンなコミュニケーション量が増えました。
この環境により、メンバーは自らの意見や提案を恐れずに表現しやすくなり、結果として心理的安全性が高まりました。

まとめ

この記事では、私たちのスクラムチームがはじめてモブプロを実施した経験とその中で得られた成果について書きました。
「フロントエンドの開発メンバーにバックエンドの開発知見を共有すること」を目的に実施し、その成果を得ると共に予期せぬさまざまな成果を得ることができました。
ぜひ、チームの取り組みとしてモブプロを導入してみてはいかがでしょうか。