バイブコーディング実践編 — Claude Code を中心に AIで安全に作る力 ／ Capstone — 小規模Webアプリ完走
Capstone — scaffold + minimal happy path
読了目安 6 分
学習のねらい
これまでの章で学んだ知識を統合し、Capston プロジェクトの最初のステップとして、アプリケーションの基本的な骨格 (scaffold) を構築します。 このレッスンでは、最小限の機能 (happy path、正常系の一連の流れ) をエンドツーエンドで動作させることを目指します。 AI を活用しながら、フロントエンド (Next.js) とバックエンド (FastAPI) を連携させ、デプロイ可能な形まで持っていく一連の流れを体験することで、大規模な開発の土台を築くスキルを養います。
最小動作の確保 (Minimal Happy Path)
「Minimal Happy Path」とは、アプリケーションの最も基本的な機能が、エラーなく一通り動作する状態を指します。 例えば、TODO リストアプリであれば、「タスクを追加し、それが一覧に表示される」という一連の流れがこれにあたります。
この段階で重要なのは、複雑な機能やエラーハンドリングに時間をかけず、まず「全体がつながって動く」ことを確認することです。 これにより、フロントエンドとバックエンドの連携、データベース接続、基本的な UI の表示といった、システムの基盤部分の問題を早期に発見・修正できます。
PR 分割戦略
AI は一度に多くの変更を生成しがちですが、それをそのまま大きな PR (Pull Request) として出すと、レビューが困難になります。 効果的な開発のためには、PR を小さな単位に分割する戦略が重要です。
例えば、以下のように分割できます。
- 環境構築・プロジェクトのひな形:
Next.jsとFastAPIのプロジェクトをそれぞれ作成し、最小限の構成 (package.json,requirements.txt,.env.example,.gitignore) を整える。 - データベース接続とデータモデル:
FastAPI側でデータベース接続 (例: SQLite) を設定し、データモデル (例:Todoモデル) を定義する。マイグレーションも含む。 - バックエンド API の実装:
FastAPIで、タスクの追加・取得といった基本的な CRUD (Create, Read, Update, Delete) API エンドポイントを実装する。 - フロントエンド UI の実装:
Next.jsで、タスク一覧表示、タスク追加フォームなどの UI コンポーネントを作成する。 - フロントエンドとバックエンドの連携:
Next.jsからFastAPIの API を呼び出し、データを取得・送信して UI に反映させる。
このように PR を分割することで、各変更の粒度が小さくなり、レビューしやすくなるだけでなく、問題発生時の原因特定も容易になります。
Feature Flag (機能フラグ)
「Feature Flag (機能フラグ)」は、特定の機能をコードから完全に削除することなく、有効/無効を切り替えられる仕組みです。 開発中の機能や、まだリリースしたくない機能を本番環境にデプロイする際などに役立ちます。
例えば、環境変数や設定ファイルを使って ENABLE_NEW_FEATURE=true/false のように設定し、コード内でその値に応じて処理を分岐させます。
# FastAPI の場合
from fastapi import FastAPI
import os
app = FastAPI()
ENABLE_NEW_FEATURE = os.getenv("ENABLE_NEW_FEATURE", "false").lower() == "true"
@app.get("/items/")
async def read_items():
if ENABLE_NEW_FEATURE:
return {"message": "New feature is enabled!"}
return {"message": "Old feature is active."}
Capston プロジェクトでは、大規模な機能フラグの導入は必須ではありませんが、「将来的に機能を切り替えたい」というニーズが出てきた際に、このような考え方があることを知っておくと役立ちます。
まとめ
Capston プロジェクトの最初のステップとして、Next.js と FastAPI を用いたアプリケーションの scaffold を構築し、minimal happy path をエンドツーエンドで動作させることを目指しましょう。
PR を小さな単位に分割する戦略と、feature flag の概念を理解することで、より効率的で安全な開発を進められます。