Replit Agentを使って5日間でECサイトを立ち上げてみた

初めに

この記事はCommune Advent Calendar 2024シリーズ1、4日目の記事です。
QAチームの金丸が担当します。

生成AIの進化が著しく、「個人でも頑張ればSaaS開発ができるのではないか」と思ったのが今年の9月でした。

そこから生成AIツールを活用して何個かのWebアプリをリリースすることができたのですが今回はReplit Agentを使用して5日間でECサイトを立ち上げた話と躓いたポイントについて話して行きたいと思います。

Replitについて

Replitはブラウザ上でコード開発ができるIDE(統合開発環境)であり、サーバーの立ち上げ・DB接続・デプロイなどのオールインワン環境を提供しています。同様のサービスではVercel,Nelify,Supabaseなどがあります。

https://replit.com/

2024年、Replitは「Replit Agent」という新機能を発表しました。この機能は、AIの力を活用して、開発者の生産性を飛躍的に向上させる次世代のサポートツールです。Replit Agentは単なるコード補完ツールではなく、開発プロセス全体を効率化するパーソナルAIエージェントとして設計されています。

Replit Agentの利点

2022-2024年に生成AIを用いた開発環境は大きく変わってきました。Github Copilot,Cursol等がその一端を担っていたと感じています。その中で登場したReplit Agentは従来の生成AI開発とは異なるポイントがあり、その部分が最大の利点となっています。

1. DB環境との接続
   元々クラウド型IDEとしてスタートしたReplitはバックエンド環境を持っているため生成AIコード補完がバックエンドの部分まで補完してくれます。従来はコードのみの保管でしたがReplitは開発環境の構築から自動で支援をしてくれるのが最大の利点です。

2. ファイル間のコード補完
   複数ファイルを跨る機能のコード保管も可能です。こちらについては他の生成AIツール保管ツールでも可能な部分もあるので大きくは取り上げないですが関連するファイルを一度に修正してくれるのでとても便利です。

機能/特徴	従来の生成AIコード補完ツール	Replit Agent
コード補完の範囲	主にフロントエンドや小規模な関数レベルの補完に特化。	フロントエンドからバックエンド、API設計まで広範囲をサポート。
DB接続設定の支援	手動での設定が必要。接続コードを補完してくれる場合もあるが、詳細設定はユーザー任せ。	必要なDBを選択するだけで、自動的に接続コードや設定を生成。
バックエンド構築支援	単発的なコード補完が中心で、アプリ全体の設計はサポート外。	フレームワーク選択から、APIルート設計、認証実装まで一括で支援。
デプロイとの連携	デプロイ作業は別のツールで行う必要がある。	開発したバックエンドをそのままデプロイ可能。
リアルタイムデバッグ	エラー箇所を指摘するが、詳細なデバッグは手動で行う必要がある。	DBクエリの結果をリアルタイムで確認可能。エラー修正案も提示。
DB接続後の操作	データのCRUD操作はユーザーが個別に実装する必要あり。	自動的にCRUD操作のコードを生成し、簡単な操作で利用可能。
ドキュメント生成	DBスキーマやバックエンドAPIのドキュメント生成は対象外。	DB構造やAPIエンドポイントのドキュメントを自動生成。
学習曲線	初心者にはDB接続やバックエンド開発は難易度が高い。	設定や操作が直感的で、初心者でも簡単にバックエンドを構築可能。

Replit Agentの基本的な使い方についてはこちらの技術ブログがよく纏められていたのでご参考ください。

Replit Agentのみで開発したWebアプリ(ECサイト)

公式リファレンスや技術ブログなどを参考にしながら、企画からデプロイを5日間で実施したのがこちらのWebアプリ(ECサイト)になります。1日1冊だけ本を売るだけのサイトですが、ユーザー管理,認証,決済処理,在庫管理機能全てをReplit Agentを用いて開発することができました。
https://book-of-the-day.replit.app/

認証機能

折角DBと連携できるのであれば認証機能を作れるのか試したいと思ったのが今回の開発のスタートでした。結論から話すとReplit Agentのみで認証機能は開発することができました。プロンプトとしては特に凝ったことはしておらず「メールアドレス/パスワードでログインできるようにして」と投げたところフロントエンド・バックエンド・DB構築含めて自動で実施してくれました。

認証機能開発のためのプロンプトをReplit Agentに渡した時のイメージ図(開発した時のプロンプトは既にバックログから削除されていました)

できた認証機能

勿論一回のプロンプトで開発することは難しくエラーが頻発しますが、それでも基盤となるコードやファイルを作成してくれるので後の作業がグッと楽になりました。また、Web上で即座に実行テストできる・バグ取り作業を同時進行でできるのでとても便利です。

一番驚いたのは「そういえばパスワードの暗号化どうしようかな」と考えてDB除いてみたら既に暗号化処理が実装されていた部分です(笑)

決済機能+在庫管理

決済にはStripeを使用しています。API機能のみの連携であり元々Replit Agent側もサポートしていることもあり特に躓くことなく実装できました。

問題となったのは在庫処理の部分で、購入が完了した時に 1. ユーザーの情報(送付先等)がDBに保存される 2. 在庫数の減算処理がされる 3. 購入がされたことを管理者に伝える 処理が必要でした。これらについては流石に難しいだろうと思い自分で実装する予定でしたがReplit Agentがまたもやってくれました。

開発する予定はなかったのですが↑の要件をReplit Agentに伝えたところ「在庫管理のためには管理画面を作成しましょうか?」と返信が返ってきたので開発をお願いをしました。そこで開発したのが以下の管理画面です。

管理画面

