はじめに
「AIがコードを書いてくれる時代」とは聞いていましたが、実際にVibe Codingを使ってWebサイトを作り、Vercelで無料ホスティングするまでの体験は想像以上でした。
このサイトを作成した目的は、私がコンサルとしてクライアントに簡単なモックアップを提示する際に、Flaskでクライアントの環境からもアクセスできるWebページとDBを用意したかった（しかも無料で！）ことをきっかけにしています。
今回は、楽天ブックスAPIを使った書籍検索ツールを、平易な日本語の指示だけで開発し、わずか1-2時間でデプロイまで完了した経験を共有します。
この記事で得られること
- Vibe Codingの実践的な使い方
- Antigravityを使った効率的な開発フロー
- Vercelへの無料デプロイ手順
- Flask + PostgreSQL(Neon)のモダンな構成
- 実際の開発時間と苦労した点
デモサイト: https://vercel-rakutenbook-demo.vercel.app/
GitHubリポジトリ: https://github.com/naotoshisasada/vercel-rakutenbook-demo
Vibe Codingとは?
Vibe Codingは、自然言語でAIに指示を出しながらコードを生成する開発手法です。従来のコーディングと異なり、技術的な詳細を知らなくても、「何を作りたいか」を伝えるだけでAIが実装してくれます。
従来の開発との違い
| 従来の開発 | Vibe Coding |
|---|---|
| コードを1行ずつ書く | 自然言語で指示を出す |
| 技術仕様を詳しく知る必要がある | 「何を作りたいか」を伝えればOK |
| エラー対応に時間がかかる | AIが自動で修正・検証 |
| 環境構築が面倒 | AIが必要な設定を提案 |
今回使用したツール: Antigravity
Vibe Codingを実践するツールとして、Antigravityを使用しました。
VS CodeでGitHub Copilotを使ったVibe Codingも試しましたが、動作検証においてAntigravityが圧倒的に優秀でした。Antigravityは以下の点で優れています:
- コード生成後の自動テスト実行
- ブラウザでの動作確認を自動化
- エラーが出た際の自動修正
- GeminiやClaude Sonnetなど複数のAIモデルを切り替え可能
注意: 無料プランではすぐにリミット上限に達するため、Google AI Proの契約は必須だと感じました。
実際に作ったもの
今回作成したのは、楽天ブックスから書籍を検索し、レビュースコアの高い順に表示するツールです。
主な機能
- キーワード複数選択検索: 複数のキーワードを選択してAND検索
- レビュースコア表示: 楽天ブックスのレビュースコアで自動ソート
- 検索結果キャッシュ: 7日間のキャッシュでAPI呼び出しを最小化
- 楽天リンク統合: 検索結果から直接楽天ブックスへ移動可能
技術スタック
- Backend: Flask 3.0.3
- Database: PostgreSQL (Neon) / SQLite (ローカル開発)
- ORM: SQLAlchemy + Flask-SQLAlchemy
- Migration: Flask-Migrate (Alembic)
- API: 楽天ブックス Book Search API
- Frontend: Vanilla JavaScript + HTML/CSS
- Hosting: Vercel
プロジェクト構成
vercel-rakutenbook-demo/
├── app/
│ ├── __init__.py # Flask アプリ初期化
│ ├── models.py # SQLAlchemy モデル
│ ├── routes.py # ルーティング
│ ├── rakuten_api.py # 楽天 API 連携
│ └── templates/
│ └── index.html # フロント検索 UI
├── migrations/ # Alembic マイグレーション
├── config.py # アプリ設定
├── run.py # Flask 開発サーバ起動
├── requirements.txt # 依存パッケージ
└── vercel.json # Vercel デプロイ設定
Vibe Codingでの開発プロセス
どのように指示を出したか
技術的に高度な指示は一切していません。コンサルタントがクライアントから相談を受けるような平易な日本語で指示を出しました。
例えば:
- 「楽天ブックスAPIを使って、書籍を検索できるWebサイトを作りたい」
- 「検索結果をレビュースコアの高い順に並べて表示してほしい」
- 「同じ検索を何度もしたときにAPIを無駄に呼ばないように、キャッシュ機能を追加してほしい」
- 「Vercelにデプロイできるようにしてほしい」
このような指示だけで、AIが適切な技術スタックを選択し、実装してくれました。
生成されたコードの品質
驚いたのは、コードの品質が非常に高かったことです:
- Flask-SQLAlchemyを使った適切なモデル設計
- マイグレーションファイルの自動生成
- 環境変数を使った設定管理
- エラーハンドリングの実装
- レスポンシブなUI設計
手動で修正が必要だった部分はほとんどありませんでした。
開発時間
- 初回(調べ物含む): 約10時間
- 知見がある場合: 1-2時間で実装〜デプロイ可能
今回は初めてのVibe Coding、Flask、楽天API、Vercelだったため時間がかかりましたが、一度経験すれば次回以降は1-2時間程度で同様のアプリケーションを作成できると感じました。
Vercelへのデプロイ
Vercelを選んだ理由
Vercelは以下の点で優れていました:
- 完全無料: 個人プロジェクトなら無料プランで十分
- GitHubとの連携: プッシュするだけで自動デプロイ
- PostgreSQLデータベース: Neonとの統合で無料でDBも利用可能
- 環境変数管理: ブラウザから簡単に設定
- 高速: CDNによる高速配信
初めてのVercelでしたが、**無料でDBまで作成してもらえるなんて、なんてすごいサービスだろう!**と感動しました。
デプロイ手順
1. GitHubリポジトリの作成
Antigravityが自動でGitリポジトリを初期化してくれました。
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/naotoshisasada/vercel-rakutenbook-demo.git
git push -u origin main
2. Vercelプロジェクトの作成
- VercelにアクセスしてGitHubアカウントでログイン
- 「New Project」をクリック
- GitHubリポジトリを選択
- フレームワークプリセットで「Other」を選択
- 「Deploy」をクリック
3. 環境変数の設定
Vercelのダッシュボードで以下の環境変数を設定:
-
RAKUTEN_APP_ID: 楽天APIのアプリケーションID -
DATABASE_URL: PostgreSQL接続文字列(Neonで取得)
4. データベース(Neon)の設定
- Neonにアクセスして無料アカウント作成
- 新しいプロジェクトを作成
- 接続文字列をコピーしてVercelの環境変数に設定
5. マイグレーションの実行
Vercelのコンソールから以下のコマンドを実行:
flask db upgrade
これで完了!デプロイされたURLにアクセスすると、アプリケーションが動作しています。
デプロイ時の注意点
本来はDB接続情報をGitHubに公開すべきではありませんが、今回はVercelのすごさを伝えるためにあえて公開しています。
実運用では:
-
.envファイルを.gitignoreに追加 - Vercelの環境変数機能を使用
- シークレット情報は絶対にコミットしない
使ってみた感想
良かった点
1. 圧倒的な開発スピード
従来なら数日かかる開発が、1-2時間で完了しました。特に以下の作業が劇的に短縮されました:
- 環境構築
- ボイラープレートコードの作成
- API連携の実装
- データベース設計
2. 技術的な知識がなくても開発できる
Flask、SQLAlchemy、Alembicなどの詳しい知識がなくても、「何を作りたいか」を伝えるだけで適切な実装が完成しました。
3. 動作検証が自動化される
Antigravityは生成したコードを自動でテストし、エラーがあれば修正してくれます。これにより、デバッグ時間が大幅に削減されました。
4. Vercelの無料プランが強力
無料でDBまで使えるのは驚きでした。個人プロジェクトや学習用途には十分すぎるスペックです。
気になった点・制約
1. AIモデルの利用制限
無料プランではすぐにリミット上限に達します。本格的に使うならGoogle AI Proの契約は必須です。
2. 複雑なロジックは説明が必要
シンプルな機能は一発で実装できますが、複雑なビジネスロジックは段階的に説明する必要がありました。
3. 生成されたコードの理解は重要
AIが生成したコードを理解せずに使うのは危険です。最低限、何をしているか理解する努力は必要です。
どんな人/用途に向いているか
向いている人
- プロトタイプを素早く作りたい人
- アイデアを形にしたい非エンジニア
- 新しい技術スタックを学びたい人
- 個人開発でスピードを重視したい人
向いている用途
- MVP(Minimum Viable Product)の開発
- 社内ツールの作成
- 学習用プロジェクト
- ハッカソン
向いていない用途
- 大規模な本番システム(要レビュー)
- セキュリティが最重要なシステム
- 複雑なビジネスロジックを含むシステム
まとめ
Vibe CodingとVercelを使った開発は、想像以上に実用的でした。
学んだこと
- AIは開発の強力なパートナー: 技術的な詳細を知らなくても、適切な指示で高品質なコードが生成される
- Antigravityの動作検証機能が優秀: コード生成だけでなく、テストまで自動化されるのが強力
- Vercelの無料プランが素晴らしい: 個人開発なら十分すぎる機能が無料で使える
- 開発スピードが劇的に向上: 1-2時間で実装〜デプロイまで完了
AI時代の開発スタイル
これからの開発は、「どう実装するか」よりも「何を作りたいか」を明確にする能力が重要になると感じました。
Vibe Codingは、エンジニアの仕事を奪うのではなく、より創造的な部分に集中できるようにしてくれるツールです。
読者へのメッセージ
「AIに任せるのは不安」と思っている方も、まずは小さなプロジェクトで試してみることをお勧めします。
今回のような書籍検索ツールなら、本当に1-2時間で作れます。ぜひチャレンジしてみてください!
デモサイト: https://vercel-rakutenbook-demo.vercel.app/
GitHubリポジトリ: https://github.com/naotoshisasada/vercel-rakutenbook-demo
何か質問があれば、コメント欄でお気軽にどうぞ!