【個人開発】Replit Agentで実現した爆速開発：8時間で本格的なWebアプリを作った話
はじめに
私は最近、生成AIツール（Replit Agent）を使って一つのプロダクトを開発しました。驚くべきことに、実際の開発時間はわずか8時間でした。
作ったものは単なる試作品ではありません。「ユーザー体験を考慮した複数回の要件調整」、「品質管理を意識した実装」をしっかりと実施しました。
これから「生成AIツールの活用を検討している開発者の方々」、「どの生成AIツールを選択すべきか迷っている方々」には参考いただける内容になるのではないかと思っています。
背景
以前から日記を書くことで語学が学べるアプリ「Vanilla」をスマートフォンアプリで提供していました。
先月、スマホアプリに重要なアップデートを実施し、課金機能を追加しました。
これにより、ユーザーの日記データをローカルからクラウド環境に保存できるようになりました。
クラウドストレージへの対応により、スマートフォンだけでなくPCのブラウザからもアプリを利用できるようになり、利便性が大きく向上しました。
この変更後、徐々に課金ユーザーも増えてきたことを受け、より多くの方にアプリを活用していただくためにWeb版の開発を進めることを決定しました。
しかし、開発を進めるにあたって大きな課題がありました。今年システム開発事業を起業したばかりで、以前のように個人開発に時間を費やすことが難しい状況です。
そこで、開発工数を削減するため、生成AI系の開発ツールを活用する方針でプロジェクトをスタートすることにしました。
使用した技術スタック
- Replit Agent
- Stripe
- Firebase
- React
- JavaScript
作ったもの
語学日記アプリ(Webアプリ版)
Vanillaは、ユーザーが母国語で書いた日記を学習したい言語に翻訳し、発音練習もできる語学学習支援アプリケーションです。日々の思考や出来事を記録しながら、自然に語学学習を進めることができます。
使い方
1. 学習言語で日記を書く
まずは思い切って学習している言語で日記を書きます。
2. AIに添削してもらう
「AIに添削してもらう」ボタンを押下すると、AIが推奨する文章と、修正内容についての説明を提示してくれます。
3. 登録した日記をテーマーにAIと会話する
日記を保存したら登録した日記の内容をAIが理解して、ディスカッションを展開してくれます。AIと会話をして実践的な練習を行うことができます。
またサブスクリプションを登録することでAIの問いかけの意味が分からない時の翻訳や、文章の読み上げ、また返答の提案をしてくれる機能を利用することができます。
4. わからない表現が出てきたらフレーズ登録
AIとのチャットの中で分からない表現があればフレーズを選択し、右クリックすることでフレーズをストックしておくことが可能です。
ストック時に、フレーズの意味や、発音記号、類似表現と例文が自動登録されるようになっています。
Replit Agentのコツと注意点
今回は生成AIツールとしてReplit Agentを使いました。
Replit Agentの良さを言い出すとそれだけでエントリーが一つできてしますので具体は割愛しますが、今回は利用時におけるちょっとしたTipsを残しておきます。
DBと課金は要件として最初に伝える！
Replit Agentを使う際、最も重要なのはデータベースと課金に関する要件を最初に明確にすることです。
なぜなら、データベースの設計は後からの変更が困難です。また、課金システムも同様で、処理が複雑で、後付けが非常に手間がかかります。そして、これらの要素は他の機能に大きく影響するため最初に前提条件として設計し、agentに伝えた方が製造コスト的にも安くなります。
例えば私の場合以下のような指示を出しました。
DBの要件
課金のシステム要件
プロジェクト開始時に、必ずデータベース構造と課金モデルについて具体的に伝えましょう。
要件定義書はちゃんと管理する
要件定義はちゃんと一覧に落として最終的に成果物の受け入れ試験をした方がいいです。
というのも結構デグレーションバグが頻発します。本来であればPlaywrightなどを使用し、シナリオテストを回すのがいいかもしれませんがスピードを優先するとそういった工数も取れませんので、自身の出した要件を一覧化しチェックボックスをつけて管理するのが最も効率的でした。
私の場合、Notionに要件をまとめて以下のように管理していました。
変更管理もちゃんとやる
変更管理も重要です。変更管理については別途ページを作成して、作成したページをそのままagentへ投げ込んでます。
従量課金に注意
従量課金に注意してください。私は今回、Replit Coreを使ったので$25/per monthとなりますが、$25定額というわけでなく、使い切ったらその先は従量課金で追加でコストを払わなければいけません。
ここが、Replit Coreの唯一のデメリットですね。プロンプトのムダ打ちはできません。
なので事前の要件定義が非常に重要となります。
かかった時間と費用
最後にかかった時間と費用です。
かかった時間は8.5時間、費用は30ドルでした！
自分で開発したら間違いなく1ヶ月はかかるので、大変安い金額で作りきれたと思います。
今後
今後もReplit Agentを使ってガンガン開発していく所存です！
生成AIを活用した受託開発とかも本格的にやってみたい。。。
このアプリのリリース後の成長や、開発ナレッジは随時Xにて発信していきますのでぜひフォローください！
Discussion