Zenn
🤖

[Replit Agent] 試してみた感想・つまりポイントなど

2024/11/17に公開
Flask
React
Replit
idea

はじめに

  • Replit AgentというWebサービスのAI開発支援ツールが噂になっていたので、実際に色々と試してみたいと思い触ってみた感想となります。
  • 似たようなので、GitHub Sparkにもすごい期待をしているのですがこちらはまだwaitlist待ちなのでそれまでに参考に利用してみようと思った形です。
  • この記事で記載すること
    • 概要
    • 利用してみた感想
    • やってみての簡単なTIPSなど
  • 記載しないこと
    • 利用方法の詳細：細かい使用方法や始めるまでの流れは、公式サイトや他のWeb上の記事を見てみてください

※Replit Agentはearly accessですし、商用でのご利用などはご自身でご判断ください。

Repit Agentの概要

Replit Agentとは、ReplitというWeb上の開発環境を提供するサービス上で利用できるAIによる開発支援ツールです。
2024年11月現在はearly access状態で、Replitの有料プランに契約をしていれば利用可能です。
詳細な利用料金は今後発表予定ということで、ドキュメントに簡単なプラン想定が書かれています。

実際のイメージ

トップページ 利用中の画面

主な特徴

  • 自然言語によるコード生成: 日本語を含む自然言語でプロンプトを入力するだけで、フロントエンドからバックエンドまでのコード生成
  • フルスタック開発: フロントエンドとバックエンドの両方のコードを生成し、データベースとの自動連携
  • リアルタイムでの開発支援: コーディング中にリアルタイムでエラー修正や最適化を提案
  • 自動デプロイ: 作成したアプリケーションを簡単にデプロイ可能

できること

  • Webアプリケーションの開発。初期、サポートしている技術スタックは下記の3つ
    • React with Express (FULLSTACK_JS)
    • Flask(Python) with Vanilla JavaScript
    • Streamlit
  • コードの確認やユーザーからの変更実施
  • 外部APIやライブラリの統合
  • コードのデバッグ実行と最適化
  • モバイルアプリからの利用

できないこと

  • モバイルアプリ等のWeb外の開発
  • 既存コードのインポート: 現時点ではReplit内で作成したコードのみ使用可能
  • オフライン利用: クラウドベースのツールであるため、インターネット接続が必要

利用イメージ

Agentとはチャットでコミュニケーションしながら、要求のすり合わせと開発・受け入れのストロークを繰り返していきます。
利用してみての役割分け

Agentのコーディング風景などは、 Progress タブに常に流れてきており作業の履歴が見えます。
コーディングが終わると開発環境にデプロイされるので、確認を依頼されます。
要求を出した側なので、受け入れテストですが実際にはエラー内容を見せてほしいなどと言われることもあり、デバッグから受け入れまでをユーザー側で行う形になります。
依頼された確認について、問題ない旨を返信すると次の作業に移り、初期のプロトタイプの開発要求が終わるまで続きます。
開発者と会話しているかのような形で、サービスのプロトタイピングを作成できます。

利用してみての感想

利用体験としては、新卒エンジニアと一緒にライブチャットしながら開発をしているような感覚でスピード感もあり楽しいと思いました。
ただし、要求をして開発~受け入れる際に、要求の仕方に気をつけないとそこまで開発をしてしまうのねというような暴走も感じたりしました。
また、既存の生成サービスとの違いとして、要求から受け入れまで一貫した文脈で実施できるのがやはり大きな違いでした。
（ChatGPTやCopilotでは、要求の壁打ちやコードの生成など個別での依頼はできますが、開発体験としてコードを取り込み・別で試して、フォードバックをしてという形で体験が途切れるため）
要求の出し方の練習にもなるなと思ったので、自分の要求がどう取られるか？とかを見るためにも面白いなと思いました。

とりあえず、永続的に利用するという用途ではまだ難しそうですが、プロトタイプを作るという用途や趣味のセンシティブでないサービスでは有用だなと思いました。

良いと感じた点

  • 要求〜開発〜受け入れ〜デプロイまで一貫して実施できる
  • サービスに必要な基本的な要求を補完してくれる
  • 追加のサービスを良くするための提案を実施してくれる
  • デザインなど指示しなくても、適当にデザインを適用してくれる。React + Exposeの方が今風のMaterial Designっぽい感じにしてくれる。

詰まったポイントなど

  • Replit内のネットワーク解決など、Replit自体の理解が必要
    • FrontとBackendで、内部で2プロセス動かすような場合にはハマる可能性が高い
    • 公式ドキュメントを参考に、ネットワークの設定をする
  • 要求の取り下げやRollbackが難しい
  • Agentから確認依頼について、確認依頼の掘り下げや一定の開発知識が必要

やってみての細かいTIPSなど

  • 日本語で会話する： デフォルトは日本語で送っても英語で返ってくるが、日本語で返してほしいというと日本語になる
  • テストのサポートを依頼できる： 例えばテストデータを作成してほしいや、テスト手順の指示・APIであればcurlコマンドをほしいなど依頼すると教えてくれる。
  • 別の技術スタックで開発する: セション開始後は、指定外の技術スタックへのリファクタリングも依頼できる
    • 例： Flask + Reactなど
  • 小さく始める: 初回のプロトタイプ要求はなるべくシンプルで小さい要求から開始する

Discussion