バイブコーディング開発検証譚【設計編】

バイブコーディング開発検証譚【設計編】

はじめに

AIによるバイブコーディングがより簡易化し、誰でも使用できる状況になってきました。
バイブコーディングを実際に試して簡易的なアプリを作成しながら検証してみようと思います。

今回は全体を通して 「タスク管理アプリ」を作成してみます。

序章は、バイブコーディング時の壁打ちの必要性について設計書(要件定義書)を出力し比較していきます。

実施環境

  • VisualStudioCode
  • Claude Proプラン(モデル:Claude Sonnet 4.6を使用)
  • GitHub Copilot Bussiness

こちらが想定するアプリの仕様

  • データベースレスで作成
  • デスクトップアプリケーション(Windows11対応)
  • バックエンドはC#を使用
  • タスク一覧画面、タスク入力/編集画面の2画面構成
  • ログイン/認証機能は含まない

これらを最低限の仕様(CLAUDE.local.md)とし、壁打ちを行った場合と行わない場合でどのような違いがでてくるか検証していきます。

今回は要件資料および設計書(簡易なもの)を出力するところまで比較します。アプリケーションの実装は次回を予定しています。

事前準備

①最低限の仕様を入力したテキストファイルを配置します。

②プロンプトの紹介

壁打ちを行わないアプリ(命名:IttanCotton

プロンプト:

タスク管理アプリを作成します。実装に入る前に詳細設計書(docs/design.md)を作成してください。

壁打ちを行うアプリ(命名:NuriWall

プロンプト:

要件を固めるために私と壁打ちを開始してください。あなたはシニアエンジニア兼アーキテクトとして振る舞ってください。壁打ちの結果はdocs/requirements.mdに出力してください。

壁打ち実施後、

docs/requirements.mdの内容を設計書(docs/design.md)にブラッシュアップして出力し、設計書を完成させてください。

実行結果

■ 壁打ちをしないIttanCottonの出力結果(design.md)


■ 壁打ちを行ったNuriWallの出力結果(design.md)

→壁打ちの際、明確に5W1H(Who、When、Where、What、Why、How)に沿った質問とやり取りが発生し、こちらで検討しなければならない判断も、いくつかの選択肢を提示してサポートを行ってくれる面が見れました。
(設計書長いため必要に応じてスキップしてご確認ください)


結果の評価

出力結果を見てみると、壁打ちした方が情報量が多いことが明らかですが、具体的にどの点が優れているか、劣っているか今のままでは少しわかりづらいので、設計書の評価をしてみようと思います。

AIを使用して評価してみます。

Claudeとのチャットへ、設計書を渡したうえで以下の参考サイトを基準としてに評価(スコア)を出力しました。

■ 壁打ちをしないIttanCottonの評価
■ 壁打ちを行ったNuriWallの評価

設計書出力結果の考察・所感

NuriWallは壁打ちをしているだけあって、使用者向けの背景をとらえている分、目的や非機能要件については、詰められていることがスコアから見て取れました。

IttanCottonは壁打ちしていないので、背景や非機能要件については不十分な点が見えますが、アーキテクチャ~画面設計については壁打ちしているものと大きく乖離はないように思えます。

どちらについても、作成したアプリは個人利用の範囲を検討しているため、セキュリティ面について深く考慮できていませんが、今回はこのまま、本設計書をベースに実装を進めてみたいと考えています。