Zenn
👋

Replit Agentの解説とハンズオン形式での検証【システム生成AI】

2024/11/16に公開
AI
React
Express
Replit
LLM
tech

初めまして。株式会社CAENの大森と申します。
普段はLLMフル活用のAI駆動開発手法を研究しながら、WEBサービスやモバイルアプリの個人開発を行なっております。

今回は、先日発表された「Replit Agent」を実際に触って性能や何ができるのかを検証していきます。

Replit Agentとは？

「Replit Agent」は、Replitという総合開発環境から枝葉が分かれたシステム生成AIです。

ReplitAgentでは、以下のようなことが出来ます。

  • チャット欄で伝えた要件に基づき自律的に実装を行う
  • 開発物をプレビューを通して視覚的にデバッグ可能
  • バックエンドやインフラも用意されてあり容易に連携が出来る
  • そのままデプロイまでできる

今回はそんなReplitAgentの解説と、実際にReplitAgentを操作しながらデプロイまで行うハンズオンを行います。

そもそもシステム生成AIとは？

システム生成AIとは、AIが半自動的にプロジェクトを立ち上げてコードを生成し、ディレクトリやファイルを適宜作成修正を繰り返す中でシステム全体を開発するAIサービスです。

多くのシステムAIサービスでは、生成したシステムのプレビューもサービスの中で確認できることが多いです。なので、私たちはプレビュー画面でアプリを触り、エンドユーザー的に不具合や齟齬を伝えるだけでAIが実装内容を適宜修正改善をしていきます。
極端な話、私たちは一行もコードを書かずにシステムを組むことも可能です。

このようなシステム生成AIサービスは現在、群雄割拠で日夜様々なサービスが登場し、アップデートを繰り返し、先週までは一番良いとされていたサービスが次の週にはオワコンなんてことも起こっています。

ReplitAgent以外のシステム生成AI

（私調べですが）現在主力なシステム生成AIサービスにはReplitAgentの他に「Bolt.new」「create.xyz」「GPT-Engineer」があります。

これらはどれも以下の特徴を持っています。

  • 自然言語でAIが自律的にプロジェクトを作成
  • プレビューで視覚的にデバッグが可能

また、中にはバックエンドやインフラをサービス側が担ってくれるものもあり、「create.xyz」と「Replit Agent」がそれに当たります。

バックエンドやインフラまでできるとそのシステム生成AIサービスだけでシステム開発が完結するため、特に非エンジニアの方やMVPの迅速な開発にとっては大変心強い仕様だと思います。

一方、特定のサービスに大きく依存してしまい動きづらくなるベンダーロックイン問題や、自由度の低さから自由にコードに介入できないため逆にエラーが解決しづらいなど、自由度が低いことによるデメリットも存在します。

Replit Agentのバックエンド・インフラ事情

ReplitAgentは、コード生成だけではなくバックエンドやインフラもReplit内で行うことができます。
現在は以下のものに対応をしています。

  • データベース（PostgreSQL）
  • ストレージ
  • 認証
  • デプロイ・ホスティング
  • 環境変数の保管
  • Gitとの連携
  • 外部サービスとの連携（OpenAIなどのAIサービスや、Slack,stripeなど）

Replit Agentで使える言語とフレームワーク

2024年11月16日現在、ReplitAgentは以下の言語とフレームワークにのみ対応をしています。

対応している言語とフレームワーク

FULLSTACK_JS
フロントエンド: React
バックエンド: Express.js
スタイリング: Tailwind CSS, Shadcn UI

FLASK_VANILLA_JS
バックエンド: Flask (Python)
フロントエンド: バニラJavaScript
スタイリング: Bootstrap

STREAMLIT
Python/Streamlitを使用した単一アプリケーション
データ分析・可視化に最適
データベースは PostgreSQL のみサポートしています。

使用できないもの

