573 lines
19 KiB
Markdown
573 lines
19 KiB
Markdown
---
|
||
description: プロジェクトの初期設定として技術スタックの選定をします。既にCLAUDE.mdがある場合は省略できます
|
||
---
|
||
|
||
# init-tech-stack
|
||
|
||
## 目的
|
||
|
||
ユーザとのインタラクティブなやりとりを通じて、プロジェクトに最適な技術スタック定義を作成し、`docs/tech-stack.md` ファイルを生成します。
|
||
|
||
## 前提条件
|
||
|
||
- プロジェクトルートディレクトリで実行
|
||
- `docs/` ディレクトリが存在する（なければ作成）
|
||
|
||
## 実行内容
|
||
|
||
段階的なヒアリングを通じて技術選択を行い、最終的に `docs/tech-stack.md` を生成します。
|
||
|
||
## ヒアリングフロー
|
||
|
||
### Phase 1: プロジェクト基本情報
|
||
|
||
まず、プロジェクトの基本情報をお聞かせください。
|
||
|
||
#### 質問1: プロジェクトタイプ
|
||
以下から最も近いものを選択してください：
|
||
|
||
1. **Webアプリケーション** - ブラウザで動作するアプリケーション
|
||
2. **モバイルアプリ** - スマートフォン/タブレット向けアプリ
|
||
3. **API/バックエンドサービス** - API提供がメインのサービス
|
||
4. **デスクトップアプリケーション** - PC向けネイティブアプリ
|
||
5. **ライブラリ/SDK** - 他の開発者向けのツール
|
||
6. **フルスタック（Web + API）** - フロントエンドとバックエンドの両方
|
||
7. **その他** - 上記以外
|
||
|
||
**あなたの選択**: [ユーザー入力を待つ]
|
||
|
||
---
|
||
|
||
#### 質問2: プロジェクト規模
|
||
開発チームの規模を教えてください：
|
||
|
||
1. **個人開発** - 1人で開発
|
||
2. **小規模チーム** - 2-5人
|
||
3. **中規模チーム** - 6-15人
|
||
4. **大規模チーム** - 16人以上
|
||
|
||
**あなたの選択**: [ユーザー入力を待つ]
|
||
|
||
---
|
||
|
||
#### 質問3: 開発期間
|
||
予定している開発期間はどの程度ですか？
|
||
|
||
1. **プロトタイプ/MVP** - 1-2ヶ月
|
||
2. **短期プロジェクト** - 3-6ヶ月
|
||
3. **中期プロジェクト** - 6ヶ月-1年
|
||
4. **長期プロジェクト** - 1年以上
|
||
|
||
**あなたの選択**: [ユーザー入力を待つ]
|
||
|
||
---
|
||
|
||
### Phase 2: 技術制約・要件
|
||
|
||
#### 質問4: 既存システム連携
|
||
既存のシステムやデータベースとの連携はありますか？
|
||
|
||
1. **新規構築** - 全て新しく作成
|
||
2. **既存DB連携あり** - 既存データベースを使用
|
||
3. **既存API連携あり** - 既存のAPIと連携
|
||
4. **レガシーシステム移行** - 既存システムからの移行
|
||
5. **その他連携要件あり** - 具体的に教えてください
|
||
|
||
**あなたの選択**: [ユーザー入力を待つ]
|
||
|
||
**既存技術がある場合は具体的に**: [ユーザー入力を待つ]
|
||
|
||
---
|
||
|
||
#### 質問5: パフォーマンス要件
|
||
想定される負荷や性能要件を教えてください：
|
||
|
||
1. **軽負荷** - 同時利用者数10人以下、レスポンス時間3秒以内
|
||
2. **中負荷** - 同時利用者数100人程度、レスポンス時間1秒以内
|
||
3. **高負荷** - 同時利用者数1000人以上、レスポンス時間0.5秒以内
|
||
4. **未定/不明** - まだ詳細は決まっていない
|
||
|
||
**あなたの選択**: [ユーザー入力を待つ]
|
||
|
||
---
|
||
|
||
#### 質問6: セキュリティ要件
|
||
セキュリティの重要度を教えてください：
|
||
|
||
1. **基本的なセキュリティ** - 一般的なWebセキュリティ対策
|
||
2. **高度なセキュリティ** - 個人情報取り扱い、金融系など
|
||
3. **エンタープライズレベル** - 企業向け、コンプライアンス要件あり
|
||
4. **未定/不明** - まだ詳細は決まっていない
|
||
|
||
**あなたの選択**: [ユーザー入力を待つ]
|
||
|
||
---
|
||
|
||
### Phase 3: チーム・スキル状況
|
||
|
||
#### 質問7: チームの技術スキル
|
||
チームメンバーの技術経験を教えてください（複数選択可）：
|
||
|
||
1. **JavaScript/TypeScript** - 経験豊富
|
||
2. **Python** - 経験豊富
|
||
3. **Java/Kotlin** - 経験豊富
|
||
4. **C#/.NET** - 経験豊富
|
||
5. **PHP** - 経験豊富
|
||
6. **Go/Rust** - 経験豊富
|
||
7. **React/Vue/Angular** - 経験豊富
|
||
8. **データベース設計** - 経験豊富
|
||
9. **クラウド（AWS/Azure/GCP）** - 経験豊富
|
||
10. **Docker/Kubernetes** - 経験豊富
|
||
11. **技術スキルは限定的** - 学習しながら進めたい
|
||
|
||
**あなたの選択（複数可）**: [ユーザー入力を待つ]
|
||
|
||
---
|
||
|
||
#### 質問8: 学習コスト許容度
|
||
新しい技術の習得についてどう考えますか？
|
||
|
||
1. **積極的に新技術を導入したい** - 最新技術でチャレンジしたい
|
||
2. **バランス重視** - 新技術と安定技術のバランスを取りたい
|
||
3. **安定技術優先** - 枯れた技術で確実に開発したい
|
||
4. **既存スキル活用** - チームが知っている技術を最大限活用したい
|
||
|
||
**あなたの選択**: [ユーザー入力を待つ]
|
||
|
||
---
|
||
|
||
### Phase 4: 運用・インフラ要件
|
||
|
||
#### 質問9: デプロイ・ホスティング
|
||
アプリケーションをどこで動かす予定ですか？
|
||
|
||
1. **クラウド（AWS/Azure/GCP）** - パブリッククラウド
|
||
2. **PaaS（Vercel/Netlify/Heroku）** - 簡単デプロイ重視
|
||
3. **VPS/専用サーバー** - 自前サーバー
|
||
4. **オンプレミス** - 社内サーバー
|
||
5. **未定** - まだ決まっていない
|
||
|
||
**あなたの選択**: [ユーザー入力を待つ]
|
||
|
||
---
|
||
|
||
#### 質問10: 予算制約
|
||
開発・運用コストについて教えてください：
|
||
|
||
1. **コスト最小化** - 無料・低コストツール優先
|
||
2. **バランス重視** - 適度なコストは許容
|
||
3. **品質重視** - コストより品質・効率を優先
|
||
4. **予算潤沢** - 最適なツールを選択可能
|
||
|
||
**あなたの選択**: [ユーザー入力を待つ]
|
||
|
||
---
|
||
|
||
## 技術スタック推奨ロジック
|
||
|
||
### 推奨アルゴリズム
|
||
|
||
ユーザーの回答に基づいて以下のロジックで技術を推奨：
|
||
|
||
#### フロントエンド選択
|
||
```
|
||
IF プロジェクトタイプ == "Webアプリケーション" OR "フルスタック"
|
||
IF チーム経験に "React/Vue/Angular" あり
|
||
IF 学習コスト許容度 == "積極的"
|
||
推奨: React 18 + TypeScript (最新技術)
|
||
ELSE
|
||
推奨: React 18 + JavaScript (安定性重視)
|
||
ELSE IF JavaScript経験あり
|
||
推奨: Vue 3 + TypeScript (学習コスト低)
|
||
ELSE
|
||
推奨: Next.js (フルスタック簡単)
|
||
```
|
||
|
||
#### バックエンド選択
|
||
```
|
||
IF JavaScript経験豊富
|
||
推奨: Node.js + Express/Fastify
|
||
ELSE IF Python経験豊富
|
||
推奨: FastAPI/Django
|
||
ELSE IF 他言語経験豊富
|
||
その言語のフレームワーク推奨
|
||
ELSE
|
||
推奨: Node.js (フロントエンドとの統一)
|
||
```
|
||
|
||
#### データベース選択
|
||
```
|
||
IF パフォーマンス要件 == "高負荷"
|
||
推奨: PostgreSQL + Redis
|
||
ELSE IF セキュリティ要件 == "高度"
|
||
推奨: PostgreSQL
|
||
ELSE IF プロジェクト規模 == "個人" OR "小規模"
|
||
推奨: SQLite → PostgreSQL (段階移行)
|
||
ELSE
|
||
推奨: PostgreSQL
|
||
```
|
||
|
||
### 推奨結果表示
|
||
|
||
各フェーズの回答後、ライブラリの最新バージョンやLTS版を検索して、以下の形式で推奨結果を表示：
|
||
|
||
```markdown
|
||
# あなたの回答に基づく技術スタック推奨
|
||
|
||
## 📋 回答サマリー
|
||
- プロジェクトタイプ: Webアプリケーション
|
||
- 規模: 小規模チーム（3人）
|
||
- 期間: 中期プロジェクト（8ヶ月）
|
||
- 技術スキル: JavaScript/TypeScript経験豊富
|
||
- 学習コスト許容度: バランス重視
|
||
|
||
## 🚀 推奨技術スタック
|
||
|
||
### フロントエンド
|
||
✅ **React 18 + TypeScript**
|
||
- 理由: チームのReact経験を活かせます
|
||
- メリット: 豊富なエコシステム、求人市場での優位性
|
||
- 学習コスト: 中（既存経験あり）
|
||
|
||
⚠️ **Vue 3 + TypeScript** （代替案）
|
||
- 理由: より学習コストが低い
|
||
- メリット: シンプルな構文、段階的導入可能
|
||
- 学習コスト: 低
|
||
|
||
❌ **Angular** （非推奨）
|
||
- 理由: 中期プロジェクトには重すぎる
|
||
- デメリット: 学習コスト高、小規模チームに不向き
|
||
|
||
### バックエンド
|
||
✅ **Node.js + Express + TypeScript**
|
||
- 理由: フロントエンドとの言語統一
|
||
- メリット: 開発効率、人材リソースの有効活用
|
||
- 学習コスト: 低（既存JavaScript経験）
|
||
|
||
### データベース
|
||
✅ **PostgreSQL**
|
||
- 理由: 中期プロジェクトの成長に対応
|
||
- メリット: ACID準拠、拡張性、JSON対応
|
||
- 学習コスト: 中
|
||
|
||
✅ **Redis** （キャッシュ）
|
||
- 理由: パフォーマンス向上
|
||
- メリット: セッション管理、高速キャッシュ
|
||
- 学習コスト: 低
|
||
|
||
### 開発環境
|
||
✅ **Docker + Docker Compose**
|
||
- 理由: 環境統一、デプロイ簡素化
|
||
- メリット: 開発環境の一貫性
|
||
- 学習コスト: 中
|
||
|
||
✅ **Jest + Testing Library**
|
||
- 理由: React標準、TypeScript親和性
|
||
- メリット: 豊富なドキュメント
|
||
- 学習コスト: 低
|
||
|
||
## ⚙️ 整合性チェック
|
||
|
||
✅ **技術選択の整合性**: 問題なし
|
||
- React + Node.js: 言語統一によるシナジー効果
|
||
- TypeScript: フロント・バック全体での型安全性
|
||
- PostgreSQL: 将来の成長に対応可能
|
||
|
||
✅ **チームスキルとのマッチング**: 良好
|
||
- 既存JavaScript/TypeScript経験を最大活用
|
||
- 学習が必要な新技術は最小限
|
||
|
||
✅ **プロジェクト要件との適合性**: 適合
|
||
- 中期プロジェクト向けの拡張性
|
||
- 小規模チームでの管理容易性
|
||
|
||
この推奨で進めますか？
|
||
|
||
1. **はい** - この推奨で `docs/tech-stack.md` を生成
|
||
2. **一部変更したい** - 個別技術を調整
|
||
3. **全体的に見直したい** - ヒアリングからやり直し
|
||
|
||
**あなたの選択**: [ユーザー入力を待つ]
|
||
```
|
||
|
||
## カスタマイズ対応
|
||
|
||
「一部変更したい」を選択された場合：
|
||
|
||
```markdown
|
||
# 技術スタックのカスタマイズ
|
||
|
||
どの部分を変更しますか？
|
||
|
||
1. **フロントエンド** (現在: React 18 + TypeScript)
|
||
2. **バックエンド** (現在: Node.js + Express + TypeScript)
|
||
3. **データベース** (現在: PostgreSQL + Redis)
|
||
4. **開発環境・ツール** (現在: Docker, Jest等)
|
||
5. **全て確認して個別調整**
|
||
|
||
**選択**: [ユーザー入力を待つ]
|
||
|
||
---
|
||
|
||
## フロントエンドの変更
|
||
|
||
現在の推奨: **React 18 + TypeScript**
|
||
|
||
利用可能な選択肢：
|
||
|
||
1. **React 18 + TypeScript** ⭐ (現在の推奨)
|
||
2. **React 18 + JavaScript** - TypeScriptを使わない場合
|
||
3. **Vue 3 + TypeScript** - より軽量なフレームワーク
|
||
4. **Vue 3 + JavaScript** - 最も学習コストが低い
|
||
5. **Next.js + TypeScript** - フルスタックフレームワーク
|
||
6. **Svelte/SvelteKit** - 新しいアプローチ
|
||
7. **Angular + TypeScript** - エンタープライズ向け
|
||
8. **Vanilla JavaScript + TypeScript** - フレームワークなし
|
||
9. **その他** - 具体的に指定
|
||
|
||
**あなたの選択**: [ユーザー入力を待つ]
|
||
|
||
**選択理由があれば**: [ユーザー入力を待つ]
|
||
```
|
||
|
||
## 最終生成処理
|
||
|
||
最終確認後、以下の処理を実行：
|
||
|
||
1. **ディレクトリ作成**
|
||
```bash
|
||
mkdir -p docs
|
||
```
|
||
|
||
2. **`docs/tech-stack.md` 生成**
|
||
|
||
生成されるファイル例：
|
||
|
||
```markdown
|
||
# プロジェクト技術スタック定義
|
||
|
||
## 🔧 生成情報
|
||
- **生成日**: 2025-01-08
|
||
- **生成ツール**: init-tech-stack.md
|
||
- **プロジェクトタイプ**: Webアプリケーション
|
||
- **チーム規模**: 小規模チーム（3人）
|
||
- **開発期間**: 中期プロジェクト（8ヶ月）
|
||
|
||
## 🎯 プロジェクト要件サマリー
|
||
- **パフォーマンス**: 中負荷（同時利用者数100人程度）
|
||
- **セキュリティ**: 基本的なWebセキュリティ対策
|
||
- **技術スキル**: JavaScript/TypeScript経験豊富
|
||
- **学習コスト許容度**: バランス重視
|
||
- **デプロイ先**: クラウド（AWS/Azure/GCP）
|
||
- **予算**: バランス重視
|
||
|
||
## 🚀 フロントエンド
|
||
- **フレームワーク**: React 18.2
|
||
- **言語**: TypeScript 5.0+
|
||
- **状態管理**: Redux Toolkit
|
||
- **UIライブラリ**: Material-UI v5
|
||
- **バンドラー**: Vite
|
||
- **ルーティング**: React Router v6
|
||
|
||
### 選択理由
|
||
- チームのReact経験を活かせる
|
||
- TypeScriptで型安全性を確保
|
||
- Material-UIで開発速度向上
|
||
- Viteで高速な開発環境
|
||
|
||
## ⚙️ バックエンド
|
||
- **フレームワーク**: Express.js 4.18
|
||
- **言語**: TypeScript 5.0+
|
||
- **データベース**: PostgreSQL 15
|
||
- **ORM**: Prisma
|
||
- **認証**: JWT + Refresh Token
|
||
- **キャッシュ**: Redis 7+
|
||
|
||
### 選択理由
|
||
- フロントエンドとの言語統一
|
||
- Prismaで型安全なDB操作
|
||
- PostgreSQLで将来のスケーリングに対応
|
||
- Redisでセッション管理とキャッシュ
|
||
|
||
## 💾 データベース設計
|
||
- **メインDB**: PostgreSQL 15+
|
||
- **キャッシュ**: Redis 7+
|
||
- **ファイルストレージ**: AWS S3 / Azure Blob (本番), ローカル (開発)
|
||
|
||
### 設計方針
|
||
- ACID準拠のトランザクション
|
||
- JSON型でNoSQL的な柔軟性も確保
|
||
- インデックス戦略でクエリ最適化
|
||
- 適切な正規化レベル
|
||
|
||
## 🛠️ 開発環境
|
||
- **コンテナ**: Docker + Docker Compose
|
||
- **パッケージマネージャー**: npm
|
||
- **Node.js**: 18+ LTS
|
||
|
||
### 開発ツール
|
||
- **テストフレームワーク**: Jest
|
||
- **テストライブラリ**: React Testing Library
|
||
- **E2Eテスト**: Playwright
|
||
- **リンター**: ESLint + Prettier
|
||
- **型チェック**: TypeScript
|
||
|
||
### CI/CD
|
||
- **CI/CD**: GitHub Actions
|
||
- **コード品質**: ESLint, Prettier, TypeScript
|
||
- **テスト**: Unit, Integration, E2E
|
||
- **デプロイ**: 自動デプロイ with approval
|
||
|
||
## ☁️ インフラ・デプロイ
|
||
- **フロントエンド**: Vercel / Netlify
|
||
- **バックエンド**: AWS ECS / Azure Container Apps
|
||
- **データベース**: AWS RDS / Azure Database
|
||
- **キャッシュ**: AWS ElastiCache / Azure Cache
|
||
- **CDN**: CloudFlare / AWS CloudFront
|
||
|
||
## 🔒 セキュリティ
|
||
- **HTTPS**: 必須 (証明書自動更新)
|
||
- **認証**: JWT + Refresh Token
|
||
- **CORS**: 適切な設定
|
||
- **バリデーション**: サーバーサイドバリデーション
|
||
- **環境変数**: 機密情報の適切な管理
|
||
- **依存関係**: 定期的な脆弱性チェック
|
||
|
||
## 📊 品質基準
|
||
- **テストカバレッジ**: 80%以上
|
||
- **コード品質**: ESLint + Prettier
|
||
- **型安全性**: TypeScript strict mode
|
||
- **パフォーマンス**: Lighthouse 90+点
|
||
- **アクセシビリティ**: WCAG 2.1 AA準拠
|
||
|
||
## 📁 推奨ディレクトリ構造
|
||
|
||
```
|
||
project-root/
|
||
├── frontend/ # React アプリケーション
|
||
│ ├── src/
|
||
│ │ ├── components/ # 再利用可能コンポーネント
|
||
│ │ ├── pages/ # ページコンポーネント
|
||
│ │ ├── hooks/ # カスタムフック
|
||
│ │ ├── store/ # Redux store
|
||
│ │ ├── types/ # 型定義
|
||
│ │ └── utils/ # ユーティリティ
|
||
│ ├── public/ # 静的ファイル
|
||
│ ├── package.json
|
||
│ └── vite.config.ts
|
||
├── backend/ # Express API
|
||
│ ├── src/
|
||
│ │ ├── controllers/ # API コントローラー
|
||
│ │ ├── services/ # ビジネスロジック
|
||
│ │ ├── models/ # データモデル
|
||
│ │ ├── middleware/ # Express ミドルウェア
|
||
│ │ ├── routes/ # API ルート定義
|
||
│ │ ├── types/ # 型定義
|
||
│ │ └── utils/ # ユーティリティ
|
||
│ ├── prisma/ # データベーススキーマ
|
||
│ ├── tests/ # テストファイル
|
||
│ ├── package.json
|
||
│ └── tsconfig.json
|
||
├── docs/ # プロジェクトドキュメント
|
||
├── docker-compose.yml # 開発環境
|
||
└── README.md # プロジェクト概要
|
||
```
|
||
|
||
## 🚀 セットアップ手順
|
||
|
||
### 1. 開発環境準備
|
||
```bash
|
||
# Docker環境起動
|
||
docker-compose up -d
|
||
|
||
# フロントエンド セットアップ
|
||
cd frontend
|
||
npm install
|
||
npm run dev
|
||
|
||
# バックエンド セットアップ
|
||
cd backend
|
||
npm install
|
||
npx prisma migrate dev
|
||
npm run dev
|
||
```
|
||
|
||
### 2. 主要コマンド
|
||
```bash
|
||
# 開発サーバー起動
|
||
npm run dev # フロントエンド
|
||
npm run dev:api # バックエンド
|
||
|
||
# テスト実行
|
||
npm test # 単体テスト
|
||
npm run test:e2e # E2Eテスト
|
||
|
||
# ビルド
|
||
npm run build # 本番ビルド
|
||
npm run preview # ビルド確認
|
||
|
||
# データベース
|
||
npx prisma studio # DB管理画面
|
||
npx prisma generate # クライアント生成
|
||
```
|
||
|
||
## 📝 カスタマイズ方法
|
||
|
||
このファイルはプロジェクトの進行に応じて更新してください：
|
||
|
||
1. **技術の追加**: 新しいライブラリ・ツールを追加
|
||
2. **要件の変更**: パフォーマンス・セキュリティ要件の更新
|
||
3. **インフラの変更**: デプロイ先・スケール要件の変更
|
||
4. **チーム変更**: メンバー増減に応じた技術選択の見直し
|
||
|
||
## 🔄 更新履歴
|
||
- 2025-01-08: 初回生成 (init-tech-stack.mdにより自動生成)
|
||
```
|
||
|
||
3. **確認メッセージ表示**
|
||
|
||
```markdown
|
||
✅ 技術スタック定義ファイルを生成しました！
|
||
|
||
📄 **生成ファイル**: `docs/tech-stack.md`
|
||
📊 **技術数**: フロントエンド6技術、バックエンド6技術、開発環境8ツール
|
||
🎯 **推奨理由**: チーム経験との適合性、プロジェクト要件への最適化
|
||
|
||
## 次のステップ
|
||
|
||
1. **ファイル確認**: `docs/tech-stack.md` の内容を確認
|
||
2. **カスタマイズ**: 必要に応じて技術選択を微調整
|
||
3. **チーム共有**: 技術選択をチームで合意
|
||
4. **開発開始**: 他のkairo-*コマンドで要件定義・設計に進む
|
||
|
||
## 技術スタック更新
|
||
|
||
技術選択を変更する場合は：
|
||
- `docs/tech-stack.md` を直接編集
|
||
- または `init-tech-stack.md` を再実行
|
||
|
||
このファイルは他の全てのコマンド（kairo-*, tdd-*, direct-*）で自動参照されます。
|
||
```
|
||
|
||
## エラーハンドリング
|
||
|
||
```markdown
|
||
## よくある問題と解決方法
|
||
|
||
### ❌ ファイル作成エラー
|
||
**原因**: `docs/` ディレクトリへの書き込み権限なし
|
||
**解決**: `mkdir -p docs && chmod 755 docs`
|
||
|
||
### ❌ 既存ファイル上書き警告
|
||
**原因**: `docs/tech-stack.md` が既に存在
|
||
**選択肢**:
|
||
1. 上書きする
|
||
2. バックアップを作成してから上書き
|
||
3. 別名で保存（例：`tech-stack-new.md`）
|
||
|
||
### ❌ 推奨技術が見つからない
|
||
**原因**: 特殊な技術要件や制約
|
||
**対処**: カスタマイズモードで手動選択
|
||
```
|
||
|
||
このように、段階的なヒアリングとインテリジェントな推奨機能により、プロジェクトに最適な技術スタック定義が自動生成される仕組みを作成しました。 |