簡単にフロントエンドで始めるAI駆動開発
この記事はMoney Forward Kansai Advent Calendar 2025の5日目の記事です!
こんにちは、株式会社マネーフォワードの大阪拠点でフロントエンジニアをしています。Kazuki Tanidaです。
今年、急なフロントエンドメンバーの不足を補うために私はバックエンドからフロントエンド開発へとメインの役割が変わりました。
そんな急な変化をAI駆動開発の考え方を利用してチームの開発を担うことができたのでチップスとして紹介しようと思います。
TL;DR
- 小さくAI駆動開発を始めた
- MCP設定を利用せず手軽に始められた
- フロントエンドの複雑なタスクをこなせるようになっていた
AI-DLCでフロントエンド開発
AI-DLCについてはこちら
AI-DLCは、AIを中心的な協働者として位置づける、ソフトウェア開発の変革的アプローチです。AIが詳細な作業計画を体系的に作成し、積極的に明確化と指導を求め、重要な決定は人間に委ねます。
- 従来: 人間 → AIに指示
- AI-DLC: AI → 人間に提案・質問 → 人間が承認
開発フローの概要
以下のサイクルを回す様にすることで開発をスムーズにできる様にする。
- AIに詳細のプランニングをさせて計画書として作らせる
- 必要であれば修正依頼をする
- 承認者が承認してAIが実装を開始する
計画書をローカルに貯めておき、コンテキストとして利用できる様にしておきます。
コンテキストの粒度はStory > サブタスク毎にしてみました。サブタスクでも複数の計画が立てられる場合があります。
実際に以下の画像のように計画書が溜まっていきます。
実際の開発フロー
1. AIに詳細のプランニングをさせて計画書として作らせる
計画書を作らせる時に、ガイドラインとなるテンプレートを読み込ませます。
計画書を置くディレクトリと計画を立てる時に参考にしたいコンテキストを絞ることができます。
- テンプレートの例
コンテキストの溜め方と管理の仕方は自由ですが個人的にはローカルにコンテキストを溜めていく方法を採用しました。
# AI-DLC brief template
1. 作業の計画して、計画mdファイルを作成してください
Markdownファイルは `docs/adidlc-docs/plan/stories` 以下のディレクトリに作成してください。
計画書を作る際にブランチ名の指定がある場合は`PROJECT-00000`のようなprefixがブランチ名に付いていますので
`docs/adidlc-docs/plan/stories`以下にその名前のディレクトリを作成して、Markdownファイルを作成してください。
計画書を作る際に関連するコンテキストを把握する必要がある場合は以下のディレクトリを参照してください。
現在のブランチと関連するprefixのUser Storyを参照してください。
- `docs/aidlc-docs/plan/stories`
- `docs/aidlc-docs/done/stories`
2. レビュー依頼してください
そのMarkdownファイルを承認者が修正依頼する可能性があります。
3. 作業の開始
承認者が計画を承認した後に作業を開始してください。
# Restricstion
`docs/aidlc-docs/done/` 以下のファイル自体には一切の変更を加えないでください。
Cursorでテンプレートを読み込ませつつ計画を立てさせる。
(私はCursorを使っていたのですがその他のAIコーディングジェントでももちろん利用できます。)
ちなみに、Cursorはプロンプトで @ を使うと読み込むファイルの検索できます。
2. 必要であれば修正依頼をする
AIが作成した計画書をレビューします。（これはダミーの計画書ですが実際はかなり詳しく書かれています。)
必要であれば、計画書にフィードバックを行います。修正依頼をする時には明確に指示を出したり、別の選択肢を提示してもらうなどが可能です。
基本的にはCursorのruleでしっかりとドキュメントが書かれていればアーキテクチャに関する違反などは起きませんが、細かいCSSの修正などは必要になるケースがありました。
3. 承認者が承認してAIが実装を開始する
計画書が問題ないと判断したら承認してAIに実装してもらいます。
実装後に問題が起こったら再度サイクルの1に戻り計画書を修正してもらうか、再度計画書を作ってもらうのが良いでしょう。
不確実性のある難易度の高いUIの実装などでは細かく何度か計画書を立てて承認して実装してもらう。。。そのようなやり方がマッチしました！
まとめ
これらのサイクルを回すことにより精度の高いコンテキストを利用しつつ、育てつつ実装ができるようになりました。
今回はフロントエンドの開発における段階でのAI-DLCのチップスの一例を紹介しました。
AI駆動開発をされたことがない方はぜひこの考え方を使って新たな開発を体験してみてはいかがでしょうか!
Discussion