こんにちは。ウェブアプリケーショングループのエンジニアの川井です。最近、新しいプロジェクトを立ち上げる際、開発を始める前に新しい仕様や設計に関する整理やコミュニケーションを強化するため、モブ設計を導入しました。この記事では、モブ設計の概要と実施方法について紹介します。

背景

新しいプロジェクトを始める際、従来は1人のエンジニアが最初の段階の設計と仕様の整理を担当し他のメンバーにレビューしてもらってました。このやり方では以下の問題がありました。

設計を担当するメンバーの大きな負担になっていた。
設計の検討や仕様の整理もそのメンバーに属人化していた。
設計に関してチーム内でのコミュニケーションが不足していた。

この問題を解決するため、モブ設計を実施してみました。

モブ設計とは

チームではモブプログラミングを過去に実施したことがあり、そこではチーム全員で同期的にコミュニケーションを取りながら同じタスクの開発をやってました。設計や仕様の整理も同じようにチーム全員で同期的にコミュニケーションを取りながら進められないかと考え、モブ設計という名前をつけて実施してみました。

使用ツールの紹介

チームがモブ設計を実施するために利用しているツールは、主にFigmaとGoogle Meetです。

Figma: FigmaのFigJamを利用し設計を共有し、リアルタイムで協力できるようにしています。Figmaを使用することで、チーム全体が同じボードを見ながら、共有でき画面のデザインもFigmaで作成されているため簡単にモブ設計用のボードに写し開発向けのコメントやメモを残すことができます。

Google Meet: チームのメンバーは基本フルリモートのため、Google Meetを使用して同期的にコミュニケーションをとりながら、設計に関する議論を進めるようにしています。最近ではSlackのハドルを使うこともあります。

これらのツールを利用して設計の議論を効果的に行い、モブ設計を実施しています。

モブ設計の進め方

モブ設計は、以下のステップに従って進行しています。画面がないAPIの実装のみの場合など、プロジェクトの内容によってステップを省略することもあります。

STEP 1. 関連エンティティの特定:
最初に、新しい仕様に関連するエンティティを特定します。これには、既存のエンティティと新たに必要なエンティティを洗い出し、ER図を作成します。このステップでは、プロジェクトの新しい仕様を整理しながら必要なデータ構造を明確にします。

STEP 2. 画面とエンティティの関連付け:
次に、プロジェクトの仮デザインをもとに、どの画面や画面の部分がどのエンティティを参照するかを明確にします。画面とエンティティの関連性を洗い出すことで、データの流れを整理できます。

STEP 3. エンティティのエンドポイント決定:
画面ごとにエンティティをグループ化し、エンティティのエンドポイントを仮で決定します。このステップでは、新しく必要なエンドポイントのURLのパラメータやエラー時の対応、他に考慮するものがありましたら検討します。

STEP 4. ライフサイクルとドキュメント:
次に、各エンティティについてライフサイクル図を作成し、そのエンティティがどのように作成・編集・削除されるか、どこから変更が加えられるかを洗い出します。複雑なプロセスが存在する場合、シーケンス図を作成し、プロセスの手順を明確にします。また、新たに作成されるエンティティに関するリソースドキュメントを作成し、既存エンティティに変更がある場合にはドキュメントを更新します。

STEP 5. 開発タスクの作成:
最後に以上のステップで洗い出したER図やエンドポイントの情報を踏まえて必要なタスクを洗い出します。タスク同士の依存関係やグルーピングを行いタスク管理ツールに具体的なタスクを作成します。

モブ設計をやってみて

モブ設計を実施し、以下のことが改善できたと感じました。

1. 新規仕様と必要な設計の整理

チームでモブ設計を導入した目的は１人の負担を減らし、チーム全員が新プロジェクトについて基本的な整理を持つことでした。以前のアプローチでは、初期の設計や仕様の整理が１人のメンバーに依存しており、他のメンバーは後から設計書を理解しなければなりませんでした。モブ設計を導入することで、プロジェクトの設計に関する議論と設計を同期的に行い、チーム全体で新プロジェクトを理解が上がったと思いました。

2. 知識共有

モブ設計を通して、新しい仕様の疑問点や既存設計について話し合うことができました。Figmaを使用して議論した項目を記録しているため、後でそのFigmaを見てドキュメントとしてみることができました。変更がある場合、コメントも追加できました。これにより、議論の内容や決定事項を失うことなく、新規プロジェクトの開発ドキュメントとして保管できました。

3. コミュニケーション

Google Meetを使用して初期の設計を同期的に行ったため、各メンバーが持つ質問や懸念事項を議論したり、新しいメンバーが入った時の既存機能の説明も簡単にできました。非同期でコミュニケーションをする場合、整理に時間を結構かけたり、誤解することがあります。モブ設計により、チームはリアルタイムでのコミュニケーションを通じて意見を交換し、効果的なコミュニケーションを実現しました。

まとめ

モブ設計は、新しいプロジェクトの設計や仕様を整理するために、チームにとってすごく効果的でした。プロジェクトの初期段階での協力とコミュニケーションが向上し、アイデアの知識共有が実現しました。モブ設計により、各メンバーがプロジェクトの方向性を把握し、プロジェクト全体の基盤を共有できるようになりました。今後も、モブ設計を活かしながら、プロジェクトを進めていきます。