Zenn
🤝

Devin & Amplify Gen2でどこまでつくれるか？を試してみた

に公開
AWS
React
Amplify
Vite
Devin
tech

きっかけ

Zenn初投稿です🙌
AWSを使ってサービス開発をしているTakumi@TAKUMINASUNです。
ここ1年間で、生成AIを活用した開発が随分進み、定着しつつあります。VSCode Copilotでリファクタリングをしたり、bolt.aiでUIのプロトタイプをつくることも、日常的に行うようになってきました。
Devin2.0がリリースされてから、Devinさん（最近メンバーの一員のように”さん”づけ）にお願いする頻度も増えてきました。
また、フロントとバックエンドを統合的に開発するために、Amplify Gen2もなくてはならないです。

・・・そこで思いました。

「Devin & Amplify Gen2」でフロントもバックエンドもおまかせできるんではないか？🤔

Amplify Gen2はGitHubと連携させて使用しますが、フロントもバックエンドも１つのリポジトリで管理できる点がとても便利です。１つのリポジトリにあるということは、
Devinさんにこのリポジトリを接続し、適切な指示（お願い）をすれば、フロントもバックエンドも両方つくってくれるのではないか？
と。
世の中には上記のことに気づいている方もたくさんいらっしゃるかもしれません。
初心者向けのTips集のようなものがあればと思い、投稿します。
※ 以下、Amplify Gen2はAmplifyと記述します
※ Devin、GitHub、AWSを利用している前提で記述します

今回のねらい

その一. AIに指示するだけでフロント・バックエンド両方つくれるかを試す

その二. どのようにお願いすると期待に応えてくれるか知見をためる

です。今回は「DevinさんとAmplifyのタッグがどこまでやれるか」を体験してみたいと思います。

できたもの

まずは結論から。以下のようなものができました。
テキストを入力し、送信すると、AI（Claudeさん）がひとこと返してくれる、というシンプルなWebアプリです。
シンプルですが、一通りWebからバックエンド、AWS内での簡単なサービス連携も行っています。
https://youtu.be/fXMwQvd1pPg
こんなの自分で書いた方が早いよ！というのは確かにそうかもしれません。が・・・

やってみたこと

全体像は以下のとおりです。

[工程①DevinとGitHubをつなぎ、AmplifyとGitHubをつなぐ]
Devinさんにお願いしたことはプルリクとしてGitHubにあがり、GitHubでmergeされるとAmplifyで自動的にデプロイがはじまります。

[工程②AmplifyでWebUI、バックエンド等を作成する]
Amplifyは必要なリソースを自動で作成します。今回はローカルのVSCodeでAmplifyのサンドボックスを実行します。

[工程①]

  • DevinのSetting > Devin's Workspaceの項目にて、+Add repositoryを行い、ご自身のテスト用リポジトリを追加します。
  • リポジトリにはnpm run devでVite+Reactの初期画面が立ち上がる＆amplify Gen2実行できる（amplifyフォルダがある状態）ファイルを置いておきます。※ローカルのVSCode等で作成しておきます
  • AWSマネジメントコンソールにアクセスし、Amplify Gen2を開きます。新しいアプリを作成ボタンを押し、ソースコードプロバイダを選択します。ここではGitHubとご自身のテスト用リポジトリを開きます。その後は、Ampifyの指示どおりに進めてください。デプロイが完成したら次の工程②に移ります。

