プッシュ通知
新記事をすぐにお知らせ
🎙️ 音声: ずんだもん / 春日部つむぎ(VOICEVOX)
yarn devで実行失敗。型チェック合格≠実行環境動作保証という重要な教訓GitHub Copilot Raptor miniは、要件定義からコード生成まで驚くほど効率的に進められます。しかし、TypeScriptの型チェック合格は開発の通過点に過ぎず、実際の動作環境では予期しないエラーが発生する可能性が高いということが本企画で明らかになりました。AI支援開発の真価は「どこまでAIに任せ、どこから人間が責任を持つか」を正確に理解することにあります。
2025年11月、MicrosoftはGitHub Copilotの無料プラン向けにRaptor miniという軽量モデルの提供を開始しました。これまで、AIコーディングといえば有料プランの高性能モデルが必須と考えられていました。しかし、Raptor miniの登場により、制限された環境下でも実用的なアプリケーション開発が可能かという問いが生まれました。
本企画は、この問いに正面から向き合うものです。Raptor miniのみを使用してフルスタックメモ帳アプリを数日でMVP化し、その過程でAI生成コードの実力と限界を透明に記録することが目的です。
Raptor miniは、OpenAIのGPT-5 miniをMicrosoftがファインチューニングしたモデルです。Azure OpenAI上でホストされており、以下の特徴を持ちます。
利用可能プラン
提供環境
強み
弱み
制限されたリソースで最大の成果を出すことは、実務開発でも重要なスキルです。本企画では、これを「縛りプレイ」と称し、以下のメリットを狙いました。
Raptor miniとの対話を通じて、要件を段階的に詰めていきました。ポイントは一度に全部聞かず、1問ずつ質問することです。
質問の流れ
この対話を通じて、曖昧な要件が実装可能な具体的な仕様へと進化していきました。
✅ ターゲット:Web のみ
✅ 認証:メール / パスワード(ユーザー毎のアカウント)
✅ ノート形式:Markdown
✅ 共有:不要(個人用)
✅ 優先機能:
1. タグ/ラベル管理
2. 画像添付(ノート内に画像を埋め込める)
3. 全文検索(タイトル・本文)
✅ デプロイ:自分でホスティング(Docker コンテナ)
✅ 目標リリース期間:数日(最小機能)
Raptor miniが推奨した技術スタック:
| 項目 | 選定 | 理由 |
|---|---|---|
| フロントエンド | Next.js(App Router) | SSR + API Routes で一括実装。認証・Markdown レンダリングが容易 |
| バックエンド | Next.js API Routes | フロント・バックを同一プロジェクトで管理。開発効率向上 |
| データベース | SQLite(開発)→ PostgreSQL(本番) | 軽量・素早く構築。本番移行時も容易 |
| ORM | Prisma | スキーマ管理が直感的。マイグレーション自動化 |
| 認証 | NextAuth(Credentials) | メール/パスワード認証に特化。セッション管理が自動 |
| 画像保存 | ローカルストレージ(開発)→ S3(本番) | MVP段階では十分。スケール時に移行可能 |
| 全文検索 | DB の LIKE 検索(MVP) | シンプル実装。後で Elasticsearch/Meilisearch に移行可 |
なぜこのスタックか
要件定義後、実装を以下の14タスクに細分化しました。
優先実装タスク
| # | タスク | 説明 | 受け入れ条件 |
|---|---|---|---|
| 1 | リポジトリ初期化 | Next.js + Prisma + SQLite 導入 | yarn dev で起動、Prisma マイグレーション実行可 |
| 2 | Docker & Compose | 開発用環境構築 | docker compose up --build でアプリ起動 |
| 3 | 認証設計 | パスワードハッシュ方式・メール確認の有無 | 設計書を docs/ に保存 |
| 4 | 認証実装 | サインアップ / ログイン / ログアウト | 登録 → ログイン → API アクセス確認 |
| 5 | DB スキーマ作成 | User, Note, Tag, Attachment モデル | マイグレーション実行・サンプルデータ挿入可 |
| 6 | ノート CRUD API | Create/Read/Update/Delete 実装 | Postman で CRUD 動作確認 |
| 7 | フロント UI | ノート一覧・作成・編集・表示(エディタ + プレビュー) | ブラウザからノート作成・表示可 |
| 8 | タグ機能 | タグ CRUD・フィルタ | タグ付与・フィルタ動作確認 |
| 9 | 画像アップロード | Attachment 保存 & 表示 | 画像アップロード → ノート表示で確認 |
| 10 | 全文検索 | 簡易 LIKE 検索 | キーワード検索でノート抽出可 |
| 11 | テスト作成 | ユニット・E2E テスト | CI で自動実行成功 |
| 12 | CI 設定 | GitHub Actions による test & build | プルリク自動テスト実行 |
| 13 | デプロイ手順 | 自己ホスティング用ドキュメント化 | 手順通りでサーバ起動確認 |
| 14 | ユーザーテスト | フィードバック収集 | 複数ユーザーから意見収集 |
「数日でMVP」という目標を実現するため、タスク1-10を優先と定義しました。テスト・CI・デプロイドキュメントは後続フェーズです。
Raptor miniの補完回数制限(月2,000回)を効率的に使うため、プロンプトは具体的かつ短くしました。
例1:初期化プロンプト
「Next.js App Router + Prisma + SQLite でメモ帳ボイラープレート作ってクレメンス。
認証は NextAuth Credentials で email/password 対応。
データモデル:User, Note, Tag, Attachment (many-to-many)」
例2:タスク分割プロンプト
「このタスク一覧から、優先順位トップ3のコード生成してクレメンス:
1. ノート CRUD API
2. 認証実装
3. タグ機能
各タスクの受け入れ条件も含めてや」
例3:エラー修正プロンプト
「TypeScript エラー修正してクレメンス:
@/lib/prisma が見つからん
@/lib/auth が見つからん
src/lib/ に必要なファイル全部作ってや」
Raptor miniに14タスクのコード生成を指示し、実装を完了させました。しかし、すぐに問題が発生しました。
初期状態
✅ コード生成:完了
✅ ファイル構成:整備
❌ TypeScript 型チェック:102 件のエラー
102件のエラーは、以下のカテゴリに分類されました。
モジュール解決エラー(code 2307)
@/lib/prisma が見つからない@/lib/auth が見つからないany型エラー(code 7006)
anyインポート・型定義エラー
bcrypt, react-markdown の型がないステップ1:型定義パッケージの追加
npm install --save-dev @types/react @types/react-dom @types/node
npm install bcryptjs # bcrypt ではなく bcryptjs を使用(型対応)
ステップ2:tsconfig.json の最適化
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"@/lib/*": ["./src/lib/*"]
},
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"strict": true,
"noImplicitAny": true
},
"include": [
"next-env.d.ts",
".next/types/**/*.ts",
"**/*.ts",
"**/*.tsx",
"src/**/*.ts"
]
}
ステップ3:custom.d.ts の作成
src/types/custom.d.ts を新規作成し、型定義が不足しているモジュールを手動補完。
// src/types/custom.d.ts
declare module 'bcryptjs' {
export function hash(data: string, salt: number): Promise<string>
export function compare(data: string, encrypted: string): Promise<boolean>
}
declare module 'react-markdown' {
import { FC, ReactNode } from 'react'
const ReactMarkdown: FC<{ children: string }>
export default ReactMarkdown
}
ステップ4:src/lib/ ファイルの生成
Raptor miniが参照していた src/lib/prisma.ts と src/lib/auth.ts を実装。
// src/lib/prisma.ts
import { PrismaClient } from '@prisma/client'
const globalForPrisma = globalThis as unknown as {
prisma: PrismaClient | undefined
}
export const prisma =
globalForPrisma.prisma ?? new PrismaClient()
if (process.env.NODE_ENV !== 'production') {
globalForPrisma.prisma = prisma
}
ステップ5:型チェック実行
npx tsc --noEmit
# 結果:0 errors
✅ TypeScript 型チェック:0 エラー
✅ ESLint:0 警告
✅ Prisma スキーマ:検証成功
✅ 依存パッケージ:全てインストール完了
修正にかかった時間:約30分(自動修正 + 手動調整)
型チェックが完全に合格した後、開発サーバを起動しました。
npm run dev
結果:起動失敗
エラー内容は記録されていませんが、以下のいずれかの可能性が高いです。
TypeScriptの型チェックは、静的解析による事前チェックに過ぎません。以下は保証されません。
Raptor miniが生成したコードの信頼度を段階的に評価すると:
| レベル | 内容 | 信頼度 |
|---|---|---|
| L1 | 型定義・インポート | 高(90%) |
| L2 | ロジック実装 | 中(60-70%) |
| L3 | 環境設定・初期化 | 低(40-50%) |
| L4 | 実行・デバッグ | 極低(10-20%) |
L3以上は人間による検証が必須です。
以下のステップは、AIに任せず人間が実施すべきです。
環境構築の検証
実行テスト
エラーハンドリング
得意なこと
苦手なこと
要件定義は人間が責任を持つ
実装はAIに任せ、検証は人間が行う
月間補完回数の使い方
ドキュメント化を並行実施
本企画では、以下の成果を達成しました。
| マイルストーン | 達成度 | 実績 |
|---|---|---|
| 要件定義 | ✅ 100% | 7つの質問で要件確定 |
| 技術スタック選定 | ✅ 100% | Next.js + Prisma + SQLite 決定 |
| タスク分割 | ✅ 100% | 14タスクに細分化、優先順位付け |
| コード生成 | ✅ 100% | 全14タスク実装 |
| 型チェック | ✅ 100% | 102エラー → 0エラー |
| 実行確認 | ❌ 0% | npm run dev 失敗 |
成功した部分:要件定義から型チェック完了までは、確実に数日で達成可能です。
失敗した部分:実行環境の調整には、予期しないエラーが多く発生し、追加のデバッグが必要です。
本企画の教訓は、実務開発でも活かせます。
プロトタイプ開発
新規機能実装
リファクタリング
GitHub Copilot Raptor miniは、開発プロセスの一部を劇的に加速する強力なツールです。しかし、それは「自動開発機」ではなく、「開発支援ツール」であることを忘れてはいけません。
要件定義から型チェック完了までは、AI単独で迅速に進められる
型チェック合格は、実行可能の保証ではない
AI生成コードの信頼度は、実装レイヤーに依存する
本企画の続きとして、以下のアクションが考えられます。
エラーログの詳細分析
npm run dev の失敗原因を特定自動テストの実装
本番デプロイ
ユーザーテスト
AI支援開発は、人間の創造性と判断力を失わせるのではなく、反復的な作業を減らし、より高次の問題解決に集中させるためのツールです。Raptor miniの補完回数制限は、一見すると制約ですが、実は**「何に時間を使うべきか」を考えさせる貴重な制約**でもあります。
本企画を通じて、AI開発の本質が「完全自動化ではなく、人間とAIの最適な協働」にあることが明確になりました。
記事数の多いカテゴリから探す