2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Y Combinator: Vibe Coding Tips 🚀

Posted at

image.png
How To Get The Most Out Of Vibe Coding | Startup School より

目次

  1. Vibe Codingの紹介
    • Vibe Codingとは何か?
    • AIアシストプログラミングの現状
    • 進化し続けるAIコーディングツール
  2. YC Spring Batchの創業者たちからの洞察
    • ツールの組み合わせとワークフロー最適化
    • コードではなく言語でプログラミングする
    • テストと検証のアプローチ
    • 計画とアーキテクチャの考慮事項
  3. Vibe Codingのベストプラクティス
    • 適切なツールで始める
    • コーディング前の計画
    • バージョン管理戦略
    • テスト駆動開発
    • 効果的なデバッグ技術
    • AIへのドキュメンテーションとガイダンス
  4. 高度なテクニックと考慮事項
    • 複雑な機能の取り扱い
    • 適切な技術スタックの選択
    • マルチモーダル対話(スクリーンショットと音声)
    • コードリファクタリングとメンテナンス
    • モデル改善に追従する
  5. 結論と将来の展望
    • AIアシストプログラミングの進化する風景
    • 近い将来の予測
    • 最終的な推奨事項

1. Vibe Codingの紹介

1.1 Vibe Codingとは何か? 🤔

Vibe Codingとは、開発者がGPT-4、Claude、Geminiなどの大規模言語モデル(LLMs)を活用して、コードの記述、デバッグ、メンテナンスを支援する現代的なプログラミングアプローチを指します。プログラマーが手動ですべての行を書く必要がある従来のコーディングとは異なり、Vibe Codingでは目標をAIに説明し、協力して動作するソリューションを生み出します。

YCのパートナーであるTomが動画で述べているように、この実践は急速に進化・改善しており、1〜2年前のプロンプトエンジニアリングのように、毎週新しいテクニックが発見されています。最も効果的なVibe Codingアプローチは、プロフェッショナルなソフトウェアエンジニアリングのベストプラクティスを反映したものであることが多く、ただ異なる媒体を通じて実行されるだけです。

1.2 AIアシストプログラミングの現状 📊

AIアシストプログラミングは以下のようなツールで大きく進歩しています:

  • Cursor: フロントエンドとフルスタック開発に高速で効果的
  • Windsurf: 生成に時間がかかるが、より熟考されたコードを生成することが多い
  • Claude Code: 特にClaude Sonnet 3.7を使った特定タイプのプロジェクトに強い
  • LovableReplet: 初心者やUI重視の開発向けのアクセスしやすいツール

これらのツールはもはやコード補完を提供するだけでなく、関数全体の生成、コードのリファクタリング、テストの作成、バグの修正、さらにはDevOpsタスクの支援も可能です。複雑なコードベースを理解し、高品質で保守可能なコードを生成する能力がますます高まっています。

1.3 進化し続けるAIコーディングツール 🔄

AIコーディングツールの状況は急速に変化しています - 今日最適なものが、来週には異なるかもしれません。Tomが言及したように、GPT-4.1を試してみたが予想よりも特定のユースケースに効果的でないと感じたように、新しいモデルのリリースごとに異なるツールの相対的な長所と短所が変化します。

この進化は、Vibe Codingテクニックが柔軟で実験的であり、開発者が常に新しいアプローチとモデルの組み合わせをテストして、ワークフローを最適化する必要があることを意味します。

2. YC Spring Batchの創業者たちからの洞察

2.1 ツールの組み合わせとワークフロー最適化 🔧

YCの創業者たちは、複数のAIツールを組み合わせると、1つだけに頼るよりも良い結果が得られることを発見しました。ある創業者は次のように共有しています:

「同じプロジェクトでCursorとWindsurfの両方を立ち上げることをお勧めします...Cursorはもう少し速いので、フロントエンドやフロントエンドとバックエンドを連携させるようなフルスタック的な作業が多くできます。Windsurfはもう少し考える時間が長いです。」

この並列アプローチにより、開発者は:

  • 異なるツールで同時にプロジェクトの異なる部分に取り組むことができる
  • 同じ機能の代替実装を比較できる
  • 各モデルのユニークな強みを活用できる

