9,850 文字
私の名前はデヴィッド・アンドレで、今回はプロのようなバイブコーディングの始め方をご紹介します。そもそもバイブコーディングとは何でしょうか？これはAIを使用したソフトウェア構築の新しい方法です。私は自分のスタートアップであるvect.をバイブコーディングだけで構築し、現在は月に116,000ドル以上を稼いでいます。例えば、最近vect.に「アイデアインボックス」という新機能を追加しましたが、これをバイブコーディングで2時間ほどで構築しました。このように、これは非常に強力なスキルなのです。このビデオでは、バイブコーディングについて私が知っていることすべてを公開しますので、最後まで見てください。
バイブコーディングの人気は急上昇しており、それはすべて一人の男性、アンドレイ・カーパシーのおかげです。彼はOpenAIの共同創設者であり、AI界で最も優れた頭脳の持ち主です。このツイートが「バイブコーディング」という言葉の最初の言及であり、わずか1ヶ月半前に投稿されました。それまで誰もこの用語を使っていませんでした。この伝説的なツイートを読んでみましょう。「新しい種類のコーディングがあります。私はそれをバイブコーディングと呼んでいます。完全にバイブに身を任せ、指数関数的成長を受け入れ、コードの存在自体を忘れてしまうのです」。
では、バイブコーディングを実際に行うには何が必要でしょうか？本当に必要なのは、cursorのようなコードを書けるAIツールだけです。cursor.comにアクセスして、ダウンロードをクリックしてください。ビデオゲームをインストールできるなら、cursorもインストールできます。cursorをインストールしたら、空のフォルダを開くことから始めましょう。これが空のフォルダです。これが、バイブコーディングを始めるために本当に必要なものすべてです。
バイブコーディングが機能する理由は、LLM（大規模言語モデル）が非常に優れてきているからです。また、バイブコーディングのもう一つの部分は、すべて「受け入れる」をクリックするだけです。AIが提案する変更が何であっても、盲目的に受け入れて、バイブを信頼するのです。カーパシー自身のような上級プログラマーでさえ、エラーメッセージが出たら、コメントなしでそれをcursorエージェントにコピー＆ペーストするだけで、通常はエラーが修正されます。
それでは、cursorに飛び込んで、バイブコーディングを始めましょう。アイデアさえ選んでいませんが、AIモデルのバイブを信頼してそれを行わせます。「バイブコーディングだけで小さくても役立つソフトウェアを構築したいです。7つの異なるアイデアを提案してください」と入力します。マークダウンノートテイカー、習慣トラッカー、ファイル名変更ツール…習慣トラッカーを選びましょう。「新しいconda環境を作成し、次にNext.jsフロントエンドMVPを構築してください」と入力します。
これがバイブコーディングです。AIが私の説明通りに行うことを盲目的に信頼します。新しいconda環境を作成しました。環境を有効化する必要がありますが、それを認識するか見てみましょう。認識しました。ちなみに、cursorの設定で明確にしておく必要があることがあります。設定に行き、「YOLOモード」を有効にしています。これは最大限のバイブコーディングです。バイブコーディングを次のレベルに引き上げたい場合は、これを有効にしてください。この自動実行モードにより、cursorエージェントは承認なしでターミナルを実行できます。ターミナルコマンドの95％で、有効にすればcursorエージェントを信頼できます。
一つのプロンプトでどれだけの変更を行ったか見てください。これが私のプロンプトで、conda環境を作成し、conda環境を有効化し、Next.jsプロジェクトを作成し、フォルダを見るためにlsコマンドを実行し、ファイルを読み込み、さらに2つのファイルを読み込み、コードを書き始め、ディレクトリを変更し、別のファイルを作成し、さらに別のファイルを作成し、もう一つのファイルを作成しました。すべて私の元のプロンプトからです。ちなみに、私はただバイブしているだけです。リラックスしているだけです。これがプログラミングの未来です。
Infinite Thinking 2.0について紹介する必要があります。これは、vectalに追加したばかりの新しいAIエージェントです。お見せしましょう。「バイブコーディングについての本を書くのを手伝ってください」などの目標を設定し、送信してYOLOモードを有効にし、作業するのを見るだけでいいのです。このAIエージェントは他の場所には存在しません。vect.aiが文字通り唯一の場所です。最初のステップはタスクを作成することで、その後、利用可能な最高の推論モデルを使用して推論を開始し、そのスピードは信じられないほどです。次の変更を受け入れてさらに進みます。これがInfinite Thinking 2.0のパワーです。アクセスしたい場合は、vect.aiにアクセスしてサインアップしてください。今後3日間サインアップすると、チェックアウト時にコード「infinite」を使用すると30％オフになります。このオファーは今後3日間のみ有効ですので、vect.aiにアクセスしてサインアップしてください。
cursorエージェントはようやくすべてのファイルの実行を終了しましたが、実行しようとしたときにエラーが発生しました。おそらくこのエラーが何であるかわかりますが、知識を使わないと仮定しましょう。バイブコーディングをしていきます。エラーをハイライトしてチャットに追加し、「これを修正して」と言うだけです。これはバイブデバッグです。エラーを貼り付けて修正するように指示します。
バイブコーディングには興味深い傾向があり、特に以前にプログラミングの経験がある人々から嫌われています。確かに、多くの初心者がバイブコーディングを使用し、ひどいソフトウェアを作成して前進することができないのは事実です。しかし、それは後ほどこのビデオで説明する最も愚かな間違いを犯すからです。しかし、AIを使わない人々も同様に愚かです。AIは非常に急速に良くなっています。あなたが専門のプログラマーであっても、時間を節約できます。そして視聴者の誰もがアンドレイ・カーパシーよりも優れたプログラマーではありません。彼は文字通りOpenAIを共同創設し、Teslaの自動運転チームを構築しました。この男は超天才であり、彼はバイブコーディングを使用しています。あなたもそうすべきです。
そのため、将来、最高のプログラマーはみんな、ある程度バイブコーディングを使用するでしょう。AIエージェントがコードを書いている間に、登録ボタンをクリックする時間を取ってください。何らかの理由で、私のビデオを見ている人の76％がまだ登録していません。バイブコーディングについてもっと多くのビデオを作成してほしい場合は、登録ボタンをクリックしてください。完全に無料で、大いに役立ちます。
エラーの原因がわかったようで、間違ったディレクトリにいたからでした。habit_tracker内にcdして、サーバーを起動しました。localhost:3000にアクセスすると、習慣トラッカーアプリが表示されるはずです。基本的なNext.jsのテストディレクトリが表示されました。スクリーンショットを撮って、「localhost:3000にアクセスしても習慣トラッカーアプリが表示されません。これを修正してください」と言います。エラーを個人的に受け取らないでください。どんなに難しいバグでも修正できます。見ているものを説明し、AIに渡せば修正してくれます。
バイブコーディングで初心者が犯す最も一般的な間違いは、AIを信頼しすぎることです。アイデアを決め、UIがどのように見えるべきか、どの機能を追加し、どの機能を追加しないかを決める必要があります。AIはただのツールです。AIをボスにしないでください。あなたがマネージャーになり、CEOになって、AIに具体的で直接的な指示を与える必要があります。これがバイブコーディングで成功する方法です。
この美しさは、誰もがコーディングできることです。わずか3年前まで、コーディングはプログラマーだけのものでしたが、現在は英語を話せる人なら誰でもソフトウェア構築に参加できます。これは、人類の歴史の中で、参入障壁がこれまでになく低いことを意味します。文字通り誰でもアプリを構築できます。私自身がその証拠です。vect.を何もないところから、スタートアップの経験ゼロで、月額116,000ドルのスタートアップに構築しました。これは、永遠に収益前のサンフランシスコのほとんどのスタートアップよりも優れています。
何か作りたいソフトウェアがあれば、しばらく考えていたアプリや、DiscordやGoogleカレンダーに不満があって自分のために簡単な代替品を作りたいと思っていたら、今がその時です。
cursorが問題を修正したようなので、いつものように「すべて受け入れる」をクリックし、localhostにアクセスしましょう。エラーがありますが、今回は別のエラーです。少なくとも進歩しています。エラーが変わったということは、何かが改善されたということです。
「新しいチャットを開始する」というのが見えますが、これは実際に指示に従うのが良いアイデアです。つまり、すでにチャット内に多くのコンテキストがあるので、「新しいチャット」をクリックし、このイメージを貼り付けて、「添付した画像を見て修正してください」と言います。
これらのターミナルを終了して、ポートを占有しないようにします。AIは4秒間戦いました。package.jsonが見つからないというエラーで、おそらくまだ間違ったフォルダにいるのかもしれません。問題が何であるかわかる場合は、それを伝えることができます。明らかに、バイブコーディングは、自分がより優れたプログラマーであればあるほど、またバイブコーディングに費やす時間が多いほど、より強力になります。初めてvect.を構築し始めたときは酷かったですが、今では世界で最高のバイブコーダーの一人だと言えるでしょう。AIのおかげで、バイブコーディングのおかげで、vect.を頭の中のアイデアから月に16,000ドルを稼ぐスタートアップに育てた人を他に知っていますか？それは最高のバイブコーディング成功事例の一つだと思います。
cursorが同じ問題を起こしたので、「サーバーを起動するときは正しいディレクトリにいることを確認してください」と言います。これで正しいディレクトリに入り、サーバーを起動しました。「ターミナルをパネルに移動」をクリックすると、ここに適切に表示されます。localhost:3000にアクセスしてリロードすると、何か更新があるはずです。まだエラーがあります。
バイブコーディングを次のレベルに引き上げる方法は、cursor rulesファイルを作成することです。右側のフォルダで「新しいファイル」をクリックし、「cursor-rules.md」と名付けます。これにより、cursorにより良いパフォーマンスを発揮させるための特定の指示を与えることができます。例えば、「npm run devコマンドを実行するときは、habit_trackerフォルダにいることを確認してください」と書くことができます。これで、複数回犯した間違いを繰り返さないようになります。これがAIエージェントが実際に改善を続けることを確実にする方法です。cursor rulesファイルを持ち、毎日それを拡張し続けます。参考までに、vect.のメインcursor rulesファイルは約400行あります。これは毎日改良し続けるものです。
いつものように「すべて受け入れる」をクリックし、「フロントエンドサーバーを再起動してください」と言います。localhost:3000をリロードしましょう。UIが表示され、すべてのエラーが解決されました。新しい習慣を追加しましょう。「バイブコーディングを学ぶ」と入力します。コントラストはひどいですが、表示されています。これをクリックすると、1日の連続記録になります。自動的に次の日にリセットされるはずです。
バイブコーディングの長期的な影響は何でしょうか？まず、コードよりもアイデアに集中できるようになります。この世界には、ビジネスやアプリのアイデアはあるが技術的なスキルがない人が何百万もいます。バイブコーディングのおかげで、誰でもアプリを構築できます。これは、アプリが指数関数的に改善することを意味します。カーパシーが言うように、「コードの存在自体を忘れ」、問題の解決に集中し、構築したいものの構築に集中し、AIや大規模言語モデルに残りを任せましょう。エラーの修正に1日を費やすのではなく、AIにエラーを修正させ、次の機能の構築を始めましょう。
私が月に166,000ドルを稼ぐアプリを純粋にバイブコーディングで構築した方法を見たい場合は、すべてがThe New Societyに記録されています。このモジュール「AIスタートアップの構築方法」で、vect.の構築を初日からドキュメント化しています。アイデアの選択からcursorでのプロジェクト開始、最初のバックエンドファイルから、今日、スタートアップが月額116,000ドルを稼ぐまで、すべてを記録しています。私は地球上でこれを行った唯一の人物だと思います。これらの日々のドキュメントやその他の独占AIコンテンツ、チュートリアル、トレーニングへのアクセスが欲しい場合は、The New Societyに参加してください。ビデオの下にリンクがあります。
シンプルな習慣トラッカーが実際に機能するようになったので、本格的にバイブコーディングを始めることができます。新しいチャットを作成し、このターミナルをパネルに移動させます。これはバイブコーディングが間違う可能性がある良い例です。右側に多くのフォルダが作成されていますが、これは自律性を与えすぎたからです。
もっと責任を持ち、コントロールする必要があります。「質問モード」に切り替え、「habit_trackerディレクトリ全体のファイル構造を分析してください。現在は混乱していて、どのファイルが実際に機能していて、どれを削除すべきか理解する必要があります」と言います。
cursorは完全なファイル構造にアクセスできないと言っているので、「tree」などのターミナルコマンドを使用して、habit_tracker内の全ファイル構造を確認するよう指示します。これもcursor rulesに追加するのが良い習慣です。「file_structure」と書いて、右下隅でマークダウンに切り替えると、cursor rulesがマークダウン形式になります。
「tree –ignore node_modules」というコマンドを実行します。これでプロジェクトの全ファイル構造が表示されます。これをコピーして、AIエージェントが実行するたびにファイル構造がどのように見えるかを知ることができるようcursor rulesファイルに追加しますが、ここにも貼り付けます。「ファイル構造はこのようになっています。かなり複雑なようです。これを修正するには何をすべきですか？」
ファイル構造を見ると、確かに整理が必要です。3つのappルーターディレクトリがあります。Next.jsでは、src/appを使用することが推奨されているので、他のものを削除します。削除しました。コードが機能するか確認しましょう。機能しません。それは予想通りです。たくさんのファイルを削除したからです。
新しいターミナルでこのコマンドを実行します。これでファイル構造がかなりシンプルになりました。これをコピーして、ここに貼り付けます。「新しいappルーターフォルダを作成しないでください。src/appにあるものを使用してください」と指定します。「import_rules」というヘッダーを付けます。マークダウンを使用する利点は、ヘッダーや箇条書き、ファイル構造などを素早く追加できることです。
「他の2つを削除し、src/appだけを残しました。しかし、アプリが完全に機能していません。これを修正してください」と言います。page.tsxとglobal.cssを開き、components内のadd-habit-form、delete-habit-button、habit-item、habit-list、header、statsを確認します。エラーがたくさんあります。cursorの非常に便利な機能は「/add open files to composer」です。多くの人がこれを使用していません。「これを修正してください。他のことはしないでください」と指示します。
多くの変更を行いました。明らかにそれらを削除することは大きな変更でしたが、TypeScript設定が混乱しています。どうなるか見てみましょう。layout.tsxファイルを作成する必要があります。それはsrc/appフォルダに入れられました。next.configファイルを確認して、正しく設定されているか確認しましょう。React typesがインストールされていることを確認してください。ディレクトリにcdして、npm installを実行しました。
エラーが解決されたようで、プロジェクトが再度起動しました。開いてみましょう。2つの主要なフォルダを削除したにもかかわらず、プロジェクトは復活しました。混乱を整理し、今バイブコーディングに戻ることができます。「素晴らしい仕事です。UIをより色彩豊かでインタラクティブにしてください。他のことはしないでください」と言います。
layout.tsxかpage.tsxを更新するのかわかりませんが、globals.cssを更新していますね。これはスタイリングなので理にかなっています。現在のアプリの外観はこのようになっています。npm run devの素晴らしい点は、自動的に更新されることです。サイトを見続けるだけで、リアルタイムで更新を確認できます。
新しい習慣「テスト」を作成し、入力時に何かをするように指示する必要があります。できました。UIが大幅に改善されましたが、まだ機能しています。次はstatsを改善しているようです。これがバイブコーディングの美しさです。文字通り数秒で変更を確認でき、私のスタートアップ全体をこのように構築しました。
Claude 3.7は本当にUIデザインに優れています。素晴らしいレスポンシブデザイン、素敵なアイコンです。add-habit-formコンポーネントを改善していますね。コンテンツの良い分離です。habit-itemを改善するでしょうか？その通りです。ページ全体の構造を通過して、各コンポーネントのUIデザインを一つずつ改善しています。印象的です。
これを改善しましたが、テキストのコントラストが良くないことがわかります。delete-habit-buttonを改善しています。文字通りすべてを強化していますが、このテキストのコントラストを確保する必要があります。灰色にして、ホバー時に赤になるようにしました。いいですね。「より洗練された外観にするためにメインページコンテナを更新してください」。
この変更はあまり良くなかったので、このファイルを拒否して「すべて受け入れる」をクリックし、コントラストを良くするためにページを白いままにします。「問題はテキストにあります。habit-itemとadd-habit-formの両方で」と言って、これら2つのファイルをタグ付けします。新しいチャットを作成して、「add-habit-formとhabit-itemを更新して、テキストが背景色と良くコントラストするようにしてください。現在はほぼ同じ色合いで見にくいです。他のものは変更しないでください」と指示します。
いくつかの習慣を追加しましょう。「瞑想」「運動」などを入力します。スクロール可能な領域がありますが、これらはまだ良くありません。UIを拡大しすぎていますが、うまく機能しています。add-habit-formを見てみましょう。修正されました。入力時にテキストが見えるようになりました。黒になったからです。habit-itemも更新する必要があります。白などになるといいのですが。
テキストがまったく見えません。「habit-item内のタグが白である必要があります。これを修正してください。他のものは変更しないでください」と言います。AIモデルは視覚的な理解が良くないことを認識することが重要です。Claude 3.7 Sonnetはおそらくこれに最も優れていますが、それでもあなたが見ているものを見ることはできません。「テキストを白にする」と伝えることが最も良いでしょう。
テキストを白にし、それが見えるようになりました。これをクリックすると1日の連続記録になり、25％の完了度が表示されます。最長連続記録、1日の連続記録、50％の完了度。これは実際に優れた習慣トラッカーです。各習慣の連続記録を確認でき、おそらく新しい日に自動的にリセットされますが、リセットボタンを追加したいと思います。
まず「すべて受け入れる」をクリックし、「ページの右上に小さなリセットボタンを追加して、次の日にスキップしたかのように機能し、習慣を再度追跡できるようにしてください」と言います。この要求をどのように実行するか見てみましょう。
思考機能付きのClaude 3.7の素晴らしさは、アクションを行う前に少し推論することです。平均して、単なるClaude 3.7よりも良い結果が得られます。page.tsxを更新しています。どのファイルをタグ付けするかわからない場合でも問題ありません。
ここにリセットボタンがあります。おそらく最適な場所ではありませんが、構いません。機能するか見てみましょう。「リセット」をクリックすると機能し、連続記録は続いています。1日の連続記録、2日をクリックします。これは実際に機能する優れた習慣トラッカーです。
CursorとClaude 3.7を使用して、数回のプロンプトで構築しました。これが私の言いたいことです。文字通りバイブコーディングでスタートアップを構築できます。私はおそらく世界で最初にこれを行った人の一人です。実際に成功したスタートアップを構築しました。まだ長い道のりがありますが、月額116,000ドルはかなり成功していると言えるでしょう。
私は本当に、実際にこれを行った世界で唯一の人だと信じています。バイブコーディングを使用して、現在何千人もの人々が使用している成功した製品を構築しました。そして、vect.はまだ始まったばかりです。
世界で最も強力なAI生産性ツールを手に入れたい場合、タスクに取り組み続け、時間を節約する高度なAIエージェントが欲しい場合は、vect.aiにアクセスしてサインアップしてください。今後3日間、チェックアウト時にコード「infinite」を使用すると、vect.al Proが30％オフになる特別オファーがあります。これは初めての試みであり、vect.の創設から5ヶ月を祝うためのものです。このオファーは今後3日間のみ有効です。生産的でいることが好きで、時間の無駄が嫌いな方は、vect.aiにアクセスしてサインアップしてください。これが生産性の未来です。
それでは、視聴いただきありがとうございました。素晴らしい一週間をお過ごしください。さようなら。
コメント