Vibe Cordingの紹介
皆さん、こんにちは。フリーランスの学校に在籍している、こんと申します。
本日は、これからの時代に絶対身につけておきたい【Vibe Cording】について、解説をしていきたいと思います。
私は普段、AIコンテンツラボというコミュニティを運営しておりまして、週に1回、AI活用の無料ウェビナーを運営していたり、
コミュニティの中では、AIを活用して記事制作とか、それこそ動画講座の資料制作とか、
そういったコンテンツを作る方法について、日々、コミュニティの中で情報交換しているというような活動を行っています。
そんな私が、いろんなAIツールに触れてきたんですよ。一応触れてきました、私も。
画像生成、動画生成、音楽生成、さまざまな生成に触れてきた中で、これは本当に画期的だ。
感じている。なおかつ、最近さらにGoogleやChatGPT、OpenAIですね。
あと、クロードという運営会社はアンソロピックというところなんですけれども、そこがこそって大型アップデートをしてきて、
このViveコーディングに力を入れてきたんです。そもそもこのViveコーディングとは何なのかということなんですけれども、
これ、雰囲気でコーディングしようという、まさに直訳なんですけど、皆さん、プログラミングやったことありますか?
ちなみに私は大学の時に、ちょこっとだけLispという言語に触ったことがあるんですけれども、本当に経験としてはそれだけで、
今ね、ちょっと作ってみてって言われても、何やったっけみたいな、最初に何を入れるのかすら覚えていないような状況なんですね。
そんな土分系な私でも、ウェブアプリが作成できるという、そんな紙システムなんです。
具体的には、今までAIを使ったことがある方、これ画像生成、動画生成とかだけじゃなく、
チャットGPTに相談したことがあるとか、何かチャットをしたことがあるって方は、イメージ通りです。
あのままで、例えばですね、私はメールマガジンのランディングページを作りたい。
これずっと言ってる話なんですけど、ランディングページを作りたくて、色はカラーはシンプルに白と黒でお願いしたいと。
最後にメールマガの申し込みページのボタンが付いているような、そんなランディングページを作ってくれませんかと言うんですよ。
コード生成ができるツールに。有名なところだと、今だとすごく簡単にできるのはCanva AIです。
Canvaでコード生成できますから、あとWindsurfとか、あとV0とかクリエイトあたりも結構前々から1年前ぐらいから言われていますし、
かなりコード生成ができるツールっていうのはたくさんあるんですね。そこに投げかけるんです。日本語で全然OKです。対応してるところは。
そうするとAIがですね、自動的にコードを作ってくれるんですね。カタカタカタカタって。
これ本当に見ていただければすごいわかるんですが、カタカタカタカタって作ってくれて、プレビュー画面を出してくれるわけです。
これ覚えてる方は、以前クロードの1年ぐらい前からアップデートした時に、クロードがゲームを作れるようになったぞっていう驚きがあったと思うんですよ。
ゲームを作ってプレビューして、そのプレビューでゲームができるようになったぞっていう、そういった画期的なアップデートが入った時の感動を思い出してください。まさにアリです。
アリがもっと進化したバージョンです。
でもこちらとしては、もうコードとかわかんないんですよ。HTMLとかなんとなくこうかなって、なんとなくこんな感じだなって昔やったことがあるので、
わかるとしても何を修正したらいいかとかわかんない状態の、まさにド文型、ド文型ですよ私とか。
単語の意味もわかんない。私ですら簡単にランニングページが作れるようになるんですね。
そこで修正をしたいと。なんかうまくリンクが貼れてないから、ここのボタン、最後のボタン、リンクはこのリンクでお願いっていうだけで勝手にリンクを挿入してくれるんです。
やっぱり色味なんか白黒だとちょっと物足りないから、やっぱりちょっと緑を入れて、そしたら全体的に緑ベースで作ってくれるわけですよ。
信じられます。これ今ランディングページだけの話をしましたけど、特にね初心者は私キャンバーAIをお勧めしているんですが、
キャンバーAIですとタイマーを作れる。あとですね、ちょっとなぜサンプルにあるのかわかんないんですが、天体観測ゲームっていうのが作れるのと、
あと神経衰弱も作れます。驚きじゃないですか。今まで自分でランニングページを作るとか、ちょっとしたウェブゲームを作りたい、ウェブアプリを作りたい、
ウェブアプリを作りたい、こういったかゆいところに手が届くツールが欲しいんだよって思った時って、大体やっぱり課金してたと思うんですよね。
が、害虫をしていたかと思います。それらは全て今AIでまかないるってことなんですよ。ここで疑問があります。
でも、つまづいたり、バグがわからない、何がエラーなのかわからない、何かエラーが発生して何かうまくいかないんだけど、これどうしたらいいかわからない。
そんな時あるじゃないですか。どうやったら直せるのって、これも皆さん安心してください。自分一人で解決できます。
簡潔に言うと、ChatGPTとかGeminiとかのAIツールに聞くんですよ。こういうエラーが出ました。もしくはスクリーンショットを撮ってこういう風に出て、こういう仕様にしたいんだけど、どうしたらいいかって聞くんですね。
そしたら、ここがおかしいと思うので、こういう風に指示をしてみてください。とか、もうどうしても直らないようでしたら、最初にその仕様も含めたプロンプトも最初に作るので、これで実行してみてくださいというように解決策に導いてくれるわけですね。
わからなかったらAIに聞けばいいんです。つまり私たちがやることって、まずどんなものを作りたいかをちゃんと自分の中で明確にしておくこと。具体的にどんな動きになってほしいのかをちゃんと言語化しておくこと。
初心者向けの学習リソース
できればそのWindsurfとかCanva AIとかですね、そういったツールに投げる前にお願いする前に、ChatGPとかGeminiなどで例としてWindsurfでポモドールタイマーを作ろうと思います。
全体的なカラーリングはピンク。時間が経つごとにちゃんとアラームが鳴るように通知音が鳴るようにしてください。仕様としては最初の時点で何回何サイクルやるかというのを入力して、そこからスタートを押します。
そうすると1回ずつサイクルが巡ってくるごとにちゃんと通知音が鳴って、今休憩時間ですがまた作業を開始してくださいというメッセージが表示されます。
一番最後まで行ったら作業終了です。お疲れ様でしたというメッセージを出してください。その後リセットボタンを押すともう一度最初から戻ります。
こういう仕様のポモドールタイマーを作りたいので、ウェブ上でこれは公開したいのでWindsurfにどのような指示を出せばいいですかと、私だったらChatGPのオンスリーに聞いちゃうんですけれども、そのChatGPに聞くとするとそのためのプロンプトを出してくれるんですね。
コツとしてはWindsurf、この実際にプログラムを組むコード生成をしてくれるツールと直接やり取りをすることもできるんですけれども、そこでうやうややるよりは別のところでちゃんとプロンプトを整えて仕様を整えてからコード生成AIに投げ込む。
これが正直最短です。やり方としてはこれが一番スムーズです。
なので私がやるとき、1回、2回くらいかな作ったときにつまずいたんですよね。めちゃめちゃつまずいたんですけど、やっぱりもう一度作り直した方が早いってことが分かって、これWindsurfだったかな。もう一度作り直したことがあります。
しかも何がいいって無料の範囲内でできるんですよ。Windsurfは無料で使える部分と、あとクレジットを消費する部分があるんですけど、まずは始めてみたいって方はそのWindsurfの無料の部分をCascadeかな。
言語がCascadeって言語を使えれば無料でできるのでそちらを試してみるとか、またCanva AI、無料アカウントでもこれ確かコード生成できるので、まずはそこから試していただくのが良いかと思います。
でも今一番コード生成機能、エンジニアを唸らせたコード生成機能がすごいって言われているツールがCloudなんですよ。Cloud Codeっていう。
これCloudのマックスプランに加入すると使えるようになる機能なんですけど、マックスプランがですね、月額100ドルかかるんですね。
多分1万5千円くらいかかるんです。ちょっといきなり何か使えるかどうか分からないのに課金は難しいよなっていう風に考えている方、きっぽーです。
実は今回フリーランスの学校のメンバーであるケイスケさんが、AI漫画家のケイスケさん、もともとエンジニアのケイスケさんですが、Cloud Codeの解説動画をUdemyで作ってくれたんですね。
しかもこれ聞き逃さないでください。しかも6月3日まで無料クーポン配布中です。2時間の講座です。
ちょっと課金する前に1回この無料クーポンを受け取って、Cloud Codeがどんなものか、Vive Codingってどんなものなのかというものをぜひ掴んでいただければと思います。
こちらのチャプターにケイスケさんのPIXのポストを貼りますので、ぜひ受け取ってください。
こちらフリコーユーデミーという形で、今無料クーポン配布中ですけども、今後販売していく形になりますので、無料の期間中にぜひ受講していただければと思います。
ということで本日もお聞きくださりありがとうございました。このVive Coding、もうコードはエンジニアじゃないとできないなんて言えなくなります。
自分への便利ツールを自分で作る時代がやってきます。ぜひ今のうちに身につけておきましょう。
それではまたね。バイバイ。
