11
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

CursorとFigmaMakeで開発サイクル短縮【AI駆動開発】

11
Posted at

👀概要

パーソルホールディングス デジタル開発部 SBUデジタル開発室の開発チームです。
AI駆動開発を初めて実践したので、その取り組み内容と結果、振り返りをご紹介します。

開発サイクルを短縮でき、生まれた時間でユーザーとの接点・レビューを増やすことができたので、AI駆動開発は私たちにとって大変有効な手段だとわかりました。
この記事では、そのプロセスと結果、振り返りをご紹介します。

👨‍👩‍👧‍👦対象者(Who)

  • AI駆動開発に興味がある方
  • パーソルホールディングスのAI活用事例にご興味がある方

🗒️目次

  • 背景
  • 開発の進め方
    • 基本方針
    • 各工程
  • 開発環境
    • Cursor
    • Figma Make
  • やってみてよかったこと、よくなかったこと
  • 結果
  • 最後に

📝 内容

背景

今回、私たちのチームは既存システムに対する小規模なエンハンス開発を行うこととなりました。
既存システムは他チームが開発したもので、フロントエンド(画面)とバックエンド(マイクロサービス)に対し、新機能の追加と一部機能の修正を実施します。

しかし、私たちには次の課題がありました。

  • 私たちのチームにとって未習熟の開発言語で作成されたマイクロサービスがある
  • 細かな要望から発生した、複雑な実装を要する箇所がある
  • 開発期間が1か月であり、非常に短い

従来の開発方法そのままでは既存システムの理解や開発言語の習熟に時間がかかり、要望実現が最低限となってしまうことが予想されました。最悪の場合はスケジュールの遅延があるかもしれません。

そこで、私たちはAI駆動開発を採用することにしました。
AIを活用し、開発スピードを上げることで、これらの課題を解決しようと考えたためです。
また、AI駆動開発の有効性を検証したいと考えたことも、採用理由の1つです。

開発の進め方

私たちのチームでは、普段は次のようなプロセスで開発を進めています。

  1. 要件整理
  2. 設計 (レビュー含む)
  3. 実装
  4. 単体テスト (レビュー含む)
  5. 結合・シナリオテスト

AI駆動開発を行うことを念頭に、各工程で何を実施していくかの作業詳細を考えました。

基本方針

今回は設計~単体テストまでをAIに任せたいと思っています。
そのためには、AIに要件や仕様、実装計画を伝えるドキュメントが必要です。
さらに、ドキュメントは人の目でも確認・管理しやすい形式であることが望ましいです。

このような考えから、開発ドキュメントは全てMarkdown形式で作成することにしました。
Markdown形式であれば以下の利点もあり、開発の透明性と再現性を高めることも期待できます。

  • ソースコードと一緒にgitでの構成管理がしやすい
  • AIと人の双方が同じコンテキストを参照できる

各工程

要件整理

まずは、開発メンバーが要件・仕様ドキュメントを作成します。
このドキュメントは次工程でAI実行のプロンプトになるため、開発メンバーがレビューします。

設計

AIに実装計画ドキュメントを出力してもらい、前工程と同様に開発メンバーがレビューします。
ドキュメントが次工程のプロンプトになる点も、前工程と同じです。

実装

実装計画ドキュメントをもとにAIが実装コードを生成します。
実装コードは必要に応じて開発メンバーが微修正をしますが、ほとんどはAIに任せます。

単体テスト

AIがテストコード生成・実行・実装コード修正を反復し、設定した目標カバレッジに到達するまで継続します。
テストの観点や妥当性は、都度必要な場合に開発メンバーが確認・検証します。

結合・シナリオテスト

この工程はAIを用いず、従来通り開発メンバーが担います。

AI駆動開発で使用したツール

開発に用いるAIには主に以下2つのツールを利用しました。

Cursor

Cursorは、AIが手伝ってくれるAIコードアシスタントです。
普段のエディタ(例:VS Code)に常に賢い相棒(AI)が横についてくれるイメージです。
人間が行う操作をAIエージェントが自動で実行してくれます。
その際、関連するファイルの読み込みやコマンド実行に必要な情報の収集を自動化してくれます。
また、ルールを定義することで細かな調整が不要になり、ガイドラインに沿った開発が簡単にできます。

また、各種開発プロセスに特化したモードが用意されており、状況によって使い分けることもできます。

モード 用途
Ask 質問応答専用で、リソースの変更をエージェントは行わない。
Plan タスクの計画立案モードで、指示に対する段階的な作業計画を作成してくれる。
Agent AIが自律的にタスクを実行するモード。
Debug 検証が困難なバグをAIに検証させることができるモード。

cursor.png

Figma Make