また、以下のフレームワークやツールは現在ブロックされており使用できません
(個人的にAI駆動開発時代のメインフレームワークはNext.jsだと思っているので、対応していないのがイマイチ...)

  • MySQL, SQLite, MongoDB
  • Next.js, Django, Laravel, Spring Boot, ASP.NET Core
  • Docker, Kubernetes
  • モバイル開発フレームワーク（React Native, Flutter等）

ReplitAgentの使い方と使用料金

現在Replit Agentは、月額$25の有料プランであるReplit Coreユーザーにのみ解放されています。

ReplitCoreユーザーは、以下の方法でReplitAgentを使えます。

Replit Agentでのシステム開発ハンズオン

ここからは、実際にReplit Agentを使って、簡易的なシステム開発をハンズオン的に行なっていきます。
（今回はMacbookにインストールしたReplitアプリで操作しています。）

1. ReplitAgentに作りたいものを説明

ReplitAgentで開発を始めるためには、まず最初にReplitAgentにどのようなものを作りたいかをAIに伝える必要があります。

今回は以下のような命令をしました。

ReplitAgentでのシステム開発をハンズオン形式で検証しようとしています。シンプルなTODOアプリをReact+Expressの構成で作ってください。

2. ReplitAgentからの要件の整理と追加提案

私が伝えた要件に対して、ReplitAgentから簡単な要件の整理と追加開発の提案が返ってきます。

TODOアプリの作成を開始します。React+Expressスタックを使用して、タスクの作成、完了、削除などの基本的な機能を実装します。シンプルでモダンなUIを目指します。実装を進めてよろしいでしょうか？

  • タスクのカテゴリの追加
  • タスクの期日を実装
  • タスクの優先度の実装

ここでさらに仕様を詰めることも出来ますし、追加開発の提案に賛成すればチェックをつけるだけで要件に追加してくれます。

今回はハンズオンなのでReplitAgentの追加提案は全て受け入れずそのまま進めることにします。
ですので、どれにもチェックを入れずに「Approve plan & start」ボタンを押します。

3. 開発フェーズ

3.1. ReplitAgentの自律開発

開発がスタートすると、以下の画像のようなIDE画面に移り変わり、AIが開発を始め、ゴリゴリコードを書いていきます。

3.2. ReplitAgentからのデバッグ要求

プレビューできる段階まで開発が完了すると、ReplitAgentはコード生成を中断し、ユーザーに対して、「できたものをデバッグで確認して欲しい」という要求を行います。

次の項目をテストしてくれますか？

  1. 新しいタスクを追加する
  2. 完了マークをつける
  3. 削除する
    また、全体的にユーザー体験はどうですか？

では、プレビュー画面で確認してみます。

  • 新しいタスクを追加する
  • 完了マークをつける
  • 削除する

どれも問題なく動作しましたね！

全体的なユーザー体験についても、shadcn/uiを使用したミニマムなUIデザインがされており、トーストによるフィードバックもありました。

では、問題なかったのでその旨をReplitAgentに伝えます。

すると、出来上がったものをデプロイするかと聞かれました。
せっかくなのでデプロイしてみましょう。

3.3. ReplitAgentでデプロイ・ホスティング

ReplitAgentでは、出来上がったものをそのままデプロイ・ホスティングすることが出来ます。

先ほどのチャットの中にあった「Deploy」ボタンを押すと、デプロイ用のタブが開きます。

Replitでは4つのデプロイ方式があり、それぞれ料金も異なるので目的に合わせたデプロイ方式を選ぶことが重要です。

