バイブコーディングの紹介
はい、シゴクリラジオ大橋です。よろしくお願い致します。このシゴクリラジオは、パーソナリティである私、仕事クリエイター大橋が、仕事づくりに関して話をしていく番組となっています。
今回はですね、バイブコーディングということで、聞き慣れない方もいらっしゃるかもしれませんが、一般的というか、意味としては
日本語でですね、ネイティブですね。 日本人の方だったらって感じですけど、日本語で
こんなゲームを作ってくださいとか、こんなアプリを作ってくださいって指示を入れます。そうするとAIが作ってくれます。
コーディングもやってくれるし、若干手続きはいるんですが、テストということで実際に動かすって、本当に動くかも検証してくれたり、
そういったこともやってくれるAIを使った、AI駆動開発とかAI開発と言ったりするんですが、AIを使った開発みたいなことをバイブコーディングと言ったりします。
Gemini APIの利用
そのバイブコーディングを、僕自身もWebSim AIというのは、このラジオでもずっと言ってきてるんですけど、それでもできます。
ブラウザーでアクセスして、WebSim.comですかね、アクセスして、登録はいいりますね。登録は必要ですが無料登録できて、それで日本語を入れると作ってくれると。
Webなんで、本当に画面が出てくると。そういうのがあります。だけでなく開発者ですね、いわゆるITエンジニアとか、ちょっと専門的になったり、
あとは、そうですね、突っ込んだものとか、WebSimというのはテストとかは多分できない気がしますが、やり方がもしかしたらあるかもしれませんが、それでAPIですね。
要はAPIというのをもうちょっと簡単に説明すると、例えばAIを使いますといっても、AIっていろいろ種類があります。
いわゆるLLMと、大規模か大規模かわかりませんが、大規模言語モデルというものがありまして、例えばChatGPTだったらChatGPT 5.2とか、Googleだったらジェミニフラッシュとか、プロとか、
クロードというアンソニックフィクションのものだったら、ソネットというものかなとか、様々なAIですね。LLMという、まあAIでいいんですけど、が選べるんですね、モデルですね。
だから同じ会社でも違うわけですね。ChatGPTでも様々なものがある。オープンAI社が出しているLLMでもいろいろあると。
なので、本当に様々です。だからそれが性能が良かったりすればお金がかかるし、あんまり性能がそんなに良くなかったら、あんまりお金がかからないです。
今、お金がかかるかからないと言っているのは、APIという、これはアプリケーションプログラミングインターフェースだったかな。
要はキーを入れると、文字列みたいなのがあるんですが、それを入れるとアプリケーションからアクセスするんです。
つまり、開発者とか技術者の人だったら分かるんですが、そうじゃない方向けに簡単に言えば、専用の開発というかコーディングというか、プログラムを作るエディターと言いますか、メモ帳みたいなやつがあるんですね。
メモ帳はテキストエディターと言われているんですが、そこでチャットができるんです。
チャットをして、AIにモデルとか指示して、APIキーという鍵を入れてやると、そこから使えるんです。
ちょっと難しいかもしれないですけど、専用の開発エディター、ツールからLLMというのを選ぶことで、それぞれのオープンAI社とかGoogleとかAzure Big社という、それぞれがAIを提供しているところのAPIというのの料金が決まっていますので、それに基づいて課金されるという感じです。
課金というのはどれくらいかというと、一概に言えないんですけど、たぶんJminiのFlashという本当に速いもので、そこまで推論とかものすごく試行はできないんですけど、それだったら見た感じでは、1ドル未満で100万トークン。
つまり100万トークンというのは漢字で3トークンとか言えることもあるので、日本語だとね。厳密には100万文字ではないんですけど、例えば30万から50万文字ぐらいはたぶん使えると。
30万から50万文字で何かというと、そのまま文字数です。プログラミングでとか日本語の入力とか、日本語自体をコードに書いたりとか、説明するとか、出力入力ですよね。
AIが作ってくれるコードでもそうですし、AIにそれを入力して読み込んでというのはどんどんかかってくるので、30万文字とか50万文字とか全然使わないよという文字を打つわけじゃないんですけど、でも1命令に1000文字読ませるとか1000行とかどんどん大きくなっていったらめちゃくちゃかかると思うので、結構あっという間に100万トークンって使うかもしれません。
だけど本当にちょこちょこと小さいものを作るのであればいらないかもしれないです。
ごめんなさいちょっと長くなりましたけど、WebSim AIというのは本当にブラウザ上で日本語を入れて修正していくというだけだったんです。チャットでね。
もう当然LLMによっては有料なので、プランに入らなきゃいけないので、やってることはそんなに本質的には変わらないんですけど、今回VS Codeというこれはさっき言ってた開発環境の専用のツール、技術者の人だったら大体知っているようなものなんですが、Windowsとかいろいろあるんですが、
そこにですね、ローコードかルーコードかわかりませんが、ROXODというものがあって、これはクラインというもののツールなのかな、わかりませんが、それをVS Codeの拡張機能というのもあって、要はVS Code上でできると。
開発ツールのところにそういうクロームとかの拡張機能みたいなのがあったりする、わかる方もいらっしゃるかもしれませんが、要はオプションみたいな感じで追加で入れてプラグインってやつですね。入れて使うとできると。
VS Codeというのは僕も使ってるんで、それで遊んでみようというわけで、若干出落ちというか、遊んでみたって言うんですけど、結論的には無料枠しか使ってないんで、有料枠はちょっとやってないです。
ただ、無料枠はほとんど使えませんっていう話を今回ネタとして簡単に話して終わりたいと思います。というわけで、Vive Coding無料枠でやってみたというので、興味あれば聞いてみてください。
特に別にすごいことやってるわけじゃないんで、どんな感じでやったかをなんとか音声で伝えていきたいと思います。では今回もどうぞよろしくお願いいたします。
シゴクリラジオ大橋です。今回Vive Codingをやってみた。特にVS Codeというものですね。開発環境にローコードかルーコードか、ごめんなさい、ROCODEというプラグインを入れてやってみました。
でですね、LLMですね。AIは何を使ったかと言ったら、AIはGoogleのGeminiです。Gemini Flashという一番軽いというか、安いというか。安いから頭悪いってわけじゃないですけど、レスポンスも早くて使いやすい。
ちなみにですね、これGeminiを普通に無料登録じゃなくて、有料化じゃなくても全然制限とか、めちゃくちゃたくさんやったらダメなんですけど、使えるとは思うんで、そのあたりですね、AI使ってる人はご存知かもしれないです。有料になると制限が緩くなる気がします。
ゲーム制作の過程
で、GeminiのFlashをやりました。何をやったかというと、最近クイズゲームって言ってたんで、具体的な抽象はすでに作ってあるんで、それをいじるわけじゃなくて、マデアルゲームっていう謎のゲームを作りました。
マデアルというのは何かというと、日本語で何々まであるというところがあります。例が難しいんですけど、今ちょっと炭酸飲んで喋ってますけど、例えばコンビニに炭酸だけじゃなくて、変わった海外のビールまであるみたいな。
で、その場合のコンビニに変わったビールまであるみたいな。あるかもしれないしないかもしれないですけど、あったとして、その範囲ですよね。幅広いコンビニの品ぞれについて言っているっていうのにマデアル。
で、このマデアルというのは、飲み物としての炭酸から海外の貴重なビールまで、レアなビールまでという範囲を言ってますよね。だから女同士なのかわかりませんが、女子なのかね。ちょっとそのあたりはごめんなさい。詳しくないですが、マデっていうのと、あるというのは実際に存在する飲み物があるということですね。品ぞれを指しています。
で、そういうマデアルっていう意味と、強調ですよね。極端に言いたいと。例えば、目の前に漫画があるんですが、ちょっと読まなきゃいけないんですけど、漫画があったときに、その漫画が自分の中で過去一とか一番良かったマデアルみたいな。わかります?
要は、このシリーズがあって、漫画。何でもいいですけど、漫画をシリーズを読んでて、例えばスポーツ漫画があって、特定のスポーツ漫画があったときに、その漫画は自分の中では過去一番まであるみたいな言い方なんですね。
例えば、つまり、それぐらいすごいよっていう過言でもない言っても、過去一番と言っても過言ではないぐらいのニュアンスというか意味合いです。伝わりますか?っていうところが、別に新しい言葉というか、ネットスラング化まではわかりませんが、過言でもないと言えばいいじゃないっていう人もいらっしゃると思うんですけど、そういう言葉なんで。
僕の個人的な意見では、ものすごくこのマデアルが好きで、全く逆のことを言って何々まであると。この四国ラジオではちょっとわかりづらいと思うんで言ってないと思いますが、もしかしたらマデアルで検索したら出てくるかもしれません。
このマデアルっていうのを用いて、今言った強調とか極端な話と範囲ですよね。本当に何々まであるっていうような意味で例題を作ってもらいますクイズですね。それがどっちの意味ですか?推測強調したいのか、それとも範囲を指しているだけなのか。
両方はわかんないですけど、変化もしてね。何々するまであったとかだったらまたわかりづらいじゃないですか。活用系ね。変化ですね。
っていうのを出してもらって、そういうのをAIに指示しました。それで作ってくださいっていうのを目指しました。結論的には使用書みたいなのを作るんですね。リードミーMDファイルみたいな。
MDはマークダウンだと思いますが、このゲームの全部で5問ですとか、毎回質問する回答が選べます。それを選んで正解を選びます。最後に結果が出ますという評価ですね。
全問正解したらもう一回やるというのをやらせて、それでリードミーMDファイルというのが使用書ができるので、それに対してどういう流れかというと、指示したらそのままできてポンと出てくるのではなく、この場合はAPIを使っているというのと、ルーコードというものを使っているという使用というか動きになると思うんですが、
戻ってきたらそれを計画MDファイルというのが使用書ができているので、それに対してOKとか拒否するというのは選べるんですね。OKしたらその通りにAIが作ってくれると。それはその通りに本当に作ってくれるか確認しなきゃいけないですけど、今度はそれを計画というか実行しますということで、
例えばWebであればインデックスHTMLとかのHTMLファイルとか、CSSというデザインのファイルとか、JSは今回なかった気がしますけど、そういうふうにファイルを実際に作ってくれます。ファイルというのがまさにコーディングと今まで言っているもので、インデックスHTMLの中に実際のコードを書いてくれます。これは僕が書くんじゃなくてAIが書いてくれます。
CSSというのは例えば文字の位置がどうで、第一問というのは大きくして問いも大きくするとか、次の問題Aというのはこういうボタンみたいな表示がいい選択というのはこういう丸型の方がいいみたいなのが書かれているんですね。もしくはそれを最初にお任せで言っているのでそれを書いてくれます。自動的に。それに対して承認する。それを繰り返していく感じです。
ここで無料枠という話をしているんですけど、ジェミニのAPIというのは無料で1回は使えます。1回というか数回は使える。正確には数回だと思います。20回分ぐらいみたいなのがちょっとあったと思ったんですけど、20回とかでもなく1回計画OKで1回だし、次にもう1回やったらダメですよみたいな感じになるんで。
要はゲームができたんだけど、ちょっとこれ最初は間であるっていうのすら把握できてなかったんで、要は問いに間であるという例文にもなかったんですよ。だから修正してじゃあもう1回お願いしますって言って、じゃあお願いしますって言ってやったら一応間であるっていうのが出てきて、一応苦しいけどゲームとしては成立している。ちょっと見た目もあまり良くないですけど。
geminiAPIの制限
っていうのをやって、じゃあもうちょっと修正していくぞと。バイオコーディングするぞみたいなのを持ったら、すぐに無料のAPIのキーなんで制限がかかりましたと。リクエストエラーというのがありまして、要は投げても何も起きないんですよ。それがいわゆる制限ってやつですね。
どうも1分間とか限られた時間の中で何度もリクエストを出すというのが良くないと。それが負荷がかかるわけですね。そこが良くないんですよ。
コーディングとかプログラミングということをもしご存じない方向けにしゃべるんですけど、1回で5分とか3分で1回っていうことは多分ないと思ってて、なぜなら指示をしますよね。これを修正してくださいって言ったら、見た瞬間にじゃあまであるっていうのを入れたいから、まであるっていうのは必ず出るようにしてくださいみたいな文章、プロンプトを入れて送ると。
そうするとその時間って3分の動きもいらないわけですよ。かなりかかりますよね。だからすぐ入れるとまたAIに負荷がかかるんで、何度も何度もそれを1分間の中に何度も何度もやるっていうのが負荷がかかるんで、それを無料枠では制限されているってことですね。
故にこれは実質、プロだったり技術者、ITエンジニアの人が使うには使えないってなるんで、だからLLMとかその有料プランを特にAPI課金っていうのは無料枠ってほとんどなくて、課金されて使ってるっていう方が多いわけですね。
それはさっき言った安いものであれば1ドル未満で100万トークンとかになるんですけど、そういうロンモデルになっていくともっとすごい高いんで、1回やったら1ドルかかるとかもあるかもしれないんで、それは気をつけてくださいと。
一応ローコードっていうか別コードの拡張では概算が見えるんで、そうなんだこれぐらいかかるんだ、今やったところで別に0.1ドルとか0.01ドルか1.5円とか日本円で言えばそれもかかってないレベルですよね、最初のちょこちょこだったり。
でもそれは無料枠で体験で、こんな感じで動くのでで終わりです。だから結論的にはちょっと長くなりましたけど、無料枠ではほとんど使えないんで。それをやってみて面白いなと思ったんで、課金してもいいんですけど、掃除上げとかの話と一緒で課金が止まらないみたいなことも思ってて、
バイブコーディングの挑戦
友人もクロードコードを使い始めたみたいなことを喋ってたんですけど、その場合は、友人はプロでITエンジニアなんですけど、やってみたらやっぱりちょっと負荷をかけて一気にやりたいから、その場合やっぱり課金しないとダメだねっていう。課金前提ですね、そういう場合ですね。それでどこまで使えるかっていう話になるかなと思います。
僕らは非エンジニアがあえてバイブコーディングをして課金をしなきゃいけないとは思いませんが、難しいんですよ。だから課金すればいいというよりも課金してやっても、そのシステムが適切か適当かって結構素人では難しくて、セキュリティとかちょっと怖い部分がありますよね。
それをややに聞いて直すって言ってもあるんですけど、それどこまで直ってるかっていうのと、全部投げちゃったりとかしちゃうと変わっちゃったりするんで、修正して。今まで動いてたやつも変えちゃったりするから、GitHubとかあるんですけど、ソースコード自体を保守してそのバージョンを管理する。
今までのものをもしいじっちゃったらまた前に戻すとか、修正をなくすことにするとか、そういうことができるんですよ、修正。それはプロであれば使うけど、バイブコーディングとかその中でAIで全部修正させてくれるのであれば、そういった知識も必要になってくるので、その辺りは勉強しなきゃいけないんだろうなとは思いますので、バイブコーディングでAIで作れると言っても、
その基礎的なこととか、その勘みたいな、これはこういうことだよねっていうその論理とか、そういったものは不要になるわけじゃないですね。今聞いててなんか難しそうだなと思ったら、多分やらないじゃないですか。だからダメじゃないんですけど、それでもコーディングということをしなくても日本語で指示して、それで作ってくれて、自分が思う描いているものに近いものができるっていう世界はもうすでに見えているので、
そのプロのIT技術者とかITエンジニアの中では、もうコーディングっていうのがせずにAIに書かせるというのが前提には本当になりつつあると思います。これは去年だとまだ、とは言ってもねってなってたんですけど、次はコーディング実装する方々を書くのが絶対AIの方が早いんで。
そのテストですよね。コードを読んだりテストするのが大変になってきているって感じですよね。ただ、仕様設計は人間がやるよねっていう安全パイと言いますか、安全なところがあったんですが、仕様設計も結構やれちゃうよねみたいなのが今多分できずつあるんじゃないですか。
もちろんここでAIが全部やってくれるから楽だよねとかっていう話ではあんまりなく、出てきたものを結局人間がチェックしなきゃいけないから、別に僕もそうですけど、AIに全部やりたいことを投げて、自分が思う通りなものを出せてますっていう全部ね、それはないと思うんで修正していくしかないんですよね。
あ、違うからこれはこれで直してください。っていう意味ではAI部下を持つ人間上司みたいな感じになります。マネジメントみたいになるんで、それを管理してうまくできるかっていうことですね。
それをAIエージェントみたいな感じで、今はカチャカチャカチャカチャ僕が見て走らせるってことをしてますけど、それを一人のAIエージェントとか、何人かAIエージェント使うみたいなことになってくと、本当に文字通りこれをやっといてくださいっていうふうにマネージャーみたいな人に投げて、それをさらにコードを書く人とかプログラマーとかAIプログラムがいてその人にやってもらうみたいな。
AIとの連携
そんな話になっていくんじゃないかなと思ってます。そんな感じでやってみたってところだと無料枠APIですね。APIを使うっていうのはやや技術的にはなるんですが、誰でも多分できると思います。そんなめちゃくちゃ難しい話じゃないです。
ただ、そのAPIっていうのは課金しないとほとんど自分が思うようには使えないってことになります。だからですね、WebSIMでも全然いいんですけど、ワイブコーディングツールっていうのがあって、それでプロンプトを入れて、WebSIMだと無料だと何回だったかな、20回かな、50回かな。それは制限があるんですよね。
実際にコードを書いているのも見えますが、コードを見るというよりも出てきたもので判断する。さっきのまでやるクイズゲームだったらクイズゲームになってるよねっていうのを確認するし、当然動かすプレビューというか動くんで、動いて全然違うわっていうね、まだやるっていうのが出てないから違いますよねとか、そういうのを修正しながらやるのがバイブコーディングではあるんで。
僕がやってるのは別にバイブコーディングであったんですけど、そのAPIですね、LLMとかAIのAPIを使ってやるっていうのは初めてだったので、今回取り上げてみました。
ぜひですね、無料ワークでできるんで、すぐ止まりますけどね。試しにやっていただくのは全然いいと思います。ぜひやってみてください。GoogleであればGoogle AI Studioっていうものを使う必要性はありますが、APIキーとかも無料で使えますし、なんか課金されてお金がいっぱい発生するってこともないですから、そもそも登録してないしですね。
カードを登録しなければ別に発生しないので、そのあたりは安心してみてください。ちなみにこのあたりのことはジェミニに聞きながら僕はやってみました。
だからGoogleのサービスっていうのもあるんで、Google AI StudioもジェミニもGoogleですね。なので、なかなか端的というか、指示も的確で、わからないことはそこで聞けば解決するというような形でした。
というわけでですね、無料枠はそこまで使えないというわけで、若干マニアックではあるんですけど、ぜひ自分で気になった方はViveコーディングでもいいし、Viveコーディングって言われてもちょっとわからないなっていう人は、
AIに指示してプログラミングするアプリを作るとか、ジェミニの中でもアプリとかクロードコード、クロードはあんまり使っていない方もいらっしゃるかもしれないけど、チャットGPでもね、キャンバスみたいな機能でクイズゲームを作っていったらそこで出せたりするはずなんで、
そういうのを少しでもやってみると、AIって、AIでアプリを作るっていうのはこんな感じか、ツールを作るのは、ゲームを作るのはこんな感じかっていうのをつかまえると思うので、ぜひお勧めしたいと思います。やってない方はぜひやってみてください。
今回は以上となります。初告利ラジオ大橋でした。ここまでお聞きいただきましてありがとうございました。以上失礼いたします。
