アプリをAIに読み込ませて仕様を抽出して、AIに読み込ませてクローンしてみる実験

内容

• アプリケーションのプログラムベースでAIに読み込ませ、仕様書を抽出する
• その仕様書をAIに読み込ませ、仕様に沿ったアプリが作れるかを実験する

この施策ができれば以下の事が出来るようになると思います。

• AIエージェントを使って開発する際は、必ず良い出力ができるとは限りませんが、良い出力が出た時の内容を仕様出力しておけば、簡易セーブができます。
• 純粋なコピーではなく、既存のプログラムに対して、AIを使用してフレームワークやライブラリのみ変えて実装するなど、仕様に基づいたコピーができます。

また、openaiのcodeexを使用して仕様書およびアプリケーションの作成を行っています。

やってみた

簡単すぎるアプリだとすぐにクローン出来てしまうと思ったので、
まず、タスク管理アプリを作成しました。

元となるアプリの作成

ログイン画面

タスク一覧画面

タスク追加画面

子タスクの追加

タスクを完了に変更

仕様を抽出

以下の内容でAIに抽出してもらう

このwebアプリケーションのの仕様をまとめてください。
目標は、AIに作成した仕様書を渡して、
・おおまかなデザインが一致
・機能は完全一致
する事です。
以上を踏まえて、spec.mdファイルを作成してください。

以下が出力された。（そのまま読み込ませる為、特に修正は行わない）

# タスク管理Webアプリ 仕様書

## 概要
- Spring Boot/Thymeleafで構成された個人用タスク管理アプリ。ユーザー毎にタスクをカンバン表示し、詳細編集・子タスク・関連タスク・コメントを扱う。
- UIはBootstrap 5のライトテーマ。ナビバー＋カード主体、余白大きめの読みやすいレイアウト。
- 目的は「デザインの大枠一致」「機能の完全一致」を満たす指示をAIに渡すための仕様共有。

## 技術スタック
- Spring Boot 3、Spring MVC/Thymeleaf、Spring Security (form login)、Spring Data JPA。
- DB: H2インメモリ `jdbc:h2:mem:tasksdb`、`ddl-auto=update`。
- CSS/JS: Bootstrap 5.3 CDN。
- CSRF有効 (H2 consoleのみ無効)。パスワードはBCryptで保存。

## ユーザー・権限
- ログイン済み一般ユーザーのみ。全データはログインユーザーに紐づき、他ユーザーのデータは参照不可。
- 権限ロールは`ROLE_USER`固定。未ログイン時は`/login`へ誘導。

## 認証フロー
- サインアップ `/signup`: ユーザー名・パスワード・確認用入力。空/未一致はバリデーションエラー。既存ユーザー名は登録不可。登録成功後は自動ログインして`/tasks`へ。
- ログイン `/login`: ユーザー名・パスワードを入力。誤りでエラーバナー表示。成功で`/tasks`へ。
- ログアウト `/logout`: POSTで実行、`/login?logout`へ遷移。
- H2 console `/h2-console` はCSRF対象外・X-Frame許可。

## ドメインモデル
- User: `id`, `username`(一意), `password`(BCrypt), `createdAt`。
- Task: `id`, `user`, `parentTask`(nullで最上位), `children`、`title`必須、`detail`任意(～2000文字)、`status`(NOT_STARTED/IN_PROGRESS/DONE)、`priority`(LOW/MEDIUM/HIGH)、`dueDate`必須、`endDate`任意、`createdAt`/`updatedAt`自動、`archived`(既定false)。
- TaskRelation: `task`, `relatedTask` の関連ペア。保存時は双方向エッジを2件作成。
- Comment: `task`, `content`必須(～1000文字), `createdAt`自動。
- Enumラベル: status=「未着手」「着手中」「完了」、priority=「低」「中」「高」。

## 画面・機能
### 共通
- 上部ナビバー: 左にブランド「タスク管理」、右に「新規タスク追加」(一覧時)または「一覧へ戻る」(フォーム系)＋ログアウトボタン。背景白・シャドウあり。

### カンバン一覧 `/tasks`
- ステータスごと(未着手/着手中/完了)に3カラム。列ヘッダに件数バッジ。
- 各タスクカード: タイトル、優先度バッジ、期日を表示。クリックで詳細へ。期日昇順で並べ替え済み。
- 空列は「タスクはありません」とメッセージ。