Figma上のデザイン作業をAIが自動で生成してくれます。自然言語や画像による指示でデザインモックを生成することができます。
また、Figma MCPを利用することでCursorにデザインモックの情報をそのまま読み込ませることが可能になり、実装の連携がスムーズに進めることができます。
デザインモックを高速で作成することで、色やサイズなど言語化しにくく手間がかかる情報も実際のアプリのようにユーザーに見せられ、齟齬が少なくコミュニケーションが取れます。

figmamake.png

やってみてよかったこと、よくなかったこと

というわけでチームとして初めてやってみたAI駆動開発、いろいろと工夫してみたり実験してみたり、試行錯誤をしました。

よかったこと

AIを使用することで、レビュー工程が1つ増えたとしてもそれを補って余りあるほどに開発速度が向上しました。
今回、AIコードアシスタントはCursorを使用しましたが、今後は別のサービスも利用してみて自分たちの環境によりマッチするようなAIを探してみたいと思います。

Figma Makeでのデザインモック作成

Figma Make AI を用いてデザインモックを数時間で作成することができました。
素早くデザインモックを作ることで関係者へ当日レビューを実施することができ、1〜2日サイクルでUI差分と仕様差分を画面側に同時更新できました。
結果、迅速な改善が行うことができるようになりました。

よくなかったこと

完璧によくなかったと断じたいわけではなく、今回は失敗したので次回以降は改善したいところです。

AIを用いたレビュー

AIエージェント同士で相互レビューを実施してみたところ、指摘点が次第に増えていってしまいました。
最終的にはエッジケースが過多になり、レビューが長文化して収拾がつかなくなりました。

改善点として、レビューの責務分担やプロンプトでのレビュー条件・優先度の明確化や人手によるレビュー打ち切り基準の設定を行う必要があると感じました。

レポジトリ構成

このプロジェクトではマルチレポ構成をとっていました。
しかし、マルチレポではAIがアプリ全体の整合性を取りづらく、そこを人力で解決することも少なくなかったです。
AI駆動開発を前提とする場合はモノレポ化の検討をしてもよいと感じました。
あわせてレポジトリ内でのシステムデザインドキュメントや各種ドキュメントの格納・整備もしていった方がよさそうです。

煩雑なプロンプト

既存資材が存在することや、詳細なコーディングルールや業務要件のため、かなり煩雑なプロンプトを用いることになりました。
これに対してはプロンプトテンプレートの整備やシナリオ化、必要なメタ情報の標準フォーマット化など開発中も行いました。
これは開発要件に応じてより精緻に定めてもよいかもしれません。また、その定期的な見直しもすべきと思います。

結果、やってよかった

ざっくりですが、私たちのチームと今回の開発においては、AI駆動開発を選択してよかったと感じています。
企業特性など考慮すべき個別の事情はありますが、我々の開発においては大変有効でした。

スピードの手応え

プロトタイプ作成までの日数が短縮されたことで、レビュー・改修の要望合意形成に要する期間も短くなりました。
これにより会議の間隔は短縮することができ、実際に動くものベースで認識合わせ・改善のコミュニケーションを行えました。
コードベースの把握から実装計画、実装、単体テストの作成・実施までの一連のサイクルを高速に回せるようになりました。

AIを使用していなかった場合の想定工数と比較すると、倍近く短縮されたと想定しています。

作業時間比較

過去開発の一か月平均の作業時間と、今回の一か月で行ったAI駆動開発の作業時間で比較

項目 従来時間[h] AI駆動時間[h] 削減率
ユーザーヒアリング 13 6 -53.8%
要件/実装方針 6 2 -66.7%
コード実装/UT 27 11 -59.3%
レビュー/手直し 4 5 +25.0%
合計 50 24 -52.0%

graph.png

ユーザーとの接点とフィードバックの増加

AIに開発を任せ、人がレビューする体制によりスピード感のある開発サイクルを実現することができました。
その結果、ユーザーとの対話回数が増え、要望に近づけながらプロダクトを磨き上げることにつながったと思います。
ユーザーの声を早期かつ高頻度に反映することでプロダクトの質も向上させることができました。

ユーザーレビュー数比較

過去開発の一か月平均のレビュー回数と、今回の一か月で行ったAI駆動開発のレビュー回数で比較

指標 従来 AI駆動 変化率 備考
ユーザー会話数 29 51 +75.9% 約76%増加

最後に

AI駆動開発を行ったことで、開発サイクルが早まり合意形成が迅速かつ高密度になり、ユーザー価値の反映量が増加しました。
開発者は「プログラムを書くこと」ではなく「要望の実現」という本来の目的に集中できるようになったと思います。

そして、AIをうまく利用していくためにはドキュメントの整備とプロセスへの適応、開発を柔軟に変える勇気が成功の重要な鍵だと感じます。

11
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?