これにより書籍管理,在庫管理,購入管理をWeb上で実施することができるようになりました。ここら辺からReplit Agentの凄さを垣間見るようになってきます。

躓くポイントと解決策(3つ)

ここまで良い部分を書いてきましたが勿論のことながら平坦な道ではないです。開発中にバグ・エラーが頻繁に発生するのでそれを乗り切る必要があります(今回の開発とは異なるケースですが最初のプロンプト実行からサーバーが立ち上がらないを永遠とループする現象に遭遇したこともあります)。そこで、自分がReplit Agent開発でよく躓いたポイントとそれに対する自分なりの解決策を書いていきたいと思います。

1. DBを壊す

Replit AgentはDBを構築・修正できるのがいい点でもありますが同時に悪い側面を持っています。それはAIがDBを簡単に修正することにあります。
開発しているとわかりますがファイル修正を高速で実施しているため何を実施しているのか全て理解するのは慣れていないと難しいです。そのため、プロンプトを極大解釈したAIが勝手にDBを再構築することがしばしばありました。

xを覗くと同じようなケースにぶち当たった方々が見受けられました。

このような状況では、「以前は動いていたはずの機能が動かなくなる」「エラーを吐いていなかった部分がエラーを出すようになる」「サーバーが立ち上がらなくなる」といった問題が発生します。こういった時には、真っ先にDBを確認してください。多くの場合、DBが壊れていることが原因です。

解決法：DBを初期段階で構築し、操作を制限する

私が導入した解決策の一つは、DBを初期段階でしっかりと構築することです。具体的には、以下の手順を踏みました。

1. 初期DBスキーマの定義:
   開発開始の初期淡海に、必要なテーブルやカラムを詳細に定義したスキーマを作成します。これにより、AIが不必要にDB構造を変更するリスクを減らします。
2. プロンプトでの明確な指示:
   プロンプトに「絶対にDBは操作しない。どうしてもDB操作が必要な場合は許可を取るように」と明確に記載します。これにより、AIがDB操作を試みることを防ぎます。
3. 定期的なモニタリング:
   定期的にDBの変更履歴をモニタリングします。異常が発見された場合は、迅速にロールバックから復元することが可能です。(Replitの基本機能としてロールバックがあるのでそれを使用します)

この方法により、「いつの間にかデータがなくなっている現象」を回避することができています。今回のWebアプリ（ECサイト）開発でも、このアプローチを採用することで、安全かつ安定して開発を進めることができました。

2. エラーが頻発する

Replit Agent側に機能開発を依頼したときに追加で「こういう機能も作りましょうか?」と提案してくれます。それ自体はとても良い機能だと思うのですが全て採用してしまうと一気に複数ファイルを作成し出すためエラーが頻発するようになります。

機能提案をしてくれる例

解決法：機能開発は最小限に留め、指示は詳細かつ的確にする

この問題を解決するために、機能開発を最小限に抑え、指示は詳細かつ的確に行うことが重要です。具体的な方法は以下の通りです。

1. 機能の優先順位を設定:
   まず必要不可欠な機能のみを優先的に開発し、追加機能は後回しにします。これにより、基盤となる部分が安定しやすくなります。
2. 段階的な指示の提供:
   一度に多くの機能を依頼するのではなく、必要な機能を一つずつ段階的に指示します。例えば、「まずはユーザー認証機能を実装してください。その後、パスワードリセット機能を追加します」といった具合です。
3. 詳細なプロンプトの作成:
   AIに対して具体的かつ詳細な指示を出します。例えば、「ユーザー認証機能を追加してください」ではなく、「ユーザーがメールアドレスとパスワードでログインできる機能を追加してください。セッション管理も含めてください」といった具合です。
4. 技術要件を設定:
   コード作成の中に使用している技術に差異が出てくることが偶にあります。具体的に私が遭遇したケースだと、React開発においてページ管理をApp routerとwouterで共同して管理しだしたりしました。これらの回避のために最初のプロンプト指示にて技術要件を定義しておくと良いです。

3. デザイン修正が難しい

生成AI全般に言えることがですが、デザインについて明確な答えを出すことが難しいです。所謂イけていないデザインの状態で開発を開始しある程度開発したところでデザインを修正しようとすると思ったような修正をしてくれないです。特にReplit Agentで言うとデザイン修正依頼を出したはずなのに「いつの間にかAPIの内容が変わっている」等のケースがありました(流石にDB再構築とかは今回のケースではなかったです)

解決法:v0で作り込んだデザインを参考ファイルとして添付する

あまりにもデザイン修正指示が難しいためReplit Agent上でのデザインの作り込みは諦めました。その代わり、フロントのデザインを開発してくれる生成AI v0 に依頼してデザインを作り込むことにしました。ある程度の誤差はあるものの比較的良いデザインをこれで作れるようになりました。

まとめ

Replit Agentを活用した開発には多くのメリットがありますが、一方で躓くポイントも存在します。うまく使用することによってとても強力なツールになることを実感することができました。

躓くポイント	解決策	具体的な対応策
DBを壊す	DBを初期段階で構築し、操作を制限する	- 初期スキーマの定義 - 明確なプロンプト指示 - 定期的なモニタリング
エラーが頻発する	機能開発は最小限に留め、指示は詳細かつ的確にする	- 機能の優先順位設定 - 段階的な指示提供 - 詳細なプロンプト作成 - 生成コードのレビューとテスト
デザイン修正が難しい	初期デザインを参考ファイルとして添付し、専門の生成AIに依頼する	- 初期デザインの作成 - デザインファイルの共有

今後も生成AIツールを用いた開発を続けていきますのでそこで得た知見を共有していきたいと思います。