0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AIアシスト・AIエージェントAdvent Calendar 2024

Day 19

Clineを使って簡単なWebアプリを作る(Spring Boot3)- その2

Last updated at Posted at 2024-12-19

最初に「書籍管理システム」のたたき台を作った後、日々Cline(AIエージェント)を使って、機能追加していました。
たくさん使ってみて、わかったことを箇条書きにします。
引き続き、簡単なWebアプリに機能を追加していって、徐々にアプリの規模を大きくしていきます。

前提条件

  • プロンプトのみでアプリを作成する(コードには一切ふれない)

Clineで出来ること

  • 指示内容(プロンプト)に応じて、自律的に影響のあるファイルを抽出し、順番に修正できる
  • Clineが誤った作業を行っていたら、その作業を「承認」や「保存」せず、追加でプロンプトを入力して、作業内容を補正して継続できる
  • 出来上がったものが期待どおりではなかったら、「元に戻して」と指示することで、元に戻してくれる
  • 参考とする機能や画面を指定して、新しい画面を作ることができる
    • 参考となるものを指定しなくても、ある程度似たような画面を作ることがあるが、既存の機能や画面を解析させた後に新しい画面を作らせた方が、精度が高くなる
  • 複数の画面で、レイアウトや機能に微妙な差異がある場合、指摘することで画面や機能の統一化ができる
  • エラーログやエラー画面を貼り付けるだけで、影響のありそうなファイルを抽出し、順番にチェックして修正できる
  • Gitでブランチを切り替えたり、ステージングしたり、コミットできる
  • GitでPullRequestを作成できる
  • Gitでマージできる
  • テストクラスを作成して、テスト(JUnit)を実行できる

Clineが苦手なこと

  • 発生したエラーの回避策として、アプリの安全性を下げるような処置をしようとした
    • もちろん、その提案は却下
  • 共通部品のレイアウト(cssファイル)を修正させると、他の画面が動作しなくなるということが多発した
    • 画面レイアウトの修正を指示する時に「他の画面レイアウト(例:ダッシュボード画面)に影響がないように」という文言を追加して、影響範囲を広げることで、レイアウト崩れを防いだ
  • Gitの操作で何度かエラーが発生した
    • おそらく、ローカルPCがWindows環境のため、Clineが実行しようとしたスクリプト(シェル)がLinux環境用で、Syntaxエラーになったのでは?
  • ブラウザを起動して動作確認もできるようだが、待ち時間が長いだけでなく、正常に動作しないことがあった
    • ブラウザでの動作確認は手作業の方が遥かに効率的だったので、Clineには動作確認させなかった
  • プロジェクトの新規作成を指示してみたら中途半端なものが出来上がった
    • 仕上げるのに時間がかかりそうだったので、これはやめて、他のツール(拡張機能のSpring Initializr)でプロジェクトを新規作成した

今後Clineで試してみたいこと

  • リファクタリング(ファイル分割、共通部品の切り出しなど)
  • 画面(HTML)のライブラリの変更
    • jQuery → React, Vueなど
  • コードレビュー
    • 脆弱性チェック
    • コード品質チェック
  • アプリの大規模化(大規模アプリでもCline使える?の検証)

作ったアプリの画面キャプチャ

ログイン画面

image.png

ダッシュボード画面

image.png

書籍検索画面

image.png

書籍詳細画面

image.png

貸出履歴画面

image.png

お気に入り画面

image.png

ユーザー管理画面

image.png

プロフィール画面

image.png

ソースコード(GitHub)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?