一部の創業者は、複数のツールで同じコンテキストを維持し、同様のプロンプトを入力して同じ問題に対する異なる視点を得て、好みのソリューションを選択しています。

2.2 コードではなく言語でプログラミングする 💬

ある創業者が共有した重要な洞察は、Vibe Codingをどのように考えるべきかというパラダイムシフトです:

「AIを異なる種類のプログラミング言語として、Vibe Codingを異なる新しい種類のプログラミング言語として考えてください。コードでプログラミングする代わりに、言語でプログラミングしているのです。」

このメンタルモデルは、詳細なコンテキストと明確な指示を提供することが良い結果を得るために不可欠であることを開発者が理解するのに役立ちます。伝統的なプログラミング言語で正確である必要があるのと同様に、自然言語の指示でAIを「プログラミング」する際にも詳細かつ具体的である必要があります。

2.3 テストと検証のアプローチ ✅

複数の創業者がVibe Codingにおけるテストの重要性を強調しました。特に注目すべきアプローチの一つ:

「私は通常、Vibe Codingを逆方向から始めます。まずテストケースから始めるのです。テストケースは手作りします。LLMを使ってテストケースを書くことはしません。それが完了すると、LLMがコード生成に従うべき強力なガードルールができます。」

このテストファーストのアプローチは以下を保証します:

  • 実装前に要件が明確に定義されている
  • AIが作業する明確な制約がある
  • 成功を客観的に測定できる
  • 開発者がプロジェクトの品質をコントロールできる

テストが合格すると、創業者は生成されたコードの各行を詳細に調査する必要なく、実装に自信を持つことができます。

2.4 計画とアーキテクチャの考慮事項 📐

創業者たちはVibe Codingに飛び込む前の適切な計画の重要性を強調しました:

「Cursorや他のコーディングツールに移行する前に、純粋なLLMで不合理なほど多くの時間を費やして、構築しようとしているものの範囲と実際のアーキテクチャを構築することが非常に重要です。」

この計画フェーズは、明確なアーキテクチャビジョンを提供することで、AIが「本当に機能しないものを作り上げる」のを防ぎます。もう一つの貴重な洞察は、AIが苦戦しているときを認識することです:

「LLMが質問に答えるときにウサギの穴に落ちていないかを本当に監視してください...もし自分がエラーメッセージをコピー&ペーストし続けているのに気づいたら、おそらく何かがおかしくなっていて、一歩下がるべきです。」

問題を再評価し、潜在的に問題を再構成するために一歩下がることで、根本的に欠陥のあるアプローチを繰り返し修正しようとするよりも大幅に時間を節約できます。

3. Vibe Codingのベストプラクティス

3.1 適切なツールで始める 🛠️

Vibe Codingの初心者にとって、適切な出発点を選ぶことが重要です:

コーディング経験のない初心者向け

  • RepletLovableなどのツールは、ユーザーフレンドリーなビジュアルインターフェースを提供
  • コードで直接UIを作成するのに最適
  • 多くのプロダクトマネージャーやデザイナーが、Figmaのようなデザインツールを使う代わりに、直接コードでアイデアを実装するようになっている

ある程度のコーディング経験がある人向け

  • WindsurfCursorClaude Codeなどの高度なツールはより大きな柔軟性を提供
  • これらのツールはフロントエンドとバックエンドの両方のロジックをより正確に制御可能
  • 既存の開発ワークフローとより良く統合される

Tomは、LovableのようなUI重視のツールはインターフェースデザインには印象的だが、正確なバックエンドロジックの修正には苦戦することがあると指摘しています。より包括的なプロジェクトでは、より高度なツールが全体的により良いコントロールを提供する傾向があります。

3.2 コーディング前の計画 📝

Vibe Codingプロジェクトを始める前の最も重要なステップは、包括的な計画を作成することです:

  1. LLMと協力して詳細なプロジェクト計画を作成する
  2. この計画をプロジェクトフォルダ内のマークダウンファイルに保存する
  3. 計画を見直し、洗練させ、機能を明示的にマークする:
    • 実装する
    • 実装しない(複雑すぎる)
    • 後のアイデア(現在の範囲外)
  4. 計画をセクションごとに実装する
  5. 進行に合わせてAIにセクションを完了としてマークさせる

