はじめに
こちらは エーピーコミュニケーションズ Advent Calendar 2024 の 7 日目の記事となります。
みなさんは生成系AI使ってますか？
巷では生成系AIのブームもいったん落ち着き、次のフェーズとしては性能競争が始まり、数多のAIの棲み分けや淘汰が進んでいく段階に移ってきたように感じています。
この記事では、開発の省力化を目的としてローコードかつ効率的に開発を進める方法を実例に基づいて紹介します。
2024年12月現在、生成系AI頼りで開発を進める場合にはどれくらいの労力で完成させられるかが誰にでも分かれば良いと思いました。
記事の中では極力コードやコマンドの記載を行わない方針とし、小難しい話は抜きにしてノンプログラマーでも気軽に読めるコンテンツとして作成できたらと考えてます。
結論
99%のコードを書くことなく開発は可能、全体的な所要時間はたったの2時間程度
最初に結論から書きましたが、トラブルや問題解決の際に知識があると尚よいですがそれもAIに聞けばOKです。
今回の記事では超簡単なミニゲームを例として作成しましたが、その他簡単なWebサービスなどについても同様の時間で作成可能だと考えて良いです。
実際にこの記事で作成できたミニゲームを公開しますので、試してみてください。
数字記憶ゲーム
今年一杯は公開するものとし、2025年に入り次第状況を見て削除予定。
以降が実際の手順になります。
前提
主にフロントエンド開発、コード実装と2つのフェーズに分けて開発を進めます。
それぞれの部分において、生成系AIを2つ利用します。
最短の手間で進めるためには、事前に要件をある程度イメージして整理しておくことを推奨します。
- 独自ドメインを利用する場合、こちらの例では以下の条件で実施
- AWSにて独自ドメインの払い出し
- AWSにて独自ドメイン用の証明書の作成
- フロントエンドの開発には Anthropic Claude を利用
- アーティファクトにより動作イメージが掴みやすいためフロント生成として選出
- コード実装には Cursor Composer を利用
- Copilot Editsよりもスラスラコードを書いてくれる印象のため選出
要件整理
所要時間30分程度
AIへのプロンプトとしては以下を用意しました。
作りながら修正する形でも問題はないのですが、試行回数を減らすためにあらかじめざっくりとした条件を整理しました。
フロントエンド開発(Claude用)
Reactを用いて以下の条件を満たすWebアプリを作成します。
### 条件
- フロントエンドのみで完結するアプリを作成する
- 簡単なミニゲームを作成
- 使用言語はReactとする
- 単純だけどハマる要素がある
- シンプル且つ高級感のあるレスポンシブデザイン
コード実装(Composer用)
提供されたコードを基にReactアプリをデプロイし、以下の条件を満たす構成で開発を進めます。
### 開発条件
#### フロントエンド
- 提供コードを使用して、`frontend` ディレクトリにReactプロジェクトを作成
- 静的ウェブサイトとしてデプロイするため、デプロイ前に `npm run build` を実行
#### バックエンド
- AWS CDKを使用
- `backend` ディレクトリにCDKプロジェクトを作成
- S3の静的ウェブホスティング機能を利用
- CloudFrontを利用
- Route53で独自ドメインを設定
- ドメイン名: `aws-test-domain.click`（取得済み）
- サブドメインを切り、ホスティング環境を作成
- 数字記憶ゲームに合うサブドメイン命名
---
### ドキュメントの整理
- **セットアップ手順**
- `README.md` に記載
- **基本設計**
- `basic-design.md` に記載
---
### ツールの作成
- **セットアップスクリプト**
- 再利用可能なコマンドを含むセットアップスクリプトを作成
- **デプロイスクリプト**
- 以下の操作を実行するスクリプトを作成
1. フロントエンドをビルド (`npm run build`)
2. ビルドされたファイルをS3へデプロイ
3. AWS CDKコマンド実行時にプロファイル指定が可能
---
### フロントエンド用のコード
実際に生成されたコードを入力
フロントエンド実装
所要時間10分程度
Claudeに用意したプロンプトを流し込み、フロントエンドのゲームとして面白そうなものが出るまで出力を試します。
今回は3回の抽選で出力ができた、数字を記憶するゲームをチョイスしました。
実際の動作にあたってはゲームの初期出力から更に3回のエラー修正や日本語化をして以下のようなゲームができました。
コード実装
実装に進んでいきます。
Cursor Composerに用意したプロンプトを流し込みます。
環境の初期セットアップ
出力された初期セットアップコマンドを利用して環境のセットアップを実施しました。
フロントエンド側の環境セットアップでエラーが出ましたが、後々修正してもらえると踏んでここではスルーしました。
フロントエンドコード実装
更に追加の環境設定コマンドを提示されたため、そちらも合わせて実行しました。
Composerによりファイルは実装してもらえるため、初期環境が整ったら予めnpm run devで開発環境を立ち上げたのち、出力されるエラーを修正していきます。
以下のような画面が表示されるとともに、動作も確認できたためここでフロントエンド側の実装は終わりです。
ここまででは2回の修正が必要でした。
バックエンド実装
所要時間1時間程度
デプロイスクリプトの作成
作成したデプロイスクリプトに権限エラーとパスのエラーがあったので修正してもらいました。
エラーがなくなり実行したところ、インフラの構築が先に必要そうなメッセージが見受けられたために、先にバックエンドの構築へと進みました。
想定としてはフロントエンドをnpm run buildでファイル生成しcdk deploy にて作成したS3にそのままファイルを配置するイメージでしたが、おそらくそこまでの意図が汲み取られていないため、流れに身を任せます。
バックエンドコード実装
先にバックエンドの構築が必要になりそうな旨を伝えたところ、大体のファイルが作成されたため指示されたコマンドを打つとエラーが出たためエラー内容を修正してもらいます。
2度ほどの修正でcdkのdeploy処理に関しては動作しました。
CloudFormationで作成されているリソースを眺めてみたところ、SSL証明書を作成するフェーズで処理に時間がかかっていました。
既にSSL証明書は作成済みであったことを失念していたため、不要な旨を伝えて修正。
# us-east-1リージョンの証明書一覧を取得
aws acm list-certificates --region us-east-1 --profile <profile>
ここで初の手動での書き換えが必要となります。
あらかじめ用意しておき、要件として伝えておくことでこちらの手間は省ける想定です。
実際の運用として考えた場合には、あらかじめパラメータとして用意をするか、コマンド実行結果からDomainNameが一致するもののarnをパラメータファイルに落としてそこから実行してもらうことが良いと思います。
バックエンドのデプロイ後にアクセスしてみますが、アクセスはできない状況です。
CloudFrontとしては動作しているように見えますが、バケットにファイルがありません。
deployスクリプトを実行したところビルドで失敗したため、エラーの修正を依頼する。
デプロイ完了後、一度独自ドメインからのアクセスを確認してみましたが、案の定S3にオブジェクトのアップロードがされていなかったため、フロントエンドのビルド、バックエンドも問題を修正してもらい再デプロイ。
CloudFrontのディストリビューションドメインからはアクセスが可能だったのですが、独自ドメインからはアクセスができないままだったため、再度修正を依頼。
ここまできたらもう完成したも同然ですね。
調査用のコマンド発行してもらい、結果を設定は問題が内容であるが、DNS設定の反映に時間がかかっているものと判断ししばらく待機しますが、待てど暮らせどアクセスができず調査へ。
紆余曲折がありましたが、表示できない原因はドメインが休眠状態となっていたためでした。事前の確認が必要でしたのでAIの落ち度ではありません。
基本的な動作としてはここまでの段階で完了していました。
細かい手直しとしてフォルダ配置やドキュメント修正などを追加で依頼してます。
おわりに
今回はノーコードとまでは行きませんでしたが、99%を生成してもらい無事に完成させることができました。
規模が大きなものとなるとここまでスムーズに行くことは珍しいですが、小規模のものであれば大体数時間程度で完成させられます。
コードアレルギーの方がコードに触れてみるきっかけとして、AIに基礎的なコードを作成してもらい、読み解きながら学習していく0から1への足掛かりとしてはとても有用に利用できると考えています。
もちろん経験者の皆さんはすでに活用されていることが多いと思いますが、知識のない分野については一度生成してもらい、内容から追ってみることで詳しくなることもできますし、わかった気になっていたことについても正しい結果・知らなかったような仕様で作成してくれることも沢山あります。
まだまだこれからの進歩が楽しみな分野ですが、特にコード関連は圧倒的な工数の削減へと繋げることができると考えています。
皆さんも新たな1歩踏み出してみませんか？