Cursorでバイブコーディングを極める。非エンジニアでもできるは嘘。だが
最近、バイブコーディングめちゃくちゃ話題ですね。
そこで、例に漏れず爆速アプリ開発を体験してみたのでレポートします！
まず前提として、簡単に私のAI駆動開発環境を紹介させていただくと、今まではClineやCopilot、ClaudeのProは課金してDesktop App経由でMCPなどエージェント機能を使っていました。
ですが、今回バイブコーディングにデビューするにあたって、バイブコーディングではエージェントフル活用しますよね。
そのため、従量課金や、エディタでないClaude Desktopでは厳しかったので、CursorはTrialでしか使ったことがなかったのですが、Cursorを使うしかないと思いCursorのキャッチアップから始めました。
そのため、本記事ではCursorの初期設定で意識しておきたいポイントからアプリをリリースするところまで一気に紹介します！
バイブコーディングとは？AIにお願いするだけでアプリが作れる魔法
バイブコーディングって最近聞くようになったけど、実際何？という方のために簡単に説明します。2025年初頭にOpenAIの共同創業者であるAndrej Karpathy（アンドレイ・カルパシー）が提唱した新しいプログラミング手法で、コードの細部に没頭するのではなく、AIに指示を出して実装を「委ねる」というアプローチなんです。
ちなみにバイブはバイブスのことです。バイブスといえば今井華ですよね、分かる人は分かるはず...w
2013年にはギャル流行語大賞で1位にもなっていた。12年の時を経て流行再来
話を戻して、
カルパシーは「バイブに完全に身を任せ、指数関数的な進化を受け入れ、コードの存在すら忘れる」と表現しています。要するに、自分でコードを書くのではなく、AIに「こんなアプリが欲しい」と伝えるだけで、必要なコードを生成してもらう方法です。
天才カルパシーが言っているのでバイブコーディングができるかどうかは今後のエンジニアとしての死活問題にも関わるということですね。
Cursor初心者が最初に設定しておくべき3つのポイント
Cursorを使い始めるにあたって、最初に設定しておくべきポイントをいくつか紹介します。
1. ルールファイルの作成場所を知っておく
Cursorの強みは「ルール機能」です。これは、AIに「こんな風に開発して」という指示を事前に与えておく機能です。
ルールファイルは、歯車アイコン（設定）から作成でき、.cursor > rules > ファイル名.mdcというパスで保存されます。
以下のようなルール設定が可能になっています。
- User Rules: 全プロジェクト共通のルール
- Project Rules: プロジェクト固有のルール
これらをうまく使い分けることで、AIの精度と効率を大幅に高めることができます。というより、ルールの設定なしでバイブコーディングは自爆行為となってしまうのでご注意を。
2. プロジェクトの雛形は自分で用意する
バイブコーディングは確かに強力ですが、完全にゼロからというよりは、基本的な雛形を用意した方がスムーズです。例えばNext.jsを使うならcreate-next-appで最初の構造を作っておくといいでしょう。
AIは確かに優秀ですが、プロジェクトの初期設定、つまりベースを作る部分は人間やった方が確実です。
もう一つNext.jsの例でいうと、srcディレクトリを使うか使わないかの流派がありますが、srcディレクトリが無いと、勝手に作っちゃったりします。生成させないための指示を何度かするよりは、それくらいなら自分でやっちゃった方が早いですよね！
3. タスク管理用のTODOファイルを作る
これ、地味ですが超重要なテクニックです。todo.mdのようなファイルを作って、そこでタスクの進捗を管理すると、AIがちゃんと順番にタスクをこなしてくれます。
以下のようなプロンプトを繰り返し指示しました。
でも、、TODOを作ってコーディングさせるのってなんかバイブスな感じじゃないですね、後から思いました。でもそうしないと難しいので一旦それはおいておきましょう！
@todo.md このファイルに基づいて未完タスクを進めてください。キリのよいところで都度停止してください。ユーザー操作が必要な場合は指示してください。
終わったらTODOのチェックボックスにチェックも付けてもらいます。
これを使うと、AIが「次はこのタスクね」と理解して作業してくれて、効率爆上がりです。
今回紹介するアプリを作成した際には、最終的に以下のTODOを作ってもらいましたので紹介します！
todo.md
AI タンパクん 実装タスクリスト
進捗管理のため、完了したタスクは [x] にチェックを入れてください。
例：- [x] 完了したタスク
実装優先順位：🔥 高（必須）、🔸 中（重要）、🔹 低（あれば良い）
依存関係：➡️ 別タスクの完了が必要
フェーズ 1：基盤構築
1.1 プロジェクトセットアップ 🔥
-
Next.js プロジェクトの初期化
- App Router の設定
- TypeScript の設定
-
TailwindCSS のセットアップ
- 必要なプラグインの追加
-
ESLint, Prettier の設定
- TypeScript 用の設定
- Tailwind 用の設定
- 開発用の型定義ファイルの作成
1.2 環境構築 🔥
-
GitHub リポジトリの作成
- .gitignore の設定
-
環境変数の設定（Claude API Key 等）
- .env.example の作成
- Anthropic JavaScript SDK のセットアップ
1.3 基本設計 🔥
-
コンポーネント設計書の作成
- コンポーネント構成図
- 状態管理設計
- データフロー図
-
API 設計
- エンドポイントの設計
- リクエスト/レスポンスの型定義
フェーズ 2：コア機能実装
2.1 API 基盤実装 🔥
-
Claude API クライアントの実装 ➡️ 1.2
- API クライアントのクラス設計
- リクエスト/レスポンスの型定義
-
API Routes の実装
- エンドポイントの実装
- 基本的なエラーハンドリング
2.2 UI 基盤実装 🔥
-
レイアウトコンポーネントの作成 ➡️ 1.3
- ヘッダー
- メインコンテンツエリア（シングルカラム）
- フッター
-
カラースキームの設定（Tailwind 設定ファイル）
- メインブルー（#3B82F6）の設定
- セカンダリグリーン（#34D399）の設定
- ニュートラルグレーの設定
- ライトブルー（#EFF6FF）の設定
- タイポグラフィの設定
2.3 入力フォーム実装 🔥
-
食材/料理入力フォームの UI 実装 ➡️ 2.2
- 白背景に薄いボーダーのデザイン
- フォーカス時の青色ボーダー
- プレースホルダーテキストの設定
-
フォームバリデーションの実装
- 入力値の必須チェック
- 文字数制限の設定
- 空の入力の防止
- 送信ボタンの無効化
- 入力中のローディング表示
2.4 計算・表示機能実装 🔥
-
計算処理の実装 ➡️ 2.1, 2.3
- API 呼び出し処理
- エラーハンドリング
-
結果表示コンポーネントの実装
- 白背景カードデザイン
- 数値の強調表示（24-32px）
- 計算根拠の控えめな表示
2.5 ホーム画面（トップページ）実装 🔥
-
ホーム画面（
app/page.tsx）の作成- 計算フォーム・履歴・結果表示の配置
- レイアウト・スタイリング
- UI/UX ルール・デザイン仕様の遵守
フェーズ 3：基本機能拡張
3.1 履歴機能実装 🔸
-
LocalStorage の実装 ➡️ 2.4
- データ構造の設計
- 入力内容の保存
- 計算結果の保存
-
履歴一覧表示コンポーネントの実装
- アコーディオン形式の実装
- 削除機能（小さなアイコン）
-
日次合計の計算・表示機能
- 日付ごとの集計処理
- 数値の明確な表示
3.2 レスポンシブ対応 🔸
-
レスポンシブ対応の実装
- ブレイクポイントの設定
- モバイルファーストのスタイリング
- タッチターゲットの最適化
-
コンテナ最大幅の設定
- モバイル：100%
- デスクトップ：600px
3.3 UX 改善 🔸
- 即時フィードバックの実装
- API 応答待ち時間の表示（目標：3 秒以内）
フェーズ 4：品質向上
4.1 テスト実装 🔥
-
ユニットテストの実装
- コンポーネントのテスト
- API クライアントのテスト
-
GitHub Actions の設定
- CI パイプラインの作成
- リントチェックの自動化
- テストの自動実行
- Node.js バージョンの設定
- キャッシュの設定
4.2 パフォーマンス最適化 🔸
-
コンポーネントの最適化
- メモ化の実装
- 不要な再レンダリングの防止
-
API レスポンスのキャッシュ実装
- キャッシュ戦略の設計
-
初期ロード時間の最適化（目標：1 秒以内）
- Next.js ビルド設定の最適化
- コンポーネントの動的インポート
- フォントの最適化
-
Vercel Analytics の実装
- @vercel/analytics のインストール
- Analytics コンポーネントの追加
- パフォーマンスメトリクスの確認
4.3 セキュリティ対策 🔥
-
セキュリティヘッダーの設定
- CSP の設定
- HSTS の設定
- 入力値のサニタイズ処理
-
レート制限の実装
- 1 分あたり 10 リクエストの制限
- 1 日あたり 100 リクエストの制限
- IP アドレスベースの制限
- レート制限ヘッダーの実装
- クライアントサイドでのエラーハンドリング
-
404 ページの実装
- カスタム 404 ページの作成
- ホームに戻るボタンの実装
- レスポンシブデザインの適用
フェーズ 5：本番環境構築
5.1 本番環境設定 🔥
- Vercel プロジェクトの作成
-
本番環境へのデプロイ
- 環境変数の設定
- SSL 証明書の設定
フェーズ 6：追加機能実装
6.1 分析機能追加 🔹
- Google Analytics の設定
- カスタムイベントの設定
- ユーザー行動分析
フェーズ 7：ドキュメント整備
7.1 開発ドキュメント 🔥
-
README.md の作成
- プロジェクト概要
- 環境構築手順
- 開発フロー
- API 仕様書の作成
7.2 運用ドキュメント 🔸
- デプロイ手順書の作成
- メンテナンス手順書の作成
バイブコーディングで作った実例：「AIタンパクん」アプリ
実際にバイブコーディングを使って「AIタンパクん」というWebアプリを作ってみました！このアプリは、食材や料理名を入力するだけで、それに含まれるタンパク質量を簡単に計算できるシンプルなツールです。食材ごとのタンパク質量の対応表がなくてもAIがタンパク質量を教えてくれるので、
「スタバのソイラテトールサイズ」など、自由度高く調べられます。これはAIじゃないとできないんじゃないですかね
気になった方はぜひ使ってみてください！
必要量のタンパク質を摂取して一緒に健康的な体を手に入れましょう！
AIタンパクんの主な機能
- 食品名からタンパク質量をAIで自動計算
- 計算履歴の保存と日付ごとの表示
- 日々のタンパク質摂取量の合計表示
- レスポンシブデザインで、スマホからもPCからも利用可能
こだわりポイント1：AI連携のプロンプト設計
このアプリの核となるのがAIとの連携部分です。単にAPIを呼び出すだけでなく、AIに適切な指示を与えるプロンプトにしています。
「食品名」を入力するだけで、AIがタンパク質量、計算根拠、そして信頼度までを返すように設計。特に計算根拠を明示することで、ユーザーが結果の妥当性を判断できるようにしました。例えば「鶏むね肉100g」と入力すると、栄養成分表に基づいた具体的な計算根拠も表示します。
レスポンスをjson形式にすることで扱いやすくもしています。
APIは、大したタスクでないのと料金を抑えたかったので claude-3-5-haiku-20241022 を使っています。
こだわりポイント2：パフォーマンスとセキュリティ対策
バイブコーディングでアプリを爆速開発するとき、見落としがちなのがパフォーマンスとセキュリティ面です。AIタンパクんでは、以下のような対策を実装してもらいました。
- メモリキャッシュ機能: 同じ食品の計算リクエストは一定時間キャッシュすることで、APIコール数を削減し応答を高速化
- レート制限機能: APIの過剰利用を防ぐため、IPアドレスベースのレート制限を実装（1分間に10回、1日100回まで）いたずらしないでくださいね！
- XSS対策: ユーザー入力値のエスケープ処理により、クロスサイトスクリプティング攻撃を防止
こういったセキュリティ対策も簡単に実装できるのは魅力的ですね。後回しになりがちな対応なのでCursorを使わなかったらやってないかもですし、脆弱性を見落としたアプリになってしまっていると思います。
こだわりポイント3：データ管理と履歴表示
利用履歴はローカルストレージに保存することで、サーバー側の負荷軽減とユーザーのプライバシー保護を両立しています。
- 日付ごとのアコーディオン形式で履歴をグループ化
- 各日のタンパク質摂取合計量をひと目で確認可能
- 個別エントリの削除と全履歴一括削除機能
日々のタンパク質摂取量が一目でわかる集計機能はなかなか便利なのでは！マッチョマンやダイエット中の方にとって、日々の摂取量管理が簡単にできるようになっています。
実践編：バイブコーディングで失敗しないための3つのコツ
実際にバイブコーディングで開発するときのコツを紹介します。
コツ1：小さなプロジェクトから始める
最初から大きなアプリを作ろうとするとハマります。最初は機能を絞った小さなプロジェクトから始めましょう。自分は最初から壮大なアプリを作ろうとして挫折しました。
例えば最初は以下くらいのものにしておくと良いです。
- フロントエンドのみのシンプルなUI
- APIなしの静的サイト
- 認証機能なしのアプリ
コツ2：要件定義をしっかり作る
「なんとなくSNSみたいなの作りたい」みたいな曖昧な指示ではうまくいきません。何を作りたいのか、どんな機能が欲しいのかを明確にしておくことが超重要です。
バイブコーディングでは、AIに任せる部分が多い分、人間側の要件定義がより重要になります。ここがしっかりしていないと、何度も修正指示を出すことになり、結果的に非効率になってしまいます。
要件定義もClaudeに作ってもらいました。最終的に作成したのは以下です。こちらも公開しちゃいます！
途中で変更したところもあるので最終的に出来上がったものと異なる箇所はいくつかありますが参考にはなると思います。
要件定義書
タンパク質計算アプリ要件定義書（改訂版）
1. プロジェクト概要
本プロジェクトは、体づくりを目指すユーザー向けに、食材や料理名とその量を入力するだけで含まれるタンパク質量を簡単に計算できるウェブアプリケーションを開発するものである。従来のツールとの差別化として、Claude 3.5 Haiku API を活用し、自然言語での食事内容入力から直接タンパク質量を算出する。データベースは使用せず、Claude API の知識を活用して計算を行う。デザインは派手な視覚効果を排し、機能性と使いやすさを重視した洗練されたインターフェースを採用する。
2. プロジェクトの目的
- ユーザーが日々の食事からタンパク質摂取量を簡単に把握できるツールを提供する
- 食材名・料理名と単位（量）を自然言語で入力できる使いやすいインターフェースを実現する
- データベース構築・メンテナンスの手間を省き、迅速に開発・公開する
- シンプルで直感的な UI/UX により、幅広いユーザーに使いやすいアプリを提供する
3. ターゲットユーザー
- 筋力トレーニングを行っている人
- ダイエット・減量に取り組んでいる人
- 日々のタンパク質摂取量に関心がある人
4. 機能要件
4.1 コア機能
- 食材/料理名とその量（単位）の自然言語入力機能
- Claude API を使用したタンパク質量計算機能
- 計算結果の表示（数値を大きく見やすく表示し、計算根拠を補足として表示）
- 計算履歴の保存・表示機能（LocalStorage を使用）
- 日次のタンパク質摂取合計の算出・表示
5. 非機能要件
5.1 パフォーマンス
- API 応答待ち時間の適切な表示（ローディングインジケータ）
- 計算結果表示までの目標時間：3 秒以内
- サイト全体の軽量化（初期ロード時間 1 秒以内）
5.2 セキュリティ
- API Key のサーバーサイドでの安全な管理
- クライアントサイドではユーザーの入力内容のみ保存
5.3 拡張性
- ユーザー数増加に対応できる設計
- 機能追加が容易なコンポーネント設計
- 将来的な API の変更に対応しやすい構造
5.4 アクセシビリティ
- WCAG 2.1 AA レベルに準拠
- スクリーンリーダー対応
- キーボードナビゲーション対応
- 十分なコントラスト比の確保
6. 技術スタック
フロントエンド
- Next.js
- React
- Tailwind CSS
- LocalStorage（履歴保存用）
バックエンド
- Next.js API Routes
- Anthropic JavaScript SDK
インフラ
- Vercel（ホスティング）
外部 API
- claude-3-5-haiku-20241022
7. UI/UX デザイン仕様
7.1 デザインコンセプト
「Clear Protein」- 機能性と視認性を最優先し、無駄を省いた洗練されたデザイン
7.2 カラースキーム
-
メインブルー:
#3B82F6- アプリの基調色、ボタンやアクセント要素に使用 -
セカンダリグリーン:
#34D399- 計算結果表示用 - ニュートラルグレー: グレースケールでテキストや背景に段階的に使用
-
ライトブルー:
#EFF6FF- 背景やパネル用の薄い補助色
7.3 タイポグラフィ
- システムフォント優先スタック
- フォントサイズ階層
- 見出し: 18-20px
- 本文: 16px
- 補足テキスト: 14px
- 結果数値: 24-32px
7.4 レイアウト構成
- シングルカラムレイアウト
- 論理的な上から下への情報フロー
- 要素間の適切な空白による視覚的区分け
- コンテナ最大幅の設定（モバイル：100%、デスクトップ：600px 程度）
7.5 UI 要素詳細
-
入力フォーム:
- 白背景に薄いボーダー
- フォーカス時の控えめな青色ボーダー
- 十分な高さと内部パディング
-
ボタン:
- メインブルー背景
- 白色テキスト
- 適度な丸み
- ホバー時の微細な色調変化
-
結果表示カード:
- 白背景
- 数値の強調表示（大きなフォント、セカンダリカラー）
- 計算根拠は小さく控えめに
-
日次合計エリア:
- 薄いブルー背景
- 数値の明確な表示
-
履歴セクション:
- アコーディオン形式
- 項目間の境界線
- 削除機能の小さなアイコン化
7.6 インタラクションデザイン
- 必要最小限のアニメーション
- 即時フィードバック
- ローディング状態の明確な表示
- エラー発生時の適切な通知
7.7 レスポンシブ対応
- モバイルファーストアプローチ
- ブレイクポイント設定（モバイル、タブレット、デスクトップ）
- タッチターゲットの最適化（モバイル対応）
このタンパク質計算アプリは、機能性とシンプルさを両立させた実用的なツールとして、ユーザーの日々のタンパク質管理をサポートします。派手な視覚効果を排し、洗練された UI/UX により、幅広いユーザーに使いやすいアプリケーションを目指します。
コツ3：ルールの読み込みを確認する
Cursorはたまにルールを読み込んでくれないことがあります。読み込まれずに進むと悲惨なので以下のように確認しましょう！
あなたが.cursor/rules/*のルールファイルを正しく読み込んでいることを確認させてください。
読み込まれていない場合は、シンボルマークで直接指定してあげましょう。@ファイル名 とすると指定できます。
ただこの辺り、4月のアップデート内容でかなり改善されているようです！以下にまとめましたので御覧ください！
まとめ：バイブコーディングで変わる開発の未来
Cursor初心者がバイブコーディングで5時間程でこのクオリティのアプリができました。
ほんとにすごい時代ですね。
効果的に活用するためには以下のポイントを押さえておくことをおすすめします！
- 小さなプロジェクトから始める
- 要件定義をしっかり行う
- TODOファイルでタスク管理する
- 必要なルールを適切に設定する
これからもどんどん進化していくでしょうから、定期的に最新情報をチェックしながら、自分なりの使い方を確立していきます。
バイブス上げて自分が作りたいアプリを作っていきましょう！
Discussion