誰でも瞬時にWebアプリが作れる時代へ？Replit Agentで業務アプリの一部機能を試作してみた。

1. はじめに

近年、AI技術の進化により、Webアプリ開発の敷居が大きく下がってきました。
中でも、私が特に注目しているのが「Replit Agent」というツールです。
このツールを使えば、プログラミングの知識が一切ない人でも、Webアプリを作成して公開することが可能です。
実際に私も「Replit Agent」を利用して、自分が担当している業務アプリの一部機能を試作してみました。本記事では、その過程や使用感をまとめて共有したいと思います。

2. Replit Agentとは

概要

Replit Agent とは、フロントエンドからバックエンドまでのコードをAIが自動生成する、AIシステム開発ツールです。
「こんなアプリを作りたい」と指示を出すだけで、AIがコードを書き、アプリの設計から動作までを形にしてくれるツールです。

主な特徴:

• 自然言語で操作: プログラミング知識がなくても、簡単な指示を出すだけでアプリが作れる
• コード自動生成: フロントエンド、バックエンド、データベースのコードをAIが自動で作成
• 迅速なプロトタイプ開発: アイデアをすぐに形にし、デプロイまでをスムーズに実行

Replit Agentは基本的に有料で、月額25ドル（記事執筆時点、2024/12/17）です。本記事も有料版を使用しています。

他ツールとの違い

Replit Agentは、他のAIエージェント（例: v0など）と比較して、バックエンドまでの実装が可能な点が最大の特徴です。例えば、以下のような機能も簡単に実現できます。

• 写真保存機能: データベースを必要とする写真アップロード機能の構築
• ログイン機能: ユーザー認証やアカウント管理機能の追加

利用例: タイピングゲームの作成

Replit Agentに「ランキング機能を持ったタイピングゲームを作って」と指示を出して見ます。

1. 指示入力:
   

2. コード自動生成:
   指定した要件に基づき、フロントエンドやバックエンドのコードが自動生成されます。
   

3. アプリ完成:
   約5～10分で動作するアプリケーションが完成しました。デプロイも非常に簡単です。
   ※エラーが発生する場合もありますが、チャット形式で解決が可能です。
   
   

3. Replit Agentで業務アプリの一部機能を試作してみる

それでは本題の業務アプリケーションの一部機能の試作です。
私が普段開発している「原価管理システム」の一部機能を対象にしています。

i. 要件

今回試作する機能は「部品の金額を設定し、製品に積み上げて計算する機能」です。
以下の要件をもとに開発を進めました。

1. 計算に必要なデータを登録する機能
   • 製品と部品の関係性を登録できる
2. 計算実行する機能
   • 計算を実行するボタンを実装する
3. 計算結果を見る機能
   • 計算結果を画面に表示する機能を実装する

以下の図は実現したい計算のイメージです。

ii. 機能を実装してもらう

まずは、Replit Agentに上記の要件を入力し、機能を自動生成してもらいます。

5分ほど待つと以下の画面が生成されました。

iii. 画面を動かしてみる

実際に機能が動くか確認してみます。

１．データ登録機能
まず、1つ目の要件である製品と部品の関係性を登録する画面を確認します。

※製品の登録

※部品の登録

※製品-部品関係の設定

※登録データの確認

全てのデータが問題なく登録されました。
ただし、現状ではレコードの削除と、登録した製品と部品の関係を参照する機能が実装されていません。

２．計算実行する機能
続いて、2つ目の要件である計算実行する機能を確認します。

問題なく処理が完了しました。

３．計算結果を見る機能
最後に3つ目の要件である計算結果を確認する機能です。

計算結果は期待通りに表示されました。
部品の数量を増やした場合も問題なく実行できました。

iv. 機能を修正してもらう

先ほど作成した画面は概ねの要件は満たされていましたが、以下の機能が未実装でした。

1. レコードを削除する機能
2. 登録した製品と部品の関係性を確認する機能

これらの機能をReplit Agentに修正依頼してみます。

約1分ほどで修正後の画面が完成しました。
どちらの機能も問題なく実装され、正常に動作しました。

1. レコードを削除する機能
   
   

2. 登録した製品と部品の関係性を見る機能
   

4. 所感

結果として、今回実装したいと考えていた機能は全て正常に動作しました。
特に以下の点が印象的でした。

• 短時間で実装可能
  今回のようにシンプルな機能であれば、要件を入力してから5分程度で完成しました。プロトタイプ開発には非常に適していると感じました。

• 操作のシンプルさ
  実装するにあたって、操作で詰まるところがほとんどありませんでした。また、作成されたWebアプリのUIも直感的で使いやすかったです。しかし、まだ日本語には対応していないようなのでそこは及第点だと感じました。

• 課題
  本記事とは別にWebアプリを作成した際に、細かい機能の実装でうまくいかない部分がありました。
  また、チャット形式で修正ができる点は良いですが、上手くエラーを認識してくれないこともあり、自分でコードを書いた方が早いと思うこともありました。
  そのため、難易度の高い処理を実装する場合にプログラミングスキルが依然として重要だと感じました。

5. 最後に

Replit Agentを試してみて、初心者でもWebアプリを作成・公開できる時代が到来していると実感しました。例えば、旅行用にアプリを作り、旅行後に使い捨てるような新しいWebアプリの利用方法も考えられ、AIツールの可能性にワクワクしています。
一方で、よく言われていることではありますが、Replit AgentなどのAIツールを利用するにあたって以下のようなスキルが重要だと感じました

• システムを言語化する力: 要件や仕様をAIに的確に伝える能力
• コードを理解する力: AIが生成したコードを修正・調整するスキル

また、今後は以下のような点についても焦点を当てて記事を書いていけたらと思います。

• パフォーマンス検証: 大量のデータが登録された際の処理速度や負荷テスト
• UI指示の詳細化: 作成される画面のデザインをより細かく指定する方法

この記事が読者の皆さんの参考になれば幸いです。最後までお読みいただき、ありがとうございました。