spec-workflow-mcpで仕様駆動開発をしてみる – NEXTSCAPE blog

はじめに

株式会社ネクストスケープ エンタープライズサービス部の小野塚です

AIツールの普及につれ、「仕様駆動開発」というものの必要性、重要性が高まってきています。
AIツールを使われている方であれば言わずもがなとは思いますが、AIには「よしなにお願いします」というのが通用しません。
AIが普及し始めの頃に「プロンプトエンジニアリング」という言葉が出てきましたが、今は「コンテキストエンジニアリング」の方が大事だと言われるほど、如何にコンテキストを正しくAIに共有できるかが重要となります。
特に新規に開発するシステム、そしてその規模が大きければ大きいほどその重要性は増していくと思います。
そこで以下の4項目、

  • Requirements: 何を作るか(ユーザーストーリー、機能要件)
  • Design: どう作るか(アーキテクチャ、API設計)
  • Tasks: 誰が何をするか(実装タスクの分解)
  • Implementation: 実際のコーディング

特に実装前のRequirements、Design、Tasks(要件定義、設計)をしっかり行い、それに基づき開発を進めるということが(AIを使う・使わないに限らずですが)必要となります。
以前紹介したSerenaも事前にある程度の粒度までしっかり資料を作成し、それに基づき実装を行うという点では仕様駆動開発に近いものがあります。

blog.nextscape.net

そして、今、仕様駆動開発を行うためのAIツールが注目されておりまして、その1つがAWSのKiroになります。

kiro.dev

ただ、筆者の環境ではKiroがまだ試せる状況に無く、先に仕様駆動開発を試してみようということで色々と調べたところ、以下のようなものが見つかりました。

  • gotalab/claude-code-spec
  • github/spec-kit
  • Pimzino/claude-code-spec-workflow

2番目のGithub公式の「spec-kit」を最初に試す予定だったのですが、世の中の情報を見る限り世に出たばかりでまだこれから的な印象がありましたので、更に色々と探してみた結果、spec-workflow-mcpなるものを見つけまして、試してみることにしました(spec-kitもこの後記事にしてみたいと思いますし、きっとまた1~2週間後には評価が変わっている可能性大ですが。。)。

github.com

ちなみにこのspec-workflow-mcpはその名の通りMCPとして利用できるものでVSCodeのマーケットプレイスにもあります。

設定

しつこいようですが、MCPとして利用できますので今回はCursorで試してみることにしたいと思います。
まずはいつものようにCursorの設定画面でNew MCP Serverを選択、

画像
以下のコードを追加します。
パラメータとして「”–AutoStartDashboard”」を追加することでWebのダッシュボードが利用できます。
今まで紹介したMCPと異なる点として”/path/to/your/project”には対象とするプロジェクトのパスを設定してください(少なくてもWindows環境では絶対パスを指定しました)。

{
  “mcpServers”: {
    “spec-workflow”: {
      “command”: “npx”,
      “args”: [“-y”, “@pimzino/spec-workflow-mcp@latest”, “/path/to/your/project”, “–AutoStartDashboard”]    }
  }
}

作業開始(要件定義、設計)

では、VisualStudioで作ったWebサイトのテンプレートをベースに以下の依頼をしてみましょう。ちなみに既に私はいくつかのMCPを設定・利用してますが、今回は他のMCPはOFF・無効にしています。
「ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。spec-workflowを使って要件から実装タスクまで段階的に作成してください。」
すると以下のようにまずは要件定義から進めてくれます(ちょっとスクリーンショットの文字が小さいかもしれませんが、ブラウザの拡大機能等で見ていただければと思います)。


一通り完了すると以下のように要件定義の承認を要求されます。


プロジェクト内に「.spec-workflow」というフォルダが作られ、そこに要件定義用のファイル「requirements.md」が作られていることがわかります。


ではここで、以下のコマンドでダッシュボードを開きます。

npx -y @pimzino/spec-workflow-mcp@latest /path/to/your/project –dashboard

しつこいようですが、「/path/to/your/project」には対象としたいプロジェクトのパスを設定してください。
以下のようにブラウザでダッシュボードが立ち上がります。


ちょっと見づらいかもですが、画面上部のタブで「Approvals」をクリックすると先ほどの要件定義の内容を確認、更に承認を行うことができます。


このMarkdownファイルに対してダッシュボード上でコメントも記載出来、更にそれに従ってAIがその先の作業を進めてくれます。


要件定義作業で出力されたrequirements.mdの内容を改めて載せておきます。


以下のように非機能要件も記載されています。


では、次に設計へと進みます。


Design Documentとして設計書が作成されます。


これも先ほどと同様に承認を行います。
Cursorから直接承認できるのかもしれないのですが、ちょっと現時点ではやり方がわからず、止む無く都度ダッシュボードに切り替えて承認を行っています。

実装へ

設計の承認が終われば実装へと進んでいきます。

画像
実装は特に都度承認を求めることなく次々と作業が進められていきます。
もしかすると指示の仕方によっては都度承認を要求してくれるのかもしれないのですが、今回はこちらの承認を待つことなく、どんどん実装が進められていきました。


いまとなっては当たり前になってきましたが、ビルドや起動も全部行ってくれます。


実は途中うまく立ち上がらず、エラーの共有なども行いましたが、それでもすぐに修正を行い、以下のようにToDoリストのアプリケーションが立ち上がりました。
検索機能、タスク一覧、未完了・完了の状態による表示切替もあり、設計通りとなります。

まとめ

ということで以上がspec-workflow-mcpによる仕様駆動開発の簡単な一例となります。
まだこのツール1つしか試していないため比較はできないものの、確かに仕様駆動開発で求められる資料を作成してくれ、それに基づききちんと実装してくれました。
ダッシュボードで詳細に状況を確認し、進捗を管理できるのは非常に良いと思います。

ただ、一方でCursorとブラウザの行き来が必要となっていたのでそこが気になる点ではありました。とはいえ、個人的には許容範囲というか、ほんの少し手間を感じる程度で問題はありませんでした。

要件定義、設計フェーズにおけるドキュメントの内容も上に挙げたような簡単な指示だったにもかかわらず細かく記載されていました。

今回は簡単な実装内容だったのですが、もっと大規模なものになった場合、要件定義、設計におけるAIとのやり取りも多くなりますし、仕様書自体もその分ボリュームが大きくなると思いますので、そうなった場合に最終的な成果物としてのソースコードがうまく作られるか、そしてそれによって動くシステム、アプリケーションが求めていた内容通りに動作するかが興味深いところです。

最初に挙げた他のツール、そしてKiroも近々使えると思いますのでまずはこのspec-workflow-mcpを私の中の基準として比較してみたいと思います。

当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。

nextscape.net

(以下当社お問合せフォーム)

Microsoft Forms




Source link

関連記事

コメント

この記事へのコメントはありません。