はじめに：Vibe Codingとは？Cursorとは？
2025年、注目を集めている開発スタイル「Vibe Coding（バイブコーディング）」。これは、AIに自然言語で指示を出すことでコードを自動生成し、誰でも簡単にアプリ開発ができる新しい手法です。
そのVibe Codingを可能にする最先端エディタが「Cursor（カーソル）」。Claude 4を搭載し、強力なAIコーディング体験を提供するこのツールを使って、今回は命令だけで「割り勘アプリ」を開発してみました。
先日、Cursor Meetup Tokyo 2025にオンライン参加しました。Cursorの可能性と実際の活用事例を聞いているうちに、どんどん熱くなってきて「自分でも何かアプリを作ってみたい！」という衝動に駆られ、実際に挑戦してみることにしました。
この記事では、Cursorの活用方法から、40分で完成した割り勘アプリの仕様、AIとのやり取り内容、Vibe Codingの実力まで、実践的な内容をわかりやすく解説します。
割り勘アプリとは？今回作ったアプリの機能概要
- メンバー登録・削除
- 項目ごとの支払い金額と対象メンバーの入力
- 支払者を指定し、精算金額を自動計算
- 編集・削除機能
- データの自動保存（localStorage）
- レスポンシブ対応のUI（Material Design 3）
完成品はこちら👇
開発環境と技術スタック
| 項目 | 内容 |
|---|---|
| 開発エディタ | Cursor（Claude Sonnet 4搭載） |
| 言語 | HTML, CSS, JavaScript |
| デザイン | Material Design 3風カスタムスタイル |
| ホスティング | GitHub Pages対応 |
| 保存 | localStorage使用 |
開発の流れと命令内容（Vibe Codingの実例）
ステップ1：自然言語で要件を定義
割り勘アプリを作成してください
GitHub Pagesを使いたい
マテリアルデザイン3を使いたい
メンバー管理と精算機能が必要です
結果：
- HTML/CSS/JS構成のWebアプリが自動生成
- ローカル保存対応
- UIにはマテリアルデザインが適用済み
ステップ2：エラー修正も自然言語で対応
script.js:66 Uncaught TypeError: Cannot read properties of undefined (reading 'trim')
結果：
- AIがコードエラーを解析し、修正
- Web Componentsを標準HTML要素に置き換え
ステップ3：リアルな割り勘仕様に仕様変更
支払った人と対象メンバーを分けて管理したい
田中さんが支払った金額を、佐藤さんと山田さんとで精算する形式にしたい
結果：
- 支払者と対象メンバーの選択機能を実装
- 債権債務ベースの精算ロジックに進化
- 精算結果を色分け表示
ステップ4：UX改善とOGP設定
使い方は折りたためるようにして
OGP設定してください@warikan-title.png サムネです
結果：
- アコーディオン式の使い方ガイドを実装
- SNSシェア用のメタタグとOGP設定を完備
- SEO対応の詳細なメタ情報を追加
Cursorでのアプリ開発にかかった時間・工数
| 項目 | 内容 |
|---|---|
| 総開発時間 | 約40分 |
| 命令回数 | 7回 |
| コード行数 | 約1300行（自動生成） |
| 修正内容 | 割り勘仕様→精算仕様に大幅変更 |
Cursor×Vibe Codingのメリットと限界
✅ メリット
- 曖昧な指示でも正確にコード生成
- デザインも美しく整ったUIを自動作成
- エラーにもAIが即時対応
- 高速開発でプロトタイピングが容易
- 仕様変更への柔軟な対応
⚠️ 限界・注意点
- 複雑な業務ロジックにはチューニングが必要
- AIの出力を検証するスキルは依然として重要
- セキュリティや保守性は要注意
まとめ：CursorとVibe Codingで可能になる未来
Cursorを活用した割り勘アプリ開発は、従来数時間～数日かかる作業をたった40分で完了させるという驚きの体験でした。
自然言語だけでここまで高機能なアプリが開発できることは、非エンジニアにとっても開発の敷居を下げ、プロダクト創出の可能性を広げる新時代の到来を示しています。
Vibe Codingで実感したこと
- 要件の曖昧さに対する寛容性 - 「ブラウザキャッシュとかで」といった曖昧な要求も適切に解釈
- 技術的問題の自動解決 - エラーが発生しても原因を特定して修正
- UX/UIの配慮 - 使いやすさと美しさを両立したデザイン
- 実用性の高さ - デモではなく、実際に使える品質
- 創造性への集中 - 技術的実装ではなく、ユーザー体験の改善に時間を費やせる
Vibe Codingの可能性
今回の体験を通して、Vibe Codingが単なるバズワードではなく、実際に開発パラダイムを変える可能性を秘めていることを実感しました。特に：
- プロトタイピングの高速化: アイデアを即座に形にできる
- 非技術者の参入障壁削減: プログラミング知識がなくてもアプリ開発が可能
- 技術スタックの抽象化: 実装手段よりも問題解決に集中できる
ただし、IBMの指摘にもあるように、複雑な要件やセキュリティ、メンテナンス性などの課題もあり、まだ完全に人間のエンジニアを置き換えるものではありません。しかし、開発プロセスを大幅に効率化し、より多くの人がソフトウェア開発に参加できる未来が見えてきました。
AIコーディングアシスタントの進歩により、アイデアから実装までのハードルが大幅に下がったことを実感できる、貴重な体験でした。
よくある質問（FAQ）
Q1. Cursorとはどんなツール？
→ Claude搭載のAIエディタで、自然言語でのコーディングが可能。
Q2. Vibe Codingで作ったアプリは本当に使える？
→ はい。今回の割り勘アプリは完全に実用的なレベルに達しています。
Q3. GitHub Pagesでの公開方法は？
→ index.htmlファイルをリポジトリのmainブランチに置き、Pages設定からデプロイ可能です。
リンク
成果物
Discussion