こんにちは、2025年度入社の臼居です。
今回は、「自分では全くコードを書かずに Web アプリを作る」という前提で、Replit Agent 3 を使った Vibe Coding を試してみました。
自然言語で要件だけを伝え、以降の実装やテストをできるだけ Agent に任せるというスタイルが、どの程度実用になるのかを、すごろくアプリを題材に検証していきます。
- Replit とは？
- Vibe Coding とは何か
- Replit Agent 3 とは？
- Replit の料金体系（今回使ったプラン）
- Replit の環境準備
- すごろくアプリを作らせてみる
- 完成したすごろくアプリで遊んでみた
- 所感
- まとめ
Replit とは？
Replit（レプリット）は、ブラウザ上だけでコードを書いて実行できるクラウド開発環境です。
- ローカル環境のセットアップ不要
- ブラウザからすぐにコード実行・デバッグ・ホスティングまでできる
- 最近は AI を前提とした「Vibe Coding」のプラットフォームとして位置づけられている
といった特徴があります。
Vibe Coding とは何か
ここで一度、Vibe Coding という用語を整理しておきます。
Vibe Coding とは次のようなスタイルです。
- コードを細かく書くのではなく、
「こんなアプリを作りたい」「だいたいこういう雰囲気で」という
自然言語の指定から開発を始める - 生成されたアプリを実際に触りながら、 「もう少しこうして」「この挙動は変えたい」とプロンプトで微調整していく
- 仕様書を先にきっちり固めるのではなく、 プロトタイプを作りながら仕様を詰めていく
Vibe（雰囲気）という単語が入っている通り、
まずなんとなく動くものを出してもらい、触りながら AI と一緒に整えていく
タイプの開発手法です。
Replit Agent 3 とは？
Replit は 2025 年 9 月に、より自律性を高めた Agent 3 を正式リリースしました。
Replit Agent 3 は、ブラウザ上のオンライン IDE「Replit」に組み込まれた 自律型のコーディングエージェント です。
次のような特徴があります。
- 自然言語で「こういうアプリを作ってほしい」と指示すると、 アプリ全体の構成を考え、必要なコードを生成する
- 組み上げた Web アプリをブラウザ内で実行し、 実際にボタンをクリックしたりフォーム入力したりする自動テストを実行
- テストで見つかった不具合を自己診断し、コードを書き換えて再テスト
- Web アプリ以外にも、Slack ボットやワークフロー自動化などの 「Automation」向けエージェントも構築できる
アップデートの内容と自律性
Replit の公式ドキュメントによると、Agent 3 では「Max Autonomy」というモードで、最大約 200 分間 自律的にタスクを進められるとされています。
この間、Agent が自分でタスクリストを作り、
- コード生成
- ビルド
- ブラウザテスト
- 修正
- 再テスト
といったサイクルを何度も回してくれます。
従来の「AI 補助」との違い
従来の GitHub Copilot などの「AI コーディング補助ツール」は、
- エディタ上での補完（オートコンプリート）
- 1 ファイル内の部分的なコード生成
- エラー時の修正提案
といった 「1 ステップ単位の支援」 が中心でした。
それに対して Agent 3 は、
- アプリの構成を自分で考える
- ブラウザで動かしてテストする
- テスト結果を踏まえて自分で修正する
ところまで踏み込んでいる点が大きな違いです。
つまり、「賢い補完ツール」というより、ある程度まとまった時間を任せられる自律エージェントになってきている、と言えます。
Replit の料金体系（今回使ったプラン）
2025 年 12 月時点で、Replit の料金プランは大きく次の 4 種類があります。
- Starter（無料）
- Replit Core（個人向け有料）
- Teams（チーム向け）
- Enterprise（エンタープライズ向け）
今回の検証では、一番ベーシックな Starter（無料）プラン を使用しました。
公式情報を元に、Starter プランのポイントだけ抜き出すと次の通りです。
- 料金：無料
- Replit Agent を試用できる（トライアル枠）
- 開発用の App を最大 10 個まで作成可能（リンクは一時的）
- 作成できる App は Public（公開） のみ
- ビルド時間や自律実行時間には制限があり、
長時間の Max Autonomy には向かない
今回の記事では、
- 無料プランの範囲内でどこまで Vibe Coding ができるか
- Agent Usage（クレジット消費）にどれくらい気を遣う必要があるか
という観点も合わせて見ていきます。
Replit の環境準備
アカウント作成
https://replit.com/agent3 にアクセスし、 「Log in」から GitHub などのアカウントでログインします。
ユーザー名・フルネーム・テーマカラーを入力します。
プランの選択
プランを選択します。今回は無料プランである「Starter」を選択します。
以下の画面になれば準備完了です。
すごろくアプリを作らせてみる
今回は以下のようなプロンプトを投げて、すごろくアプリを作成してもらいます。
すごろくを作りたい。cpu含め3人対戦。最初にゴールした人が勝ち。 色々なマスを用意。道順に分岐もあるといい。
「Build」 + 「Web app」 を選択してプロンプトを入力すると、Replit Agent がアプリ生成の準備を始めます。
Improve prompt を試してみる
「Start chat」の左側にある「Improve prompt」を押すと、入力内容がより形式的な英文プロンプトに書き換えられます。
テキストが変換されました。
A web-based Japanese-style sugoroku (board game) where players race to reach the goal first in a 3-player match including CPU opponents, featuring various special tiles and branching paths for strategic gameplay. Core Features: - 3-player game with human player vs 2 CPU opponents - Interactive board with dice rolling mechanics and automatic piece movement - Various special tiles with different effects (advance, go back, skip turn, etc.) - Branching paths on the board allowing players to choose different routes Visual References: Inspired by classic Japanese sugoroku boards and modern digital board games like Mario Party, known for their colorful, family-friendly interfaces. Style Guide: - Colors: Primary #E74C3C (festive red), Secondary #F39C12 (golden yellow), Accent #27AE60 (lucky green), Background #FDF2E9 (warm cream), Board #8B4513 (wooden brown), Text #2C3E50 (dark navy) - Design: Rounded/Hiragino Sans fonts, traditional Japanese aesthetic with modern touches, circular board layout with clearly marked paths, animated dice and game pieces, mobile-responsive design with large touch-friendly elements
DeepL に内容を翻訳させてみました。
ウェブベースの和風双六（ボードゲーム）。CPU対戦相手を含む3人対戦で、プレイヤーはゴールを目指す競争を繰り広げます。様々な特殊タイルや分岐する道筋が戦略的なゲームプレイを特徴としています。 主な特徴： - 人間プレイヤー1人 vs CPU対戦相手2人による3人対戦 - サイコロ振りと駒の自動移動機能を備えたインタラクティブな盤面 - 様々な効果を持つ特殊タイル（前進、後退、ターンスキップなど） - 分岐する経路で異なるルートを選択可能 ビジュアル参考: 伝統的な日本の双六盤と、カラフルで家族向けのインターフェースで知られる『マリオパーティ』などの現代デジタルボードゲームから着想を得ています。 スタイルガイド: - カラー: プライマリ #E74C3C (祝祭的な赤)、セカンダリ #F39C12 (黄金色)、アクセント #27AE60 (幸運を呼ぶ緑)、背景 #FDF2E9 (温かみのあるクリーム色)、ボード #8B4513 (木目調の茶色)、テキスト #2C3E50 (濃紺) - デザイン：丸みのある書体／ヒラギノサン書体、伝統的な日本美学に現代的要素を加えたスタイル、経路が明示された円形ボードレイアウト、アニメーション付きサイコロとゲームピース、タッチ操作に適した大型要素を備えたモバイル対応デザイン
特に問題がなさそうなので、このまま「Start chat」を押し、Agent の処理を開始します。
デザイン生成フェーズ
Agent は「Start with design」か「Build the entire app」かを選ばせてくるので、 まずは「Start with design」を選択してみます。
すると Agent がコード生成に取り組みはじめました。
このまま放置してみます。
6 分後、初期デザインのプレビューが表示されました。
ゴールマスに他のマスが被っているのが気になりますね、、、
効果マスがどういうものなのかもわかりにくいです。
「Keep iterating on design」を選択した後、下記の修正指示を送りました。
言語は日本語にしてください。 マス同士で表示がかぶらないようにしてください。 特殊マスにホバーしたらマス効果がわかるようにしてください。
この時点で気になったのが、左上に表示されている「Agent usage（クレジット使用量）」です。
最初の指示だけでも、すでにかなり消費されていました。
Starter（無料）プランでは、この usage が上限に達すると Agent を継続して使えなくなります（月単位でリセットされます）。
今回は上限に到達しないよう注意しながら、作業を進めることにします。
3 分後、修正された UI が表示されました。
指示した内容は反映されましたが、やはりマップのマス位置がまだ少し気になります。
ですが、Agent usage の消費がかなり増えているので、今回は修正は見送ることにします。
「Build functionality」を選択し、機能実装フェーズへ進みます。
機能実装フェーズ
このフェーズでは、Agent がアプリの動作ロジックを実装し、
ブラウザ上でのテストとバグ修正を繰り返して完成度を高めていきます。
今回のすごろくアプリの場合、バックエンドは不要で、
デザインフェーズの時点で基礎的な移動処理やターン進行などのロジックはすでに生成されていました。
そのため、このフェーズではブラウザ上での自動テストのみが実行され、
追加のロジック実装は行われませんでした。
ブラウザテストを行っている様子が確認できます。
3 分後、返答が来ました。
どうやら、テストも完了し、すごろくアプリが完成したようです！
Agent usage もなんとか上限を超えずに済みました。
ちなみに実際に作成されたコードについては、画面右上にあるアイコンをクリックすると表示されます。
完成したすごろくアプリで遊んでみた
すごろくアプリが完成したので、実際に遊んでみました。
実際に動作させてみると、基本的なすごろくとして遊べる状態にはなっていました。
ただし、25 秒付近で表示のバグが発生。
Agent によるテストが通った状態
しかし現実のユーザー操作ではバグが残る
という場面が確認できました。
所感
今回の検証で、いくつか気になった点がありました。
Agent usage（クレジット）の消費が早いこと
Starter プランではクレジット上限が厳しく、デザイン調整だけでも大きく消費されました。
実用的に使うには、有料プランでの運用を検討する必要がありそうです。
自動テストの網羅性が低いこと
Agent 側ではテストが完了したと表示されていましたが、実際に操作すると UI の不具合が発生しました。
ブラウザテストのログを見る限り、確認は 1 プレイ分のみ だったため、網羅性は高くありません。
それでも自然言語だけでここまで生成できるのはすごい
実際に私が与えた指示は以下の程度です。
すごろくを作りたい。cpu含め3人対戦。最初にゴールした人が勝ち。 色々なマスを用意。道順に分岐もあるといい。 言語は日本語にしてください。 マス同士で表示がかぶらないようにしてください。 特殊マスにホバーしたらマス効果がわかるようにしてください。
これだけの文でここまでのものができるというのは、すごいと思います。
もう少し仕様を明確に指示していれば、バグの発生を抑えられたかもしれません。
まとめ
総じて、Replit Agent 3 は「短時間で動くプロトタイプを作りたい」場面では有効だと思います。 ただし今回の検証では、テスト精度に起因する不具合も確認できたため、現時点では人の確認や微調整を併用する前提で使うのが現実的だと考えます。
一方で、「ある程度の時間を任せておくと、勝手に開発とテストを進めてくれる」という方向性そのものは魅力的です。
自律的にここまでやってくれるなら、今後どこまで精度や安定性が上がるのかは、個人的にも追いかけていきたいポイントだと感じました。