[工程②]

  • Devinとのセッション（会話画面）を開きます。工程①で追加したテスト用リポジトリを対象に、会話を進めていきます。
  • この時点では、「まだ何もない」状態なので、resource.ts、backend.ts、index.py、requirements.txt等の必要なファイルを作成してもらいます。Devinさんに、これらのファイル名と作成してほしい内容を指示します。
  • Amplify Gen2のドキュメントを参照して、と指示するとこのページを見て適切なコードを生成してくれました。今回は、Lambda(Python)、API Gatewayをとりあえず作ってもらいます。
    [今回Devinさんにお願いした内容]
    1. 画面に、テキスト入力欄を作ってください。その横にボタンを設けます。
    2. ボタンを押すとgetメソッドで入力されたテキストをエンドポイントに送ってください。
    3. API Gatewayへのリクエストは作成したLambdaに送ってください。
    4. Lambdaでは、受け取ったテキストをprintし、returnのmessageに格納してください。
    5. Lambdaからのreturn値のmessageを、テキストボックスの下に表示してください。
    6. CORSを有効にしてください。
    7. エンドポイントは直接記述せず、.envファイルの環境変数を使用してください。
  • Devinさんの作業が終わるとGitHub（先ほど指定したご自身のテスト用リポジトリ）にプルリクがあがります。中身を確認してmergeしましょう。
  • mergeが終わるとAmplifyのデプロイが自動的に始まります。以下のようにデプロイが完了したら、ローカルのVSCodeでサンドボックスを立ち上げます。（npx ampx sandbox）
  • Amplifyのコンソール上の、デプロイされたURLにアクセスボタンを押し、作成したUIを開きます。おそらく、この時点で適当なテキスト入力欄とボタンが表示されていると思います。
  • うまくいかない場合は、ブラウザ上でのエラーやVSCode上のエラーをDevinさんとのセッションに貼り付け、修正をお願いすると直してくれる（はず）です
  • デプロイされたUIにテキストを入力し、入力した値が表示されるようになったら、次のつくり込みです。
    [追加でDevinさんにお願いした内容]
    1. Lambdaで受け取ったtextをBedrockに送り、生成AIからのレスポンスをreturn値のmessageに格納してください。
    2. BedrockはClaude3.5sonnetを使ってください。
    3. 短いチャット形式の会話をしている想定で、20〜30文字程度で会話がつながるようにレスポンスをするよう、Bedrockへのプロンプトを作成し、プロンプト＋textを送ってください。
    4. Maxトークンは5000（任意の数字、5000である必要はありません）としてください。
  • さあ…どこまでやってくれるか？Devinさんが実際にあげてきたプルリクが以下の画像です。

    なかなかいい感じです！コードの仔細まで指示せずとも、普段商用で使っているコードと遜色ないコードを出力してくれました。
  • コードを確認し問題なければmergeします。Amplifyで自動的にデプロイがはじまります。
  • その後は、「文字が白背景に白字で見づらい」「左寄せにして」「Vite+Reactのデフォルトのアイコンは不要です」等の細かい修正をやってもらいました。

まとめ

冒頭のねらいについて、振り返ってみたいと思います。

ねらい"その一"について

  • "結論"としては、AI（今回はDevinさん）にお願いするだけで、簡単なWebアプリをつくれるという結果になりました。今回は、Devinさんへのお願いの仕方も試しながらだったため「19回のプルリクエスト」で一定の完成に至りましたが、次回からはもっと早く一定の完成に至れると感じます。
  • Vite+Reactの初期画面が立ち上がる程度の状態（＝ほぼゼロ状態）から、フロントもバックエンドも自律的にコードを生成することができるということが試せました。同じリポジトリにフロント・バックエンドのコードがあればCursorでも同じようなことができるかもしれませんが、「おまかせ」できる点は高評価です。
  • Amplify Gen2のおかげで、フロントもバックエンドも同時にAIが修正を加え、デプロイまで自動的に行うことができました。

ねらい"その二"について

  • 具体的なファイル名（例 ◯◯.tsを更新して）と作業内容を指示すれば、高い精度でコーディングを行ってくれました。これはAIを使うときにはもはやスタンダートなことかもしれません。CORS等の設定は、より具体的に指示した方が意図した回答に早く辿りつきました。
  • 参考となるドキュメントのURLを渡すことで、該当する情報を自ら検索してコーディングに反映してくれているようです。Devinさんのコンソールでは、本記事にも掲載したAWS公式ドキュメントを参照し、そこからサンプルコードを抽出し、実態に合わせてくれている様子が伺えました。
  • 大枠のUIのデザインは伝えておき、バックエンドがうまく動くようになってから、後々、色やフォント・配置等について細々指示する方がうまく仕上がりそうです。今回とは別のプロジェクトですが、パワーポイントで作成した画像を貼り付け「これにして！（左メニュー・右コンテンツ・ヘッダー）」と指示すると、しっかりコンポーネントを分けてくれていました。
  • Devinさんは公式側も「ジュニアエンジニア」と思って的確な指示を、とアナウンスしていますが、随分優秀なジュニアです。曖昧な指示や無理難題は避け、実装したいゴールとそこに至るまでの実装案をなるべく１つ１つ因数分解しながら指示をしていくことで、開発の大きなサポートになると感じました。

生成AI、AIエージェントは日々進歩しています！
今回ご紹介したDevin&Amplifyは「全くのゼロ知識（GitHub知らない、VSCode使ったことない）」で使うのは少し難しいかもしれません。AIエージェントやAmplifyのような統合的に開発ができるスグレモノを活用することで、より楽しい開発体験ができそうだ！と感じました💪

Discussion