Replitでバイブコーディング。RAG検索ツール開発で見えた手軽さとコスト

この回のテーマは、ブラウザ上で完結する開発ツール「Replit」を使ったバイブコーディングです。しぶちょーさんは、かねりんさんでも使えるバイブコーディングツールを探す流れの中で、年末年始にReplitを勉強しながら試してきたといいます。

しぶちょーさんがReplitを知ったのは、去年、AGILabというコミュニティの忘年会に二人で参加したときでした。環境構築なしにWebブラウザだけで使えると聞き、かねりんさん向きではないかと考えたそうです。

一方のかねりんさんは、去年の夏ごろにReplitに一度課金したものの、何を作ればいいかわからないまま解約した経験があると明かします。

しぶちょーさんの評価は対照的で、Replitについて「バイブコーディング感が変わるぐらい」すごかったと話しています。

いつもならツールの歴史や開発国から説明するところを、この回ではかねりんさんが退屈しないよう順番を変え、まず完成品を触ってもらうところから始めています。

しぶちょーさんがReplitで作ってきたのは、番組の過去回を検索できるWebアプリ「おちつきAI RAG」です。収録中にかねりんさんへURLとテスト用アカウントが渡され、その場で触ってもらう形で紹介されました。

リスナーも概要欄のリンクからアカウントを登録すれば、同じように使えるようになっています。

かねりんさんが最初に「しぶちょーとかねりんの関係性は」と質問したところ、答えは出ず、思わず「ポンコツじゃん」とこぼす一幕もありました。

おちつきAI RAGの中身について、しぶちょーさんは、深掘り回の文字起こしがすべて入っていて、質問すると二人が番組で話した内容を引用して答える仕組みだと説明します。

工夫したのは出典の見せ方です。回答にはどこで話していたかのソースが表示され、そのリンクを踏むとSpotifyの該当する秒数へそのまま飛べます。

おちつきAI RAGは、文字起こしをファクトとして取り出し、統合して答えるRAGRAG ── Retrieval-Augmented Generationの略。外部データを検索して得た情報をもとに、生成AIが回答を作る手法です。独自データを扱いやすく、根拠付きの回答を出しやすいのが特徴ですの仕組みです。かねりんさんは、NotebookLMに近い使い方だと受け止めています。

しぶちょーさんによると、検索にはベクトル検索ベクトル検索 ── 文章を数値のベクトルに変換し、意味の近さで情報を探す検索方法。同じ単語が含まれていなくても、内容が近い文章を見つけられますを実装しています。単語が一致する箇所ではなく、質問の意味に近い箇所を複数集めて答えます。

番組の文脈でしか答えられない質問にも対応でき、たとえば「かねりんさんがG検定をいつ受けるか」と聞くと、1月と3月の2パターンの発言があると答えたそうです。

ただし、おちつきAI RAGの精度にはまだ改善の余地があると、しぶちょーさん自身が認めています。安いモデルを使っているためハルシネーションもそれなりに起き、元データもSpotifyの自動文字起こしで質が高くありません。

「RAG」がカタカナの「ラグ」で文字起こしされているため、英字の「RAG」では検索にヒットしない、といった例も挙げられました。

このかねりんさんの言葉を受けて、しぶちょーさんは「あの説明どこでやってたっけ？」がわからないポッドキャストの検索性の低さを解決するプラットフォームとして作ったと説明しています。

おちつきAI RAGの開発費について、しぶちょーさんは最初、使った額を「怖くて見てない」と答えます。Replitは月額25ドルで25ドル分使える課金体系で、クレジットではなくドルで消費額が表示されるそうです。

月額25ドルでは全然足りず、しぶちょーさんは追加で100ドルを入れてあると話しています。

さらに、おちつきAI RAGは検索のたびにAPIの料金がかかります。しぶちょーさんは課金の安いOpenAIの小型モデルを選んでいます。

DeepSeekにしなかった理由については、中国のAIを使う場合の表記ルールがあり、何も言わずに裏で動かすのは「ちょっといやらしい」と感じたためだと語っています。

誰でもログインなしで使える形にしたかったものの、制限をかけられないとAPIの課金が一気に上がるため、ひとまずログイン制にしたそうです。1日あたりの回数制限をかけられる仕組みも用意し、上限を超えるとサイトが止まるだけで破産はしないと説明しています。

おちつきAI RAGの制作期間について、しぶちょーさんは先週の金曜日に思いつき、ちょくちょく進めて4日ほどかかったと話します。エージェントが30分ほど自動で動く間は別のことをしていたため、自分が実際に手を動かしたのは2時間もないくらいかもしれないといいます。

ただし、RAGの仕組みを理解せずにいきなり作れたかというと難しかったとも述べています。何が必要かという要件をある程度わかったうえで指示したからこそ形になった、という見立てです。

しぶちょーさんが最も介入したのは最初の要件定義でした。検索結果に秒数が出てSpotifyへ飛べる仕組みを作りたかったため、その実現方法を具体的に指示しています。

Replitに直接相談しなかったのは、クレジットを消費しそうだったからだそうです。デプロイ時のエラー対応について、しぶちょーさんは中身がわからないまま「ボタン押し係」をしていたと笑います。

