📚

KiroとCursorを活用した仕様駆動開発

に公開

はじめに

ここのところはAIエディタ、IDEを活用したVibe Coding(バイブ・コーディング)ばかりやってます。仕様駆動開発と言うコンセプトの元、少し前から話題になっていた、AWSのKiroも登場した当初から色々試行錯誤して来ました。

https://aws.amazon.com/jp/blogs/news/introducing-kiro/

今回の記事ではその中で開発したアプリの開発経緯や発生した問題・課題など紹介したいと思います(これは人が書いてます、AIではありません)。

作成したアプリの概要

ひとまず、以下のアプリを作成してみました。
色彩学習アプリは実際に公開してますので、見て頂くことが出来ます。

  • インタラクティブダッシュボード

    React19 の最新機能を活用したインタラクティブダッシュボードアプリケーション。Server Components、use() Hook、Actions、Suspense などの新機能を中心に、高性能でユーザビリティの高いダッシュボード体験を提供する。

  • ショッピングカート

    ユーザー認証、商品管理、ショッピングカート機能、購入履歴、プロフィール設定を備えた包括的な E コマースアプリケーション。Shadcn/ui スタイルのモダンで一貫性のある UI を提供し、React/Next.js で構築される。

  • 色彩学習アプリ、colorism

    colorism と言うアプリ。色を通じてユーザーに豊かな体験を提供するインタラクティブな Web アプリケーション。ユーザーが選択した色に基づいて、視覚的コンテンツ、情報、体験が動的に変化し、色彩心理学や文化的意味、アート作品など、その色にまつわる多様なコンテンツを提供する。

進め方

  • Kiroとやり取りしながら、要件定義書、設計書、実装計画書を作成
  • その後はKiroで開発して仕上げる想定で推進、全てKiroで完結させる計画

途中の紆余曲折

いやー一筋縄では行かなかったですねー。以下紆余曲折です。

  • 最初に生成される、要件定義書、設計書、実装計画書は、結構、粒度が粗い。指定の仕方次第でしょうけど。開発進めていく過程で、詳細を詰めたり、問題が発生し対策を講じ、その都度、各ドキュメントをエンハンス。
  • Kiroの開発が異様に遅い。そして1日の上限に達してしまう。
  • アプリ全体のUIやロジックの整合性・一貫性が中々担保できない。これは要件定義や設計書で定義しても中々思い通りにならないポイント。
    何度も全体の一貫性を確保するよう途中で見直すものの、独自実装を始めだす。Kiroのステアリングルールを定義しても、中々意図通りにならない。
  • 8月半ばに発生した課金体系が、SpecsとVibeの消費で計算される仕組みだったのだが、消費が異常に速く、これでは開発を進めるのは無理と判断し、途中でCursorに引き継ぐ
  • 意外と、CursorでKiro作成の要件定義書、設計書、実装計画書を読み込ませると理解をし、開発を進めれた。が、UIやロジックの一貫性はやはり難あり。Cursorルールを定義しても多少マシにはなるものの・・・と言う感じ
  • その後、Kiroの課金体系の不満が多かったのか、8月中は継続無料となったので、再びKiroで再開してみる。ものの、やはりVibeとSpecsの消費は大きい。開発にならない。
  • と言う事で最後はCursorで仕上げる。
    開発後、振り返りとして要件定義書、設計書、実装計画書をリバイス。その他、知見・ノウハウドキュメント
  • 最終的にはVercelにデプロイ、アプリ公開をしましたが、ローカルの開発環境ではとてもパフォーマンスが悪かったのが、デプロイしたアプリはサクサク動く感じです。開発モードなのもあるでしょうが、Vercelはやはりパフォーマンス面の最適化はしっかりしてると言う印象です。

所感

総じて、アプリ全体のロジック、UIの一貫性を如何に確保するかが課題です。そう言う意味では開発前にスペック・仕様を固めて開発を進めるのは、正しいアプローチだと思います。が中々、Vibeコーディングにある程度委ねようとしている中で、先に仕様を詳細まで固めるのは難しく、進めながらブラッシュアップしていく過程は発生します。それはコードそのものはもとより、仕様書や設計書、他、知見ドキュメントなどを随時アップデートしていくイメージになります。

そこで、Kiroのステアリングルールや、Cursorのルールをアップデートしていくのですが、どんどん中身が増加、複雑化していくので、適宜、集約と最適化が必要です。
そして、ルールを定めてても言う事聞かない時も多々あります・・・

Vibeコーディングを始め、AIによるコーディングで開発効率が上がったと言う話がある一方で、人によるレビューの時間も大きく上がったと言う話もよく聞きます。よく分かる気がします。一貫性や品質を確保するうえでAIに任せきりは難しい印象です。しっかり人の目でのチェックがまだまだ必要ですね。

GitHubなどからも、仕様駆動開発のフレームワークなども公開され、仕様を固めて開発する、これに伴うコンテキスト・エンジニアリングがよく重要になっていく傾向ですが、AIが生成する成果物をいかに均質化し一貫性を担保するかが大きな課題だと感じます。

https://github.com/github/spec-kit

開発ドキュメント

色彩学習アプリ、colorismについて、GitHubにリポジトリ公開しています。
https://github.com/amaya690221/pub-colorism-app-Kiro-Cursor

開発に当たって作成したドキュメント一覧はこちらから参照頂けます。
https://github.com/amaya690221/pub-colorism-app-Kiro-Cursor/blob/main/docs/README.md
これらは、Kiro並びにCursorに棚卸・作成してもらいました。

また開発したアプリはこちらです。

https://color.app.bau-haus.com/

Discussion