### タスク作成 `/tasks/new`
- フォーム項目: タイトル必須、詳細任意、ステータス選択(既定:未着手)、優先度選択(既定:中)、期日必須、終了日任意、関連タスク複数選択(自ユーザーの未アーカイブタスクのみ)。
- 保存でタスク作成→関連タスク双方向リンク作成→作成タスク詳細へリダイレクト。バリデーションエラー時は再描画。
- 「一覧へ戻る」「キャンセル」で`/tasks`に戻る。

### タスク詳細/編集 `/tasks/{id}`
- 同項目を編集可。`archived`チェックでアーカイブ切替(既定オフ)。作成日時を読み取り専用表示。
- 関連タスク: 複数選択、選択中のIDで双方向リンクを再生成(既存リンクは一度全削除)。自タスク自身やアーカイブ済は対象外。選択中の関連タスク名をピル表示。
- 保存で更新後、同ページにリダイレクト。該当IDが自ユーザーに無い/存在しない場合は`/tasks`へ戻す。

### 子タスク
- 詳細ページ内の「＋子タスク追加」トグル配下で作成。入力: タイトル必須、詳細任意、ステータス/優先度/期日必須、終了日任意。保存で親に紐づく子タスクを作成(デフォルト非アーカイブ)。
- 親詳細画面に子タスクリストを表示(アーカイブ済みは非表示)。タイトル/期日/ステータスと「開く」リンク付き。

### コメント
- 詳細ページ右側カード。テキストエリア必須入力でコメント追加。CSRFトークン付きフォーム。
- コメントは作成日時昇順で表示。空の場合メッセージ表示。

### アーカイブと一覧の関係
- アーカイブ済みタスクはカンバン/選択肢/子タスクリストに表示しない。関連タスク更新時もアーカイブ済みは無視。

## 入力バリデーション・挙動
- `@NotBlank`: タイトル、コメント内容、サインアップの各入力。
- `@NotNull`: ステータス、優先度、期日。
- パスワード確認: 一致しない場合エラー表示。
- 期日・終了日は`yyyy-MM-dd`フォーム入力。完了日未入力可。
- いずれも同期バリデーションで、エラー時は同画面にメッセージ表示。

## ルーティング一覧
- GET `/login` ログイン画面
- POST `/login` 認証
- GET `/signup` 新規登録画面
- POST `/signup` 登録＆自動ログイン
- GET `/tasks` カンバン一覧
- GET `/tasks/new` タスク作成フォーム
- POST `/tasks` タスク作成
- GET `/tasks/{id}` タスク詳細/編集
- POST `/tasks/{id}` タスク更新
- POST `/tasks/{id}/subtasks` 子タスク作成
- POST `/tasks/{id}/comments` コメント追加
- POST `/logout` ログアウト

## 非機能・その他
- テンプレートキャッシュ無効で即時反映。SQLログは非表示。
- カード/列のデザイン: 背景ライトグレー(`#f8f9fb`)、カードは左辺6pxのプライマリ色ライン＋シャドウ。
- 日時表示は`yyyy/MM/dd HH:mm`形式。
- サーバーエラー時はメッセージをレスポンスに含める設定(`server.error.include-message=always`)。

出力されたspec.mdを読み込ませて、プログラムをクローンしてみる

トークン節約の為、spring-initializrを仕様して、土台だけ作成
その後、以下のプロンプトを投げる

spec.mdを読み込んで、
アプリケーションを作成してください。

##出力結果
ログイン画面

タスク一覧画面

タスク作成画面

タスクを完了にしてみる

感想

子タスクの扱い（子タスクが一覧に表示されるか）についてはクローンしたときに仕様がずれてしまっていました。
今回の仕様書の出力時は、そこまで内容を詰めなかった為、内容をしっかり詰めればこの仕様の違いも問題なく是正できると思います。

おおまかなデザインに関しては一致。ここも表示内容に関してしっかり内容を詰めれば、その差異も許容できると思います。

今回扱ったタスク管理アプリもまだ規模が小さいプログラムなので、仕様が複雑になるにつれてより細かく仕様を詰めないと綺麗にクローン出来ないと思いました。