この方法論的アプローチは、最も高度なモデルでもまだ苦戦している製品全体を「ワンショット」で試みることを防ぎます。代わりに、プロジェクトを管理可能なチャンクに分割することで、次に進む前に各部分が正しく機能することを確認できます。

Tomが言及しているように、「モデルが製品全体をワンショットで実装することをまだ期待しないでしょう、特に複雑な場合は」。このアドバイスはモデルが改善するにつれて変わるかもしれませんが、現時点では構造化された実装アプローチが最良の結果をもたらします。

3.3 バージョン管理戦略 🔄

バージョン管理は効果的なVibe Codingにおいて最も重要なツールの一つとして浮上しています:

「Gitを厳格に使用してください...ツールの元に戻す機能をまだ信頼しないでください...新機能を始める前にクリーンなGitの状態から始めるようにしてください。」

このアプローチにより、以下が可能になります:

  • AIが「ビジョンクエスト」に行ってしまった場合に、既知の動作バージョンに戻る
  • 複数の失敗した修正試行による「何層もの悪いコード」の蓄積を避ける
  • 以前の試行のゴミなしにクリーンなソリューションを実装する

Tomは、難しい問題のソリューションを最終的に見つけたときは以下を推奨しています:

  1. コードをクリーンな状態にリセットする(git reset --hard
  2. クリーンなコードベースにソリューションをAIに与えて実装させる
  3. これにより、より清潔で保守可能な実装が作成される

3.4 テスト駆動開発 🧪

AIコーディングアシスタントと作業する際、テストは不可欠です:

「テストを書くか、LLMにテストを書かせましょう...LLMには関連のないロジックに不要な変更を加える悪い癖があります。」

LLMはテストを書くことができますが、Tomはユニットテストよりも高レベルの統合テストに焦点を当てることを提案しています:

  • アプリケーションをクリックするユーザーをシミュレートする
  • 機能がエンドツーエンドで動作することを確認する
  • LLMが関連のないコードに予期しない変更を加えた場合にそれをキャッチする

堅固なテストスイートがあれば、異なるアプローチやAI生成のソリューションを実験する自信が持てます。導入された問題をすぐにキャッチできるからです。

3.5 効果的なデバッグ技術 🐛

バグに遭遇したとき、いくつかの効果的な戦略があります:

  1. エラーメッセージを直接LLMにコピー&ペースト

    • 「多くの場合、このエラーメッセージだけでAIが問題を特定して修正するのに十分です」
    • 何が悪いのかを説明する必要はない - エラーメッセージ自体が頻繁に十分です
  2. 複雑なバグの場合、LLMに複数の可能な原因を分析させる

    • コードを書く前に3-4の潜在的な原因を考慮させる
    • 各失敗した試みの後、リセットして新たに始める
  3. ロギングを追加する

    • 「ロギングはあなたの友達です」
    • 実行フローを追跡し、問題を特定するのに役立つ
  4. 行き詰まった場合はモデルを切り替える

    • 「異なるモデルが他が失敗するところで成功する」
    • 進展がない場合はClaude、GPT、またはGeminiを試す
  5. 複雑な修正には、クリーンな実装を使用する

    • バグの原因を見つけたら、すべての変更をリセットする
    • クリーンなコードベースで特定のバグを修正するための具体的な指示をLLMに与える

3.6 AIへのドキュメンテーションとガイダンス 📚

AIアシスタントに明確な指示を提供することで、結果が大幅に向上します:

「LLMへの指示を書いてください...これらの指示をCursor rules、Windsurf rules、またはClaude markdownファイルに入れてください。」

一部の創業者はAIコーディングエージェント用に何百行もの指示を書いており、それによって大幅に効果が高まっています。各ツールには指示を保存するための異なる規則がありますが、原則は同じです - 明確なガイダンスがより良い結果を生みます。

外部ドキュメントの作業については:

  • APIドキュメントをダウンロードし、作業フォルダのサブディレクトリに配置する
  • 実装前にドキュメントを読むようLLMに指示する
  • このアプローチは、AIがオンラインドキュメントにアクセスするよりも信頼性が高いことが多い

さらに、LLMを教師として使用できます:

  • 機能を実装した後、AIに行ごとに説明してもらう
  • これは新しい技術を学ぶための優れた方法です
  • Stack Overflowを検索するよりもはるかに効果的

4. 高度なテクニックと考慮事項

4.1 複雑な機能の取り扱い 🧩

メインプロジェクト内でAIが直接実装するのが難しい可能性のあるより複雑な機能の場合:

  1. まずスタンドアロンの実装を作成する

    • クリーンで分離されたコードベースで機能を構築する
    • メインプロジェクトの複雑さなしに、その機能だけに集中する
  2. リファレンス実装を使用する

    • 可能であれば、GitHubから既存の実装をダウンロードする
    • これらの例をLLMに指示する
  3. メインプロジェクトへの統合をガイドする

    • スタンドアロンバージョンが動作したら、AIに統合させる
    • 「実装をLLMに指示し、それに従って大きなコードベース内に再実装するよう伝える」

Tomはこのアプローチが「驚くほどうまく機能する」と述べており、AIが既存のシステムとの統合を試みる前にコア機能を理解するのに役立ちます。

4.2 適切な技術スタックの選択 🔨

プログラミング言語とフレームワークの選択はAIコーディングのパフォーマンスに大きな影響を与えます:

「特にRuby on Railsコードを書くときのAIのパフォーマンスには驚かされました。」

Tomはこの成功をRailsが20年の歴史を持つフレームワークで、一貫した規則と多くの類似したコードベースがオンラインにあり、AIモデルに豊富な高品質のトレーニングデータを提供していることに起因しています。

Vibe Coding用の技術スタックを選択する際の重要な考慮事項:

  • フレームワークの年齢と人気: 古く、広く使用されているフレームワークは通常より多くのトレーニングデータを持つ
  • 規約よりも設定: 強い規約を持つフレームワーク(Railsのような)はAIが理解しやすい
  • コミュニティの規模: より大きなコミュニティはAIが学ぶための例が多い

Tomは、RustやElixirのような新しい言語を使用している友人の成功が少なかったことに言及していますが、これはおそらく利用可能なトレーニングデータが少ないためです。しかし、これらの言語が人気を得るにつれて、この状況は急速に進化しています。

4.3 マルチモーダル対話(スクリーンショットと音声) 🖼️🎤

テキスト以外に、現代のAIコーディングアシスタントは以下で作業できます:

スクリーンショット:

  • スクリーンショットを直接ほとんどのコーディングエージェントにコピー&ペーストできる
  • UIバグのデモンストレーションに役立つ
  • 他のサイトからデザインのインスピレーションを共有するのに役立つ

音声入力:

  • Aqua(YC企業)のようなツールで音声からテキストへの変換が可能
  • Tomは毎分約140語、彼のタイピング速度のおよそ2倍の速さで話すことができると言及
  • AIモデルは軽微な文字起こしエラーに寛容で、このアプローチを非常に効果的にする

これらのマルチモーダル対話は、ワークフローを大幅に高速化し、AIアシスタントにより豊かなコンテキストを提供できます。

4.4 コードリファクタリングとメンテナンス 🧹

機能の実装とテストの後、コード品質を維持するためのリファクタリングが重要になります:

「コードが動作していて、特に重要なのはテストが実装されている場合には、頻繁にリファクタリングするようにしてください。」

包括的なテストを行うことで、リグレッションがキャッチされることを知って自信を持ってリファクタリングできます。Tomは提案しています:

  • 繰り返しコードやリファクタリングの候補を特定するようLLMに依頼する
  • ファイルを小さくモジュール化する(人間とAIの両方に良い)
  • プロフェッショナルなソフトウェア開発のベストプラクティスに従う

このアプローチにより、Vibe Codedプロジェクトは、AI生成であっても、維持可能であり、技術的負債が蓄積されないことが保証されます。

4.5 モデル改善に追従する 🚀

AIコーディング環境は急速に進化しており、実験的なマインドセットが必要です:

「実験を続けてください。この分野の最先端は週ごとに変化しているようです。」

Tomは以下を推奨しています:

  • すべての新しいモデルリリースを試す
  • 特定のタスク(デバッグ、計画、実装など)に最適なモデルをテストする
  • モデルが改善されるにつれてワークフローを変更する柔軟性を持つ

彼は記録時点でGeminiがコードベース全体のインデックス作成と実装計画に最適であり、Claude Sonnet 3.7は実際のコード変更の実装に優れていると述べています。しかし、モデルが継続的に改善されるにつれて、これらの観察は非常に早く変わる可能性があることを強調しています。

5. 結論と将来の展望

5.1 AIアシストプログラミングの進化する風景 🌄

Vibe Codingはソフトウェア開発の方法に根本的な変化をもたらしています。Tomの経験とYCの創業者たちの洞察が示すように、AIアシストプログラミングのツールとテクニックの両方が急速に進化しています。

この探求からの重要な観察:

  1. AIコーディングアシスタントはますます有能になり、UIデザインからバックエンドロジック、DevOpsまですべてを処理しています
  2. プロフェッショナルなソフトウェアエンジニアリングの実践は依然として重要です - 計画、テスト、バージョン管理、モジュラー設計
  3. 異なるモデルには異なる強みがあり、それらを戦略的に組み合わせることで最良の結果が得られます
  4. この分野は非常に急速に進化しているため、柔軟性と実験が不可欠です

5.2 近い将来の予測 🔮

先を見据えると、いくつかの傾向が可能性として浮かび上がります:

  1. 人間の介入の減少: Tomがエラーメッセージに関して述べたように、「私たちがコピー&ペーストマシンであることの価値は奇妙です」。将来のツールはワークフローのより多くの部分を自動化し、AIアシスタントが直接ログやエラーメッセージを監視する可能性が高いです。

  2. よりモジュラーなアーキテクチャ: 明確なAPI境界を持つよりサービスベースのアーキテクチャへのシフトが見られるかもしれません。これによりAIが定義された制約内で作業しやすくなります。

  3. 従来のソフトウェア実践との収束: AIツールがよりプロフェッショナルなエンジニアリングワークフローを採用するにつれて、「Vibe Coding」と「ソフトウェアエンジニアリング」の区別はさらに曖昧になるでしょう。

  4. 異なるタスク向けの専門AIモデル: アーキテクチャ計画、テスト、デバッグ、UIデザインなど特定のタスクに優れたAIアシスタントが、統合開発環境で連携して動作する可能性があります。

5.3 最終的な推奨事項 🎯

今日Vibe Codingで優れた結果を出したい人へのアドバイス:

  1. プロフェッショナルなソフトウェアエンジニアリングの実践を取り入れる - AIと作業するときでも、それらは不可欠です
  2. 実装前に徹底的に計画する - AIアシスタントに明確なガイダンスと範囲を与える
  3. 厳格にテストする - AI生成コードが期待通りに動作することを確認する
  4. バージョン管理を厳格に使用する - 新しいアプローチを探索するときの安全ネットです
  5. 実験的であり続ける - ツールが進化するにつれて、今日機能することが明日は最適でない可能性がある

Tomが締めくくるように、この風景は毎週変化しており、発見やテクニックをコミュニティと共有することで、ソフトウェア開発のこの新しいエキサイティングなパラダイムでのスキル向上に役立ちます。

学習者向けポイント ✨

  • 初心者向け: Vibe Codingは必ずしもプログラミングの専門知識を必要としません。Lovableのようなツールを使うことで、UX/UIデザインへの関心がある方でも始められます。
  • 中級者向け: 既存のコードベースにAIを活用したい場合は、ツールごとの異なる強みを理解し、それらを戦略的に組み合わせましょう。
  • 上級者向け: AIはコードを書くだけでなく、アーキテクチャの設計、リファクタリングの機会の特定、さらには教育ツールとしても利用可能です。
2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?