こんにちは、岡本です。AWSやCloudflareを活用したサーバーレスアプリケーション開発、Stripeの決済統合、ReactやHonoといった最新技術に携わる開発者として、日々新しいツールや手法を試しています。今回は、AIツール「Cursor」を活用した「Vibe Coding」の体験と課題について、Cloudflare WorkersやHono、Stripeを使ったデモアプリ開発を通して紹介します。
1. Vibe Codingとは何か
「Vibe Coding」という言葉は、AIツールを使って自然言語で指示を出し、コード生成やデバッグを自動化する開発手法を指します。実はすでにWikipedia記事も英語では作られており、Google翻訳にかけると次のように定義されています。
この概念は、 LLMに依存するコーディング手法を指し
、プログラマーは自然言語による記述を提供することで、手動で記述するのではなく、実用的なコードを生成できる。
このアプローチは、開発者が細かいコードを書く負担を軽減し、アイデアや設計に集中できる点で注目されています。
2. Cursorを使ったVibe Codingの体験から感じたこと
「AIコーディングは、AIに運転席を譲る覚悟が必要だ」という意見がありますが、やはり長年開発者をしていると、ハンドルを手放すのにはまだまだ勇気が必要です。とはいえこのまま置いていかれるのもキャリア的によくないなと思い、個人的に作ってみようと思っていたアプリ開発のハンドルを譲ってみることにしました。
アプリとしては、LINEと連携させた読書メモサービスで、LINEのチャットにメモを送信すると、それをウェブから表示・検索できるというものです。
開発期間は1日半くらいで、サブスクリプションの決済やマイページ実装まで完了しています。
長所: とにかく早く試せる・失敗できる
実際にやってみて感じた最大のメリットはこの試行回数です。「AIエージェントの肝要は試行回数を大幅に増やせること」という話を以前教えてもらったことがあるのですが、「これがそうか・・・」となりました。
というのも実はこのAIコーディング、3つくらいのアプリを同時に開始させていました。その中でビルドエラーが治らなかったり、いつまで経っても要件を満たすアプリにならないものも出てきていて、読書メモアプリが唯一課金機能実装まで走り抜けたという背景があります。この辺りは要件が複雑だったり、自分もあまりよくわかっていない技術選定を敢えて行わせてみたりしたこともあり、「AIコーディングがダメだ」というよりは「事前の要件・仕様次第でリリースすらできないことがある」という捉え方をすべきだと思います。
事前準備の内容次第で結果が変わると言うことは、1つのサービス・要件に対する開発でも敢えて3つも4つものコーディングパターンを試すことができます。MVPを志向するものから、できるだけB2Bの大口契約を目指すような要件、あるいはデザインから決めるかDBやAPIから決めるかもありそうです。このような進め方のシミュレーションにもAIは使えそうだなと感じました。
課題: みんなが知らないことは、AIも知らない
一方で「まぁそうだよね」という気持ちと、「結局この分野ではまだまだ人間優位か」と思った点はがこれです。「公式のドキュメントやGitHubのソースコードをよく読むと見つかるベストプラクティス」やほぼ間違いなく実装してくれません。人間でも難しい領域ではありますが、技術カンファレンスなどで情報収集すると、「こういうやり方をするのがよい」とアウトプットされていたり、「ここでハマるから気をつけな」のような情報を得られることがあります。ただ、それらのアウトプットを重み付けすることが難しいためか、どちらかというと初心者かよく言って中級者がやるだろうなという実装をAIは仕上げてきます。実際にみたコードなどは、後半の有料部分で紹介します。
この点については、開発者が手動でレビューし、修正を加える必要があります。そのため、運転席を譲ったとしても、やはりまだ助手席で教習車のように補助ブレーキを踏む準備はしておく必要がありそうです。
対策案: AIの協働を仕掛ける
知らないことはできないというのはもはや仕方ないことです。ただ、人間社会におけるフェイルセーフ・フールプルーフのような仕組みはできるはずです。今回試していて良かったなと思ったのは、Pull Request駆動開発によるGeminiでの検知です。GitHubのリポジトリには、Gemini Code Assistを利用した自動レビューを設定しています。そのため、AIにコードを書かせた際は、pull requestをGitHub上で開いてからマージするようにしました。その結果、脆弱性のあるコードが含まれていた場合や、「後でやる」とコメントだけ残されている実装などをGeminiがレビューで指摘してくれました。
このほかにも、Claudeを利用して事前にある程度技術的な要件を整理しておくことも効率的でした。これによって初回のAIコーディングで50%くらいまでのプロダクトが一気に出来上がります。また、作業がひと段落するたびにやり残しを整理させることで、セッションを新しくしたときにコンテキストを引き継げるようにも実装できました。
まだまだ手探りな部分のあるAIコーディングではありますが、ここまでのボリュームを2日足らずでできるとなると、「まだ早い」と様子見してる場合でもないのかもしれません。このプロダクト自体は、自分で使ってみて更新するステージですが、ある程度整えばリリースしようと思います。
[おまけ] 今回のコーディングで見かけた、気になるStripe系の実装２つ
元StripeのDevRelの視点から、「多分この実装は他のPJでも高確率でやるんじゃないかなぁ・・・」と感じたものを2つピックアップしてみました。対処法も書いていますので、気になる方はぜひ課金してお読みください。