ReplitAgentの4種のデプロイ方式
  1. Reserved VM
  • 仕組み：特定の仮想マシン（VM）を予約して、常時稼働させるデプロイメント方式。
  • 性能：サーバーが常に稼働しているため、起動遅延がなく、パフォーマンスが安定している。
  • 適したシステム：企業内の業務システムやデータベースサーバーなど、安定した稼働が求められる場合。
  • 料金：月額$7から
  1. Autoscale
  • 仕組み：トラフィックの増減に応じて自動的にインスタンス数を調整する。
  • 性能：需要に応じてスケールアップ・スケールダウンするため、アクセスの急増にも対応可能です。
  • 適したシステム：アクセスが不規則なウェブアプリケーションやAPIサービスなど、トラフィックの変動が大きいシステム。
  • 料金：使用量に応じた従量課金制で、1秒あたり$0.000024から
  1. Static
  • 仕組み：静的なウェブサイトやフロントエンドアプリケーションをホスティングする方式。
  • 性能：サーバーサイドの処理が不要なため、迅速なデプロイと低コスト運用が可能。
  • 適したシステム：企業のコーポレートサイトや個人のポートフォリオサイトなど、静的コンテンツを提供するもの。
  • 料金：基本無料。アウトバウンドデータ転送のみが課金対象。
  1. Scheduled
  • 仕組み：特定の時間や間隔でアプリケーションを自動的に実行するデプロイメント方式。
  • 性能：定期的なタスクやバッチ処理を自動化する。
  • 適したシステム：定期的なデータバックアップやバッチ処理など、スケジュールに基づいて実行されるタスク。
  • 料金：スケジュールされたデプロイメントごとに月額$0.10＋実行時間に応じて1秒あたり$0.000028が課金。

今回は検証目的なので、使用量が少なければ料金も少なく抑えられる「Autoscale」方式を採用してみます。

仮想マシンの性能を設定できるようです。
今回は検証用なので全ての項目を最低値に設定します。
「Approve and configure build settigns」ボタンを押して次に進みます。

この画面ではドメインやビルドコマンドを設定できます。
何も変更せずに「Deploy」ボタンを押します。

デプロイが進行

7分後、デプロイが終わりこのような画面になりました。

実際にURLで確認してみます。

プレビューで確認した挙動と同じく簡単なTODOアプリとして動作します。
また、Replit組み込みのPostgreSQLにデータが保管されているため、ページをリロードしても、ブラウザを変えてもデータが永続化しています。

これで、ReplitAgentでのシステム生成の簡単な流れを追うことが出来ました。

おまけ：Replit Agentの良いところとイマイチなところの個人的感想

良いところ

  • バージョン管理がされており、簡単にロールバックができる
  • 特定のファイルや特定のコードを指定して、AIに説明させることができる
  • プロンプトエンハンスをしてくれる
  • 外部サービスとの連携がIntegrationとして用意されてある（stripeやopenai）
  • https対応（勝手にやってくれる）
  • ドメインも独自ドメインに変更できる
  • 環境変数をファイルではなくReplitのシステムで保持してくれる

イマイチなところ

  • Next.jsに対応していない
  • 既存プロジェクトから開発を始められない
  • ベンダーロックイン問題
  • 実装済みの部分が破壊されることがあるとかないとか
  • 認証機能周りの実装に難があるとかないとか
  • redditでちょっと燃えてる...???

おわりに

今回の記事では、ReplitAgentについてどのようなツールなのか、どのようなことができるかをハンズオン形式で解説しました。

AIツールで一番大切なのは「とりあえず触ってみる！」です。

触ってみると、「こういうことならReplitAgentに任せよう」とか「開発のこの部分はv0を使おう」とか、「ここからはローカルに落としてCursorで開発しよう」とかとか、だんだん手札が増えてきます。

「どんな手札があるか」「そのカードは何に使えるか」これを考えるのは実はとっても柔軟な頭が必要だと思ってます。AIを使いこなすIQ「AIQ」が試されます。

今後もさらにAI技術の進歩とAIツールの性能の向上が起こります、おそらく「開発」の定義も大きく変わってきます。その中で「僕たちはどう（AIと）生きるか」をクレバーに考え、乗りこなしていく必要があるな、と私は思っています。

私は普段、WEBサービスやモバイルアプリの自社開発・運営を行っております。
特にAI駆動の開発を採用して、個人規模で高品質かつ高速なプロダクト開発ができるように、日々活動をしています。

よろしければXアカウントのフォローをお願い致します。

Discussion