Taste of Tech Topics

Acroquest Technology株式会社のエンジニアが書く技術ブログ

Cline × Amazon Bedrock でCRUDアプリのフルスタック開発をやってみた

はじめに

こんにちは一史です。
先日神代植物公園に行きました、まだ藤の花が残っておりとても綺麗で癒されました。

昨今、開発支援のAIエージェントとしてClineが話題になっています。
github.com

ClineはVisual Studio Code(VSCode)の拡張機能であり、単なるコード生成だけでなく、コマンド実行や動作確認・デバッグまでを一貫して行ってくれる点が特徴です。

Clineは任意の生成AIモデルを指定し、コードを生成させることができます。
このためセキュアで実際の開発現場でも活用されるAmazon Bedrockと組み合わせることでビジネスシーンでの活用も可能となります。
今回、LLMとしてBedrockを利用して、CRUD処理を行うアプリを開発できるか、TODOアプリ作成を題材に試していきます。

概要

Clineとは?

Clineは、VSCode拡張機能として提供されているAIエージェントであり、簡単な指示からアプリ全体のコードを作成してくれます。

また、特徴として以下があります。

  1. コマンド実行まで行ってくれる。(例:ファイル・ディレクトリの作成・削除、ライブラリのインストール、作成したアプリの起動など)
  2. 動作確認・デバッグまで自動で行ってくれる。
  3. Clineサーバーにデータが送られない。(任意の生成AIモデルのAPIを設定し、それを使って生成を行うため)

Amazon Bedrockを使うメリット

前述の通りClineは様々な生成AIモデルと連携できますが、今回はAmazon Bedrockを使用します。
Bedrockを使うメリットは以下です。

  1. 入力データがモデルの学習に利用されないため、セキュリティ的に安心である
  2. 複数のモデルを設定だけで切り替えて利用可能

これらの理由によりClineのビジネス上の利用において、Amazon Bedrockは有力な選択肢となります。
それでは、実際にCline×Bedrockで、WebアプリのCRUD機能を開発してみます。

TODOアプリの概要

今回作成するTODOアプリの完成像は以下です。

このTODOアプリは、タイトル、期限、説明と共にタスクを登録できます。
そして、実施済みかどうかのステータスを保持し、削除機能も持ちます。
ではこのTODOアプリ作成の準備を行います。

開発のための事前準備

IAMユーザーの作成

ClineがBedrockを使う際に用いるIAMユーザーを以下権限で作成しました。
実際はより権限を絞るべきですが、今回は簡易的にBedrockのフルアクセスを付けました。
またClineではセッショントークンが必要なのでその取得権限をつけています。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowBedrockAll",
      "Effect": "Allow",
      "Action": "bedrock:*",
      "Resource": "*"
    },
    {
      "Sid": "AllowStsGetSessionToken",
      "Effect": "Allow",
      "Action": "sts:GetSessionToken",
      "Resource": "*"
    }
  ]
}

Clineの設定

Bedrockを使うためのClineの設定を行います。
設定画面にて、前節で作成したIAMユーザーのアクセスキー、シークレットキー、セッショントークンを指定しています。

また、今回のモデルはClaude 3.7 Sonnetを使います。
よりコストの低いClaude 3.5 Haikuでアプリを作成してみた際は、精度が安定せず「Task Completed」の表示なのにDockerファイルがあるべきフォルダの中に、1つもファイルが作られないなどありました。
一応デバッグ段階で直してはくれますが、何度もトライアンドエラーしながら修正するので、時間も不要なコストもかかりました。
単純なスクリプトではなくCRUDアプリ全体のようなある程度の複雑性を持つシステムを作らせる場合、Claude 3.7 Sonnetを最初から使ったほうが、精度が安定する印象でした。

Linuxコマンド実行環境の作成

Clineの大きな特徴の1つにコマンド実行までしてくれる点があります。
しかし、基本的にはClineはLinuxコマンドを打とうとします。

一方、今回はWindows環境で検証を行っており、VSCodeのデフォルトのターミナルはPowershellです。
そのため、ClineがLinuxコマンドを実行しようとしてしまい、軒並みエラーになってしまいます。