RAGは裏にデータベースを持つ必要があり、本来は難しいといいます。それがデプロイ操作ひとつで公開までできたことに、しぶちょーさんは「ここまで実装できるとは思わなかった」と驚いています。

Replitの特徴について、しぶちょーさんはまず「Webで完結すること」を挙げます。Replitはアメリカの会社のツールで、2016年に会社ができ、2018年にバージョン1が公開されました。ミッションは10億人のソフトウェアクリエイターをオンラインに、というものだそうです。

かねりんさんが「AIブームの全然前じゃん」と驚くと、しぶちょーさんは、ReplitはもともとクラウドIDEクラウドIDE ── 統合開発環境（IDE）をクラウド上で提供する形態。端末やOSに依存せず、同じ環境にどこからでもアクセスできます、つまりセットアップ不要の開発環境として公開されたものだと説明します。

プログラミングでは本来、自分のパソコンに環境を構築する必要があります。ソフト同士のバージョンの相性をミスると詰んでしまい、初心者が最初に環境構築でつまずくのは「あるある」だといいます。

人によって環境が違うとプログラムが動かないため、パソコンの中にもう1台パソコンを作るような仮想環境や、DockerDocker ── アプリをコンテナと呼ばれる独立した環境にまとめて動かすツール。誰のパソコンでも同じ条件で開発・実行しやすくなりますが使われますが、それを用意するのも手間です。

Replitはこうした手間をなくし、50種類以上の言語やフレームワークに対応した環境をオンライン上に用意しています。リアルタイムの共同編集や、ワンクリックデプロイワンクリックデプロイ ── 作成したアプリを最小限の操作で公開できる仕組み。インフラの知識がなくても成果物をすぐ共有できますもでき、スマホからも触れるといいます。

Replitは、AIの流行を受けてReplitエージェントを提供し始めました。エージェントに言葉で指示すれば、フロントエンドからバックエンド、データベース、認証までを統合したアプリを作れます。

Replitエージェントの動きについて、しぶちょーさんはManusに似ていると話します。20〜30分は平気で一人で動き、最大200分自律駆動できるといいます。性能が高く、ほぼミスをしない点も評価しています。

かねりんさんが以前から気にしていたのは、バイブコーディングで作ったものは裏でセキュリティ対策ができていないのではないか、という点です。これに対してしぶちょーさんは、Replitは既存の信頼できるフレームワークをしっかり選んで使ってくると答えます。

たとえば月額課金を実装する場合でも、決済サービスのStripeStripe ── オンライン決済を提供する海外の決済サービス。Webサービスにクレジットカード決済などを組み込む際に広く使われていますとの連携が、セキュリティを確保した部品として用意されているといいます。

さらに、セキュリティ要件の甘い箇所を精査するボタンがあり、リスクの度合いや修正案が一覧で表示されるそうです。しぶちょーさんは、中身まで確認したわけではないと断ったうえで、良さそうな感じはすると話しています。

しぶちょーさんは、お金を取れる仕組みまで作れるとしつつ、注意点も挙げています。

自分一人でRAGを作れるエンジニアだと勘違いさせられる、という意味です。一方で、作ったものはGitHubGitHub ── ソースコードを保存・共有・共同管理するためのプラットフォーム。別のツールでの編集にもつなげやすくなりますに上げて別のツールで手直しすることもでき、初心者から玄人まで使いやすいといいます。

会社のWebサイトくらいならReplitでもManusでもすぐ作れ、修正も自分でコードを直すかReplitに頼めば済むといいます。ただ、しぶちょーさんが怖いと感じているのが、Replitではお金をコントロールしづらいことです。

しぶちょーさんは、AGILabの佐藤さんが書いた本を教科書通りに進めていたところ、半分ほどのページで月の25ドル分を使い切り、追加課金したそうです。

エージェントには4段階のレベルがあり、しぶちょーさんはレベル3を使っています。自律的に判断してどんどん進めてくれる一方で、課金はゴリゴリ減っていくといいます。

デプロイして公開しておくだけでも料金がかかります。データベースやAPI、検索処理のためにReplitからコンピューティングリソースを借りているからです。上限は設定できるものの、ちゃんと機能するか「ソワソワする」と話しています。

かねりんさんも、Manusのトライアル中にクレジットがほとんど付与されず、結局課金したと明かします。Manusのワイドリサーチでは、消費見積もりが500〜1500と出たのに実際は100程度だった、というやりとりもありました。

ManusとReplitの違いについて、しぶちょーさんは、RAGのようなものはManusでは難しいのではないかと推測しています。Replitは仮想マシンを立ち上げ、アクセスが増えたときに瞬時にリソースを増やすスケーリングもできるからです。

スケーリングのような機能は本来、Microsoft AzureやAWSといったパブリッククラウドで提供されるものです。本番のサービスを作るなら、自分で環境を構築し、仮想マシンを立ち上げ、デプロイして公開する必要があり、とても大変だといいます。

