Replit Agentで1時間でWebアプリを作ってデプロイする

まとめ

この記事では、知識がない中AI丸投げでWebアプリをデプロイできたこと、その中で分かったReplit Agentの強みと弱みについて語ります。

はじめに

こちらをご覧ください。私がわずか1時間で作った、とある学習アプリです。
ログイン、学習コンテンツ、サイズによるレスポンシブ対応も機能してます。

前提

続いて、このWebアプリを作るために、私が必要としたものはこれだけです。

• Replit Agentのアカウント（Replit Core。月額2000円くらい）
• 「Progateっぽい学習サイト作って」「なんかエラー直して」という命令
• Webアプリって「作って？デプロイをしたら？動く？」という曖昧知識
• 中学レベルの英語力

そして、私は Webアプリに関する体系的な知識を全く持っていません。
それなのに、なぜこれを作ることができたのか？早速見ていきましょう。

Replit Agentとは

まず、今回はReplit Agentという、生成AIサービスを使いました。

これは、平たく言えば「生成AIがWebアプリを作り、それのデプロイまでいい感じにホストしてくれるサービス」です。

このサービスでは、プロンプト（AIへの、普通の言葉での命令文）を使うだけで、ゼロから自分の望んだWebアプリを作ることができます。

参考用に、やり取りの全文をベタ貼りしておきますね。

（YKは私、AIがReplit Agentです）
 
## YK
Progate（https://prog-8.com/）のような形式で、新規ビジネスの考え方を学んで実践できるe-learningサイトを作りたい。

経験値とレベルの概念、可愛いキャラクターを実装せよ。

---

## AI
Absolutely! Let me propose what we'll build for you.

Progateスタイルのビジネス学習プラットフォームを作成します。経験値システム、レベル機能、かわいいキャラクターを実装し、インタラクティブな学習体験を提供します。ReactとExpressを使用して開発を進めていきますが、実装を開始してよろしいでしょうか？

---

## YK
Yes. It is showing correct login page with register option.

---

## AI
アプリケーションは以下のURLでアクセスできます：
https://{repl-name}.{username}.repl.co

または、Replitのウェブビューで直接アクセスすることもできます。ログイン画面が表示され、新規登録もしくはログインが可能です。

---

## YK
I cannot see any change when I push "continue" button in the page after login.

---

## AI
レッスン完了機能を実装します。「Continue」ボタンをクリックした時の処理を追加して、画面の更新も行うようにします。

---

## YK
次のメッセージが出る:
レッスンの完了に失敗しました: Internal Server Error

---

## AI
エラーメッセージの全文を教えていただけますか？レッスン完了時に500エラーが発生しているようですが、具体的なエラー内容を確認させていただきたいです。

---

## YK
エラー
レッスンの完了に失敗しました: Internal Server Error

---

## AI
レッスン完了機能のエラーを修正します。データベーススキーマとAPIエンドポイントの修正を行います。

---

## YK
Business Fundamentals の経験値獲得は上手くいったが、その他ではエラーが出た。

---

## AI
レッスン完了機能のバグを修正しています。

---

## YK
レッスンを完了した正しいメッセージは出るが、経験値は反映されない。

---

## AI
レッスン完了時の経験値が正しく反映されるように修正しています。

---

## YK
2〜4個目のレッスンは経験値に反映されないし、完了してもボタンが変わらない。

---

## AI
レッスンの完了機能とUIの更新処理を修正しています。

---

## YK
OK

---

## AI
以下の点を確認してください：

- レッスン完了時に経験値とレベルが正しく更新されますか？
- レッスンカードの完了状態が正しく表示されますか？
- 認証関連の処理（ログイン・ログアウト）は正常に機能していますか？

---

## YK
OK

---

## AI
実践的な課題（チャレンジ）が正しく表示され、難易度や所要時間などの新しい情報が表示されていますか？

---

## YK
after logging in, I've met this error:

[plugin:runtime-error-plugin] type is not defined /home/runner/BusinessQuest/client/src/components/LessonCard.tsx:39:10 37 | style={{ backgroundImage: url(${imageUrl}) }} 38 | /> 39 | {type === "challenge" && ( | ^ 40 | <div className="absolute top-2 right-2 bg-primary/90 text-primary-foreground px-2 py-1 rounded text-sm"> 41 | チャレンジ


---

## AI
タイプエラーを修正しています。

---

## YK
OK, redeploy it.

---

## AI
アプリケーションをデプロイします。デプロイが完了したら、新しいURLでアクセスできるようになります。
実践的な課題とプロジェクトが正しく表示され、チャレンジの表示が適切に更新されていますか？ボタンのテキストは課題タイプに応じて正しく変更されていますか？

では、ここまで使ってみて分かった、Replit Agentの強みと弱みを見てみましょう。

強み

強みは間違いなく、この2点でしょうね。

• 知識ほぼなしでも、アイデアからWebアプリを形にできる
• 爆速でプロトタイプを作れる

これまでもClaude Artifactなどのコードを実装・実行できる生成AIサービスはありましたが、それをデプロイまで持っていけるという点でReplit Agentは非常に優れています。

そして、速度も驚異的です。今回のレベルのものなら調整して1時間以内、本当に簡単なものなら10分とかで作って公開できます。

この速度は例えば、新アプリの挙動イメージを顧客と擦り合わせたい時、あるいはアプリを作って検証するサイクルを高速で回したい時などに、非常に有用だと感じます。

弱み

一方で、使ってみて感じた弱みも、以下のように見えてきました。

• 設定を追加しようとすると、うまく動かなくなることが多い
• 色々いじくってると、すぐにAIの使用上限に達する
• 初心者はエラーになっても自力で直せない（勉強不足なだけかもですが...）

今回の例では、「講座をクリアしたら経験値が貯まるぞ」みたいな機能をつけたかったんです。ただ、その機能が裏でうまく噛み合わなかったようで、なんかアプリが謎のエラーを出して動かなくなったりしました。

概ね、最初に作ってくれたものはうまく動いてくれて、そこから何か裏の設定を細かく追加しようとするとエラーが出て動かなくなる印象です。

また、AIが作ったものはAIにうまいこと直してもらいたいのが人情だと思うんですよ。（私はそうです。）しかし、AIに「ここ直せ」と色々注文してると、いつの間にか使用できる上限量に達して、半日くらいおあずけになります。

まとめと、推奨の使い方

と、このように強み弱みを（割と弱み多めに）お伝えしました。

ただ私個人としては、「AIくん、アイデアはこうだ、勝手にアプリ作っといて」という未来がもう手の届くところにまで来たなと感じてます。

技術的進歩と工夫で、上記の弱みがなくなるのは、時間の問題でしょう。

また、技術力のある諸兄は、AIにプロトタイプを爆速で作らせて、自分でいい感じに手直しするというやり方をすると、とても効率的にWebアプリを作れるじゃないかと思います。

そして、私のような技術力がそんなにない勢は、基礎的な知識や技術力を身に付けた上でこれを使ったら非常に実になると思います。（お互いに学習と実践を頑張りましょう✏️）

余談

• プレミアムフライデー期間に、なんだか割引してたので、年額120ドル（2万円くらい？）課金しました。もりもり使ってみます。🌳🌳
• アプリを公開すると、Replitの利用料の他に、従量課金的なのも発生するみたいです。よく注意書きを読んでからやるようにしましょう💰