そこで、WindowsでもLinuxコマンドを実行できるよう、以下のように設定します。

  1. Git Bash をインストールする。
  2. Git BashVSCodeのデフォルトのターミナルに設定する。


TODOアプリを開発する

プロンプト

今回Clineに渡したタスクのプロンプトは以下です。

TODOアプリを作ってください。
# 要件
- タスクを、チェックボックスつきのアイテムとして追加削除できるようにする。
- 完了したタスクはチェックボックスにチェックをつけることで、薄い文字になるかつ取り消し線が引かれるようにする。
- 各タスクは期日を入力できるようにする。(必須入力にしない)

# 制約条件
- PostgreSQL を使った CRUD 処理にしてください。
- DBをDockerで立ててください。
- バックエンド、フロントエンドはDockerは使わず実行環境で直に起動してください。
- 完成したらアプリの起動まで行ってください。
- 画面はモダンにおしゃれにしてください。

またClineの設定画面からCustom Instructionsを以下の通り設定しました。
Custom Instructionsは共通ルールなどを記述する部分であり、AIへの毎リクエスト時に末尾に追加されるプロンプトになります。

# 実行環境情報
- 実行環境はWindowsです。
- Docker環境はRancher Desktopで提供されています。

# 実装ルール
## 共通
- 日本語でコードブロックごとにコメントをつけてください。
- 適切なフォルダ構成で作成してください。

## バックエンド
- Googleスタイルでdocstringを書いてください。
- Pythonで実装してください。
- pyenv, Poetryを使って仮想環境を作成してください。pyenv, Poetryは既に環境にインストール済みです。

## フロントエンド
- Reactで実装してください。
- npmを使ってパッケージ管理を行ってください。

Custom Instructionsでは、pyenvPoetry などの環境構築のためのツールは事前にインストール済みのものを利用するよう指示しています。
この指定がないとClineはこれらツールのインストールから行おうとしますが、トライアンドエラーが多く時間とコストが余計にかかりました。
開発環境の準備は人間がやったほうが早かったです。

Clineを用いた開発結果

前節のプロンプトをもとにClineに指示すると

  1. フォルダ構成の作成
  2. 必要なライブラリのインストール
  3. DBスキーマ設計
  4. Dockerを使ったDBの構築
  5. フロントエンド、バックエンドの実装と起動
  6. 動作確認・デバッグ

を一通り自動で行ってくれました。

最終的な成果物は以下です。

今回は簡易的なプロンプトであまり詳細を指定せずに作成させましたが、

  1. フロントエンドはMaterial-UIを使用している
  2. バックエンドはFastAPIの使用やモデルクラスを作成している
  3. DBスキーマに作成日時・更新日時のカラムがある

など人間が作る際と同水準で開発してくれました。

また、開発規模は 0.5KL、かかったコストは 5.2ドル 程度でした。

人間が実装から動作確認まで行う人件費に比べればかなり安く済ませられました。

アプリを使ってみる

それでは実際にアプリを使ってみます。
以下はタスクを追加し、うち1つは完了状態にしたものです。

実際にDBにアクセスしてみると、この結果がリアルタイムに反映されていました。

また完了したタスクを画面から削除したところDB上でも物理削除が行われました。


まとめ

Cline×Amazon Bedrockを使用してセキュアな生成AIモデルで、CRUDアプリの画面からDBまでの実装・動作確認が行えました。

また所感としては、
1. 開発環境の準備は人間が事前に行った方が効率的
2. CRUDアプリのような複雑性があるものを安定した精度で作るには、Claude 3.7 Sonnetの利用が必要
ということが分かりました。

Amazon Bedrockを使うことによりビジネス場面でClineが使いやすくなるため、是非 積極的に活用していきたいと思います。


Acroquest Technologyでは、キャリア採用を行っています。

  • Azure OpenAI/Amazon Bedrock等を使った生成AIソリューションの開発
  • ディープラーニング等を使った自然言語/画像/音声/動画解析の研究開発
  • マイクロサービス、DevOps、最新のOSSクラウドサービスを利用する開発プロジェクト
  • 書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長

 

少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。

www.wantedly.com