かねりんさんは以前Azureを勉強して使ったとき、何十万円もの請求が来たと明かします。しぶちょーさんも、Azureは従量課金で、設定を誤ると1週間で十数万円になることが平気であると話しています。

デメリットとしてしぶちょーさんが挙げたのは、料金が少し高いこと、日本語対応が弱いこと、日本ではまだ情報が多くないことです。そのうえで、佐藤さんの本『Vibe Codingで楽しく作る！ Replitではじめる本格Webアプリケーション開発』を入門に勧めています。

佐藤さんの本は9月ごろに出たばかりですが、しぶちょーさんが実際に進めると、すでにUIが違っていたそうです。特に驚いたのが2か所でした。

1つ目はAPIキーの設定です。本では自分でOpenAIなどのAPIキーを発行してReplitに渡す手順でしたが、設定しなくても完成してしまいました。調べると、Replit側がAPIを肩代わりして使わせ、Replitのクレジットから引く機能が追加されていました。

2つ目はStripeです。本来はStripe側とReplit側の2つの設定が必要なはずが、Stripe側の設定なしに動いたといいます。ReplitでStripeを自動連携できるようになったというニュースが出ていたそうです。

しぶちょーさんは、公開しても自分にダメージがないレベルのセキュリティが担保されたWebサービスなら十分作れると感じ、今後も使っていきたいと話しています。

しぶちょーさんが次に作りたいのは、ポッドキャスター向けのアプリ「AIおたよりん」です。自分の配信回を入力すると、AIがその回に対するお便りをくれるという構想です。

ポッドキャスターは自分の放送を客観的に振り返る機会が意外とない、というのがしぶちょーさんの問題意識です。誹謗中傷ではない辛辣なアドバイスをくれる「アンチ」が時々来る仕掛けがあれば、何度も試したくなるのではないかと話しています。

ただ、Spotifyの音源を勝手に文字起こしに使えないなど規約の問題があり、いったん保留にしているそうです。RSSからMP3を取ってくる方法はあるものの、利用者にRSSのアドレスを渡してもらうのは面倒だと考えています。

しぶちょーさんは、一から実装を学べば数か月はかかるところを、先に形にしてから直したい部分を学ぶ方法も成り立つと感じたといいます。そこから、バイブコーディングは学びを加速させると話しています。

おちつきAI RAGの実際のエージェント費用を収録中に確認すると、50ドルほどで、1万円はかかっていないかもしれないという結果でした。デプロイ費用は公開直後のため0.12ドルほどで、今後の運用で見ていくそうです。

番組公式のWebサイトは、かねりんさんが作ってみることになりました。動きのない静的サイトならManusでも十分できると、しぶちょーさんは話します。

しぶちょーさん自身も、趣味のビジュアル系バンドのホームページをManusで15分ほどで作り、独自ドメインを取って公開したそうです。メンバーにも喜ばれたといいます。

Manusで公開したサイトの維持コストについて、しぶちょーさんは調べても出てこず、かからないようだとしつつ、確証はないと話しています。Manus本人に聞いても「かかりません」と答えるものの、AIは自分のことを一番知らないので信用できないとも言います。

ポッドキャストのホームページに何を載せるべきかについて、二人は答えを探ります。しぶちょーさんは、聴くのは各プラットフォームでよいのでリンクがあれば十分で、切り抜きのダイジェストはポッドキャストでは価値が出しにくいと考えています。

しぶちょーさんが強調したのは、ポッドキャストを知らない人に何を見せるかの難しさです。YouTubeでは再生数が見えてしまい、20再生程度では聴く気にならないといいます。

かねりんさんは、佐久間宣行さんのテレビ局が作ったようなおしゃれなサイトを見て、局がやっているかのような「ゴリゴリ感」がいいと話します。二人は、見た目のかっこよさを重視したサイトをManusで試すことにしました。

しぶちょーさんは、画像生成を担うnanobananaが複数のエージェントで一気に動く点から、ホームページ作りはReplitよりManusの方が得意ではないかと見ています。

回の締めくくりに、しぶちょーさんは、お金さえあればReplitはいくらでも使えるとしつつ、コストの面で懸念も口にしています。

最後に、おちつきAI RAGはまだ作り込みが足りず精度に課題があるとしたうえで、ぜひ触って意見や欲しい機能を寄せてほしいと呼びかけています。

まとめ

しぶちょーさんがReplitで作ったおちつきAI RAGは、過去回の発言を意味で検索し、Spotifyの該当秒数へ飛べるツールです。環境構築やデプロイの手間がほぼ消えた一方で、要件を考える力や、見えにくいコストへの注意は引き続き必要だと語られました。

• Replitはセットアップ不要の開発環境という土台の上にAIエージェントが加わったツールで、データベースを持つRAGまで作れる
• おちつきAI RAGは実働2時間足らずで完成し、要件定義だけはChatGPTと相談して丁寧に作った
• StripeやAPIの連携、セキュリティチェックが組み込まれ、本の手順より先に進化している
• 月額25ドルでは足りず、公開中もリソース費用がかかるなど、お金のコントロールには注意が必要
• 静的なホームページならManusでも手軽に作れ、次はかねりんさんが番組サイト作りに挑む