はじめに
この記事はNRI OpenStandia Advent Calendar 2024のシリーズ3の24日目の記事です。
今回は生成AIツールであるReplit AIを用いて、簡単なWebラーニングシステムの開発をAI任せで全自動で行いました。コードの中身は1ミリも理解せずとも、個人開発レベルの小規模なWebアプリを製作することが可能です。
目次
1. Replit Agentとは？
2. 要件定義
3. 設計
4. 実装
5. まとめと感想
Replit Agentとは？
要件定義からデプロイまでを自動でこなす、巷で話題のソフトウェアエンジニアの暮らしを支える開発者支援ツールです。
- Replitというブラウザベースで動作するIDE内の、AI機能の1つとして提供
- 執筆時点(2024/12/24)ではチェックポイント毎に$0.25課金が必要
- プロンプトによる対話を基に、開発に関わるあらゆる作業（要件定義、フレームワーク選定、設計、画面デザイン、実装、デバッグ等）を自動で実行
要件定義
まずは、システム開発のお作法に準い、開発するアプリの目的や機能要件を考え要件定義書にまとめます。開発以外の工程にあまり課金を発生させたくないため、ChatGPTを使用して作成していきます。以下のような仕様に関わるざっくりとした内容を簡単にまとめました。
- ユーザー機能、管理機能などの説明
- 必要なプラットフォームや技術スタック（React, TypeScript, AWS Amplify） など
設計
次に、要件定義書でまとめた内容を基に、システム構成や画面UIといった設計工程を実施します。
システム構成やDB設計
- ものすごく簡略化して以下のように定義しました。
1. システム構成設計
以下を基にアーキテクチャを決定します。
* フロントエンド: React + TypeScript
* ユーザーの操作を管理し、サーバーとのデータやり取りを行う。
* バックエンド: AWS AmplifyのAPIおよびデータベースサービス
* 問題データ管理、採点ロジック、ランキング機能を担当。
* データベース: DynamoDB (NoSQL)
* 問題データやユーザー情報を保存。
* ホスティング: AWS Amplify
* Webアプリをホストし、ユーザーに提供。
2. データベース設計
次のようなデータを管理します：
1. ユーザーデータ
* ユーザーID、名前、回答履歴、スコア
2. 問題データ
* 問題ID、問題文、選択肢、正解、解説
3. 結果データ
* ユーザーごとの回答履歴とスコア
3. フロントエンド設計
各画面のワイヤーフレームを作成：
1. 名前登録画面
2. 問題出題画面（4択形式、進捗バー付き）
3. 採点結果画面（解説表示）
4. 点数およびランキング画面
4. バックエンド設計
* API設計:
例:
* GET /questions: 問題リストを取得
* POST /answers: ユーザー回答を送信し採点
* GET /rankings: ランキングを取得
* ロジック設計:
例:
* 問題のランダム出題
* スコア計算
画面UIの設計
- 生成AIツールであるGalilleo AIを使用しました。Galilleo AIはReplit AI同様に、対話ベースで希望するデザインや機能に基づき、自動で適切な画面UIを作成してくれるツールです。執筆時点(2024/12/24）ではPCデスクトップに対応したデザインの生成が未対応だったため、今回は参考として使用することにしました。以下のように上記で作成した要件定義書とデザインに関する指示を入力すると、画像のようにモダンなデザインのUIを設計してくれます。
<入力プロンプト>
各ページ共通で、ヘッダーとフッダーを含む。
ヘッダーにはサイトのアイコンと、ユーザーページへのリンクを含む。
色は赤を基調とし、popでモダンなデザインにしたい。
~以下、要件定義書の内容を転記する〜
実装
要件定義、設計が無事に終わったので、ここからは実際にコードを生成・編集するプロセスに入ります。これまでに作成した要件定義書、画面UIの画像と共に、プロンプトで指示を与えると、環境構築を自動でし始めます。
開発中の課題とその解決方法
- エラーが発生したらReplit AIが自らデバッグし、コードを修正して再実行してくれます。
バージョン管理
- GitHubとアクセストークンを使用して連携が可能です。機能毎に適宜ブランチを切ってコミットしてくれます。
デプロイ
- 今回はAWS Amplifyを使用してデプロイしました。ビルド設定ファイルであるamplilfy.ymlも勝手に書いてくれました。
デモ動画
1. 名前入力 > クイズ回答 > 採点と解説表示
- 名前を入力して開始ボタンを押すと、4択の形式の問題表示画面に移ります。回答を選択すると正誤と共に解説を表示します。
2. 最終問題の回答 > 採点と解説表示 > 点数表示とランキング表示 > 名前入力画面へ戻る
- 全ての問題を回答すると正解率を計算して表示し、他のユーザーのスコアをランキング形式で表示します。
3. 管理画面
- 問題文、４択の回答の選択肢、解説文の入稿と、正解とする選択肢の設定を行います。
まとめと感想
Replit Agentを使った感想や評価
- 開発に関わるほぼ全ての工程をAIに丸投げし、想定したシステムを製作することができました。
- 開発はアジャイル的に最小限の機能から実装しようとするので、初めから規模感の大きい複雑なシステムを製作しようとすると苦戦するかもしれません。
Replit Agentの利点と課題
- 開発初心者のハッカソンへの参加障壁が劇的に下がると思います。
- 営業担当者でも爆速でシステムのプロトタイプを製作することができる為、顧客に簡単な完成イメージを見せながら提案することが可能になると思います。
- 一方で、複雑なデータ構造を有するシステムや、外部システム・APIと連携を要する開発は、まだ難しいようです。
- ゆくゆくは大規模システム全部を飲み込んで、勝手に拡張してくれるようになると嬉しいかも…。