理工系学生プロジェクト
プログラミングの基礎があるユーザーに適しており、APIサービスとフルスタックアプリケーション開発を通じて、AIツールのソフトウェア開発における実践的な応用を深く理解し、エンタープライズレベル開発のベストプラクティスを習得できます。
プロジェクト1：APIサービス開発
プロジェクト概要
技術選定分析：なぜこのツールの組み合わせを選ぶのか？
Cursor Agent：アーキテクチャ設計とコード生成
- • プロジェクト構造の生成：Agent は要件を理解し、適切なプロジェクト構造を自動生成できます
- • アーキテクチャ設計：APIルート、ミドルウェア、エラー処理などのアーキテクチャ設計を支援
- • コード生成：要件記述に基づいて完全な CRUD 操作コードを生成する
- • ベストプラクティス：RESTful 設計原則、エラーハンドリングパターンなどを自動適用
GitHub Copilot：リアルタイムコード補完
- • コード補完：関数名またはコメントを入力すると、コード実装を自動補完
- • コンテキスト理解：現在のコードのコンテキストを理解し、関連する提案を提供する
- • 迅速な反復：重複コードの記述を減らし、開発速度を向上させる
- • 多言語サポート：複数のプログラミング言語とフレームワークをサポート
Continue.dev：コードレビューと最適化
- • コードレビュー：ローカルモデルを使用してコード品質をレビューし、潜在的な問題を発見する
- • パフォーマンス最適化：パフォーマンスのボトルネックを特定し、最適化の提案を行う
- • セキュリティ監査：セキュリティの脆弱性を確認し、修正提案を提供する
- • プライベートデプロイ：コードはクラウドにアップロードされず、プライバシーを保護する
ツールの相乗効果：Cursor Agent が全体アーキテクチャと複雑なロジック生成を担当し、Copilot が日常的なコード補完と迅速な反復を担当し、Continue.dev がコード品質保証を担当します。この組み合わせにより、設計から実装、最適化までの完全な開発フローが実現され、開発速度を確保しながらコード品質も保証されます。
詳細な手順
ステップ1：要件分析とAPI設計（1〜2時間）
1. API要件を明確にする：ユーザー管理、データCRUD、認証・認可
2. Cursor Agent を使って API 構造を設計する：
- POST /api/users（ユーザーを作成）
- GET /api/users（ユーザー一覧を取得、ページネーションとフィルタリングをサポート）
- GET /api/users/:id（単一ユーザーの取得）
- PUT /api/users/:id（ユーザーを更新）
- DELETE /api/users/:id（ユーザーを削除）
- POST /api/auth/login（ユーザーログイン）
- POST /api/auth/register（ユーザー登録）
JWT を使用して認証を行い、RBAC 権限管理を実装する"
3. CursorがAPI設計ドキュメントとルーティング構造を生成します
4. データモデル（User、Roleなど）を定義する
Step 2: Cursor Agentを使用してプロジェクト構造を生成する（1時間）
1. Cursor で新しいプロジェクトを作成し、技術スタックを選択する（例: Node.js + Express）
2. Agentモードを使用して、Cursorに要件を伝える：
- プロジェクト構造（routes、controllers、models、middleware）
- データベース設定（Prisma ORM を使用）
- 環境変数の設定
- エラー処理ミドルウェア
- ログ記録ミドルウェア
- 認証ミドルウェア（JWT）"
3. Cursor はプロジェクト全体の構成と基本コードを生成します
4. 生成された構造を確認し、必要に応じて調整する
Step 3: Copilotを使って開発を加速する（3〜4時間）
1. Copilotを使用してCRUD操作コードを補完する：
- • 関数シグネチャを入力すると、Copilot が実装を自動補完する
- • 入力コメントで要件を記述し、Copilotがコードを生成する
- • Copilot を使用してデータ検証ロジックを生成する
- • Copilot を使ってエラー処理コードを生成する
2. 認証と認可機能を実装する：
- • JWT tokenの生成と検証
- • パスワードの暗号化（bcrypt）
- • 権限チェックミドルウェア
3. データ検証を追加する（Joi または Zod を使用）
4. ページネーションとフィルタリング機能を実装する
Step 4: Continue.dev を使用してコードレビューを行う（1時間）
1. Continue.dev を設定し、ローカルモデル（Ollama）に接続する
2. Continue.dev を使用してコードをレビューする：
- • コード品質とベストプラクティスを確認する
- • 潜在的なパフォーマンス問題を特定する
- • セキュリティ脆弱性をチェックする
- • 最適化の提案を行う
3. レビュー結果に基づいてコードを最適化する
4. チームの規約にコードが準拠していることを確認する
ステップ5：テストとデプロイ（2時間）
1. 単体テストを作成する（Jestを使用）
2. 統合テストを作成する（API エンドポイントをテストする）
3. Use Postman or Thunder Client to test the API
4. クラウドプラットフォームにデプロイする（Railway、Render、Vercel など）
5. CI/CDフローの設定（GitHub Actions）
重要なコード例
ユーザーコントローラー（Cursor Agent生成）
// controllers/userController.js
const User = require('../models/User')
const { validationResult } = require('express-validator')
exports.createUser = async (req, res) => {
try {
const errors = validationResult(req)
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() })
}
const { name, email, password, role } = req.body
// メールアドレスが既に存在するか確認
const existingUser = await User.findOne({ email })
if (existingUser) {
return res.status(400).json({ error: 'Email already exists' })
}
// ユーザーを作成
const user = await User.create({
name,
email,
password: await bcrypt.hash(password, 10),
role: role || 'user'
})
res.status(201).json({
id: user.id,
name: user.name,
email: user.email,
role: user.role
})
} catch (error) {
res.status(500).json({ error: error.message })
}
}認証ミドルウェア（Copilot補完）
// middleware/auth.js
const jwt = require('jsonwebtoken')
const authenticate = (req, res, next) => {
const token = req.headers.authorization?.split(' ')[1]
if (!token) {
return res.status(401).json({ error: 'No token provided' })
}
try {
const decoded = jwt.verify(token, process.env.JWT_SECRET)
req.user = decoded
next()
} catch (error) {
res.status(401).json({ error: 'Invalid token' })
}
}
const authorize = (...roles) => {
return (req, res, next) => {
if (!req.user) {
return res.status(401).json({ error: 'Unauthorized' })
}
if (!roles.includes(req.user.role)) {
return res.status(403).json({ error: 'Forbidden' })
}
next()
}
}
module.exports = { authenticate, authorize }よくある問題と解決策
問題1：API 設計が RESTful の規範に準拠していない
ソリューション：Cursor Agentを使用してAPI構造を再設計し、RESTfulのベストプラクティスを参考にします。正しいHTTPメソッド（GET、POST、PUT、DELETE）とステータスコードを使用してください。
問題2：エラー処理が統一されていない
解決策：統一されたエラー処理ミドルウェアを作成し、Continue.dev を使用してエラー処理コードをレビューし、すべてのエラーが標準形式で返されるようにします。
問題3：パフォーマンスの問題（データベースクエリが遅い）
解決策：Continue.dev を使用してパフォーマンスのボトルネックを分析し、データベースインデックスを追加し、クエリ最適化を使用し、キャッシュ機構を実装します。
問題4：セキュリティ問題（SQL インジェクション、XSS）
解決策：パラメータ化クエリ、入力検証とサニタイズを使用し、Continue.devを使ってセキュリティ監査を行います。
プロジェクトチェックリスト
プロジェクト 2：フルスタックアプリケーション開発
プロジェクト概要
技術選定の分析：なぜ bolt.new + Cursor + Fabric を選ぶのか？
bolt.new：ブラウザ内フルスタック開発
- • WebContainers技術：ブラウザでNode.jsを実行、ローカル環境不要
- • 即時プレビュー：コードの変更がすぐ反映され、効果をリアルタイムで確認できる
- • 高速プロトタイピング：数分で完全なフロントエンドアプリを構築できる
- • 協業しやすい：共有リンクだけで共同開発
- • ワンクリックデプロイ：Vercel などのプラットフォームに直接デプロイする
Cursor: バックエンド API 開発
- • API開発：Agentモードを使ってバックエンドAPIを素早く生成する
- • データベース統合：Prisma、TypeORM などの ORM フレームワークを統合する
- • 認証システム：JWT、OAuthなどの認証方式を実装する
- • 業務ロジック：複雑な業務ロジックとデータ検証を処理する
Fabric：コード品質の最適化
- • コードレビュー：Patterns を使用してコード品質をレビューする
- • パフォーマンス最適化：パフォーマンスのボトルネックを特定して最適化する
- • ベストプラクティス：業界のベストプラクティスとデザインパターンを適用する
- • コードのリファクタリング：コードをリファクタリングして、保守性を向上させる
ツールの相乗効果：bolt.newはフロントエンドUIと基本的なインタラクションの迅速な構築を担当し、CursorはバックエンドAPIと業務ロジックの開発を担当し、Fabricはコード品質と性能の最適化を担当します。この組み合わせにより、フロントエンドとバックエンドを分離した開発を実現し、開発速度を確保しながらコード品質も保証できるため、中大型のフルスタックプロジェクトに適しています。
詳細な手順
ステップ 1: bolt.new を使ってフロントエンドを素早く構築（3〜4時間）
1. bolt.new にアクセスして、新しいプロジェクトを作成する
2. AIアシスタントを使ってフロントエンド要件を説明する：
- ログイン/登録ページ
- タスクリストページ（すべてのタスクを表示）
- タスク詳細ページ
- タスク作成/編集フォーム
- ユーザー設定ページ
Next.js + TypeScript + Tailwind CSS を使用し、ダークテーマをサポート"
3. bolt.new は完全なフロントエンドコードを生成します
4. UI のスタイルとインタラクションを調整し、アニメーション効果を追加する
5. 状態管理を実装する（Zustand または Context API を使用）
ステップ 2: Cursor を使用してバックエンド API を開発する（4〜5時間）
1. Cursor でバックエンドプロジェクト（Node.js + Express）を作成する
2. Agent モードを使用して API 構造を生成する：
- ユーザー認証API（登録、ログイン、token更新）
- タスクCRUD API
- タスクのフィルタリングと検索API
- ユーザー設定API
Prisma ORM、PostgreSQLデータベース、JWT認証を使用"
3. データベースモデルとリレーションを実装する
4. APIエンドポイントとビジネスロジックを実装する
5. データ検証とエラー処理を追加する
ステップ 3: フロントエンドとバックエンドの統合（2〜3時間）
1. APIクライアントを設定する（axios または fetch を使用）
2. API呼び出し関数を実装する：
- • ユーザー認証関連API
- • タスク CRUD API
- • エラー処理と再試行ロジック
- • トークン更新メカニズム
3. フロントエンドとバックエンドを接続し、API呼び出しをテストする
4. 読み込み状態とエラー状態を処理する
5. 楽観的更新とエラー時のロールバックを実装する
Step 4: Fabric を使ってコード品質を最適化する（2〜3時間）
1. Fabric の Patterns を使用してコードをレビューする：
- • コード品質Pattern
- • パフォーマンス最適化Pattern
- • セキュリティ監査パターン
- • ベストプラクティスパターン
2. Fabric の提案に基づいてコードを最適化する
3. 重複コードをリファクタリングし、共通コンポーネントを抽出する
4. データベースクエリを最適化し、インデックスを追加する
5. キャッシュ機構を実装する（Redis）
Step 5: 統合テストとデプロイ（1〜2時間）
1. エンドツーエンドテストを作成する（Playwright または Cypress を使用）
2. フロントエンドとバックエンドの統合機能をテストする
3. フロントエンドをVercelにデプロイ
4. Railway または Render にバックエンドをデプロイする
5. 環境変数とデータベース接続を設定する
6. 本番環境の機能をテストする
よくある問題と解決策
問題1: フロントエンドとバックエンドの通信失敗（CORS エラー）
解決策：バックエンドで CORS ミドルウェアを設定し、フロントエンドのドメインからのアクセスを許可します。API URL の設定が正しいか確認してください。
問題2：状態同期の問題（フロントエンドの状態とバックエンドの不一致）
ソリューション：楽観的更新とエラーロールバックを実装し、React Query または SWR を使用してサーバー状態を管理します。
問題3：デプロイ設定が複雑
ソリューション：環境変数を使用して設定を管理し、Dockerコンテナでデプロイをコンテナ化し、CI/CDでデプロイプロセスを自動化します。
プロジェクトチェックリスト
学習成果
この章を終えると、あなたは：
- 1API開発のベストプラクティスを習得し、RESTful規約に準拠したAPIを設計できる
- 2フルスタック開発の完全な流れを理解し、フロントエンドとバックエンドが分離されたプロジェクトを独立して完了できる
- 3複数のツールを連携して使い、ツールの組み合わせによる相乗効果を発揮できる
- 4コード品質保証の方法を習得し、ツールを使ってコードレビューと最適化ができる
- 5実際の問題を解決する能力を持ち、フロントエンドとバックエンドの統合、デプロイなどの複雑な